Bootstrap系列 -- 8. 代码显示

 

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

 

四. kbd 显示

<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

　　效果如下