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>