1蚯妇、使用<code></code>表現(xiàn)單行內(nèi)聯(lián)代碼
2侣集、使用<pre></pre>表現(xiàn)多行代碼
3简僧、使用<kbd></kbd>表現(xiàn)用戶輸入代碼
在使用代碼時坛增，用戶可以根據(jù)具體的需求來使用不同的類型：
1获雕、<code> 一般是針對于單個單詞或單個句子的代碼
2、<pre>: 一般是針對于多行代碼（也就是成塊的代碼）
3收捣、<kbd>: 一般是表示用戶要通過鍵盤輸入的內(nèi)容
示例如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>代碼</title>
<link rel="stylesheet" >
</head>
<body>
code風(fēng)格：
<div>Bootstrap的代碼風(fēng)格有三種：<code><code></code>届案、<code><pre></code>和<code><kbd></code></div>
pre風(fēng)格：
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
kbd風(fēng)格：
<div>請輸入<kbd>ctrl+c</kbd>來復(fù)制代碼，然后使用<kbd>ctrl+v</kbd>來粘貼代碼</div>
</body>
</html>
如圖
屏幕快照 2016-08-24 23.05.53.png
大塊代碼滾動條效果
<pre>元素一般用于顯示大塊的代碼罢艾，并保證原有格式不變楣颠。但有時候代碼太多，而且不想讓其占有太大的頁面篇幅咐蚯，就想控制代碼塊的大小童漩。Bootstrap也考慮到這一點，你只需要在pre標簽上添加類名“.pre-scrollable”春锋，就可以控制代碼塊區(qū)域最大高度為340px矫膨，一旦超出這個高度，就會在Y軸出現(xiàn)滾動條期奔。
下面是<code>.pre-scrollable</code>實現(xiàn)
.pre-scrollable {
max-height: 340px;
overflow-y: scroll;
}
示例代碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>代碼</title>
<link rel="stylesheet" >
</head>
<body>
高度超出340px侧馅，就會在Y軸出現(xiàn)滾動條
<!--下面是代碼任務(wù)部分-->
<pre>
<ol class="pre-scrollable">
<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>
</body>
</html>
效果如下
屏幕快照 2016-08-24 23.13.27.png
