Bootstrap_排版_列表

一、基本列表

<h5>普通列表</h5>
<ul>
    <li>列表项目</li>
    <li>列表项目</li>
    <li>列表项目</li>
    <li>列表项目</li>
    <li>列表项目</li>
</ul>
<h5>有序列表</h5>
<ol>
      <li>项目列表一</li>
      <li>项目列表二</li>
      <li>项目列表三</li>
</ol>

二、去点列表

　　通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

<ul class="list-unstyled">
  <li>不带项目符号</li>
  <li>不带项目符号</li>
</ul>

三、内联列表

　　通过添加类名“.list-inline”来实现内联列表，把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

<ul class="list-inline">
    <li>W3cplus</li>
    <li>Blog</li>
    <li>CSS3</li>
    <li>jQuery</li>
    <li>PHP</li>
</ul>

 

四、定义列表

<dl>
    <dt>W3cplus</dt>
    <dd>一个致力于推广国内前端行业的技术博客</dd>
    <dt>慕课网</dt>
    <dd>一个真心在做教育的网站</dd>
</dl>

五、水平定义列表

　　水平定义列表就像内联列表一样，Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。

<dl class="dl-horizontal">
  <dt>W3cplus</dt>
  <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
  <dt>慕课网</dt>
  <dd>一个专业的，真心实意在做培训的网站</dd>
</dl>