Bootstrap系列 -- 8. 程式碼顯示

賀臣發表於2015-06-19
boot

 

一. 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>

　　效果如下

相關文章