列表 - List

无样式列表

无样式列表使用 list-unstyled 样式，该样式移除了列表的默认样式和左侧外边距的一组元素（只针对直接子元素）。

<h2>无样式无序列表</h2>
<ul class="list-unstyled">
    <li>Home</li>
    <li>Products
        <!-- 下面嵌套一个列表，因为不是直接子元素，所有回复默认样式 -->
        <ul>
            <li>Gadgets</li>
            <li>Accessories</li>
        </ul>
    </li>
    <li>About Us</li>
    <li>Contact</li>
</ul>


<hr>


<h2>无样式有序列表</h2>
<ol class="list-unstyled">
    <li>Home</li>
    <li>Products
        <!-- 下面嵌套一个列表，因为不是直接子元素，所有回复默认样式 -->
        <ol>
            <li>Gadgets</li>
            <li>Accessories</li>
        </ol>
    </li>
    <li>About Us</li>
    <li>Contact</li>
</ol>
</div>

01.PNG

内联列表

内联列表会将所有元素放置于同一行。将列表的样式设置为 .list-inline 即可

<ul class="list-inline">
    <li>Home</li>
    <li>About Us</li>
    <li>Products</li>
    <li>Services</li>
    <li>Contact</li>
</ul>

02.PNG

描述性列表

使用 <dl> <dt> <dd> 标签可以创建描述性列表

• <dl> 表示创建列表
• <dt> <dd> 成对出现，一个是标题，一个是内容
• 增加 .dl-horizontal 样式可以创建水平描述性列表

<h2>正常描述性列表</h2>
<dl>
    <dt>User Agent</dt>
    <dd>An HTML user agent is any device that interprets HTML documents.</dd>
    <dt>Client-side Scripting</dt>
    <dd>Client-side scripting generally refers to the category of computer programs on the web that are executed client-side i.e. by the user's web browser.</dd>
    <dt>Document Tree</dt>
    <dd>The tree of elements encoded in the source document.</dd>
</dl>



<h2>水平描述性列表</h2>
<dl class="dl-horizontal">
    <dt>User Agent</dt>
    <dd>An HTML user agent is any device that interprets HTML documents.</dd>
    <dt>Client-side Scripting</dt>
    <dd>Client-side scripting generally refers to the category of computer programs on the web that are executed client-side i.e. by the user's web browser.</dd>
    <dt>Document Tree</dt>
    <dd>The tree of elements encoded in the source document.</dd>
</dl>

03.PNG