bootstrap3.0教程之排版详细使用教程(标题、页面主体、强调、缩略

这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此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>

简单效果