?

一. Bootstrap中的代碼塊

　　代碼塊一般在博客中使用的較多，比較博客園中提供的貼代碼. 在Bootstrap中提供了三種形式的代碼顯示

　　1.?使用<code></code>來顯示單行內聯代碼

　　2.?使用<pre></pre>來顯示多行塊代碼

　　3.?使用<kbd></kbd>來顯示用戶輸入代碼

?

二. code 顯示

<div class="col-md-offset-2">Bootstrap的code代碼風格:<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>

　　效果圖如下：

　　如果代碼塊的內容較多，需要顯示滾動條效果如何實現呢

<pre class="pre-scrollable">&lt;ul&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ul&gt;</pre> 帶滾動條的pre

?

四. kbd 顯示

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

　　效果如下

總結

以上是生活随笔為你收集整理的Bootstrap系列 -- 8. 代码显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。