Bootstrap顯示代碼的三種效果

代碼（一）

本節內容相對來說比較簡單，一般在個人博客上使用的較為頻繁，用於顯示代碼的風格。在Bootstrap主要提供了三種代碼風格： 1、使用<code></code>來顯示單行內聯代碼 2、使用<pre></pre>來顯示多行塊代碼 3、使用<kbd></kbd>來顯示用戶輸入代碼

預編譯版本的Bootstrap將代碼的樣式單獨提取出來： 1、LESS版本，請查閱code.less文件 2、Sass版本，請查閱_code.scss文件 編譯出來的CSS代碼請查閱bootstrap.css文件第688行~第730行，由於代碼太長，此處不一一列舉。

在使用代碼時，用戶可以根據具體的需求來使用不同的類型： 1、<code>：一般是針對於單個單詞或單個句子的代碼 2、<pre>：一般是針對於多行代碼（也就是成塊的代碼） 3、<kbd>:一般是表示用戶要通過鍵盤輸入的內容

雖然不同的類型風格不一樣，但其使用方法是類似的。 code風格：

<div>Bootstrap的代碼風格有三種：
  <code>&lt;code&gt;</code>
  <code>&lt;pre&gt;</code>
  <code>&lt;kbd&gt;</code>
</div>

pre風格：

<div>
<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>

kbd風格：

<div>請輸入<kbd>ctrl+c</kbd>來復制代碼，然后使用<kbd>ctrl+v</kbd>來粘貼代碼</div>

不管使用哪種代碼風格，在代碼中碰到小於號（<）要使用硬編碼“&lt;”來替代，大於號(>)使用“&gt;”來替代。而且對於<pre>代碼塊風格，標簽前面留多少個空格，在顯示效果中就會留多少個空格。

代碼（二）

正如前面所示，<pre>元素一般用於顯示大塊的代碼，並保證原有格式不變。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅，就想控制代碼塊的大小。Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”，就可以控制代碼塊區域最大高度為340px，一旦超出這個高度，就會在Y軸出現滾動條。 /*源碼請查看bootstrap.css第731行~第734行*/

.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
<pre>
<ol>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
 <li>....</li>
</ol>
</pre>