Bootstrap(四)列表与代码

列表

无序列表

<ul>
  <li>...</li>
</ul>

有序列表

<ol>
  <li>...</li>
</ol>

去点列表

<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表(列表元素放置于同一行)

<ul class="list-inline">
  <li>...</li>
</ul>

描述列表(带有描述的短语列表)

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

自动截断 经过 text-overflow 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

代码

内联代码

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

用户输入<kdb>

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

多行显示代码块

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

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

变量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序输出结果

<samp>This text is meant to be treated as sample output from a computer program.</samp>