Bootstrap3.0学习第四轮：排版

</ul>

这个也很明显和Html的一样。

有序列表

顺序至关重要的一组元素。

<ol>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

</ol>

同理有序列表。

无样式列表

移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

<ul class="list-unstyled">

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

</ul>

内联列表

通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

<ul class="list-inline">

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

<li>Lorem ipsum dolor sit amet</li>

</ul>

效果当然就是在一行了。

描述

带有描述的短语列表。

<dl>

<dt>.Lorem ipsum dolor sit amet</dt>

<dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd>

</dl>

记得这标签在Html当中也是存在的。

水平排列的描述

.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起，随着导航条逐渐展开而排列在一样。

 <dl class="dl-horizontal">  

 <dt>.Lorem ipsum dolor sit amet</dt>  

 <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd>

</dl>

总结

主要是简单的回顾一下，在用的时候再熟悉一下，应该就不是什么问题了。

最后补充再补充一个知识点，也许有些情况还是用的到的额。

内联代码：在正文中通过<code>标签包裹内联样式的代码片段。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

简单的效果

基本代码快：多行代码可以使用<pre>标签。为了正确的展示代码，注意将尖括号做转义处理。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

简单效果

还可以使用.pre-scrollable class，其作用是设置max-height为350px，并在垂直方向展示滚动条。

（编辑：佛山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!