正文

Bootstrap系列 -- 8. 代码显示

IP云
IP云V管理员/3 阅读
12/02
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

效果如下

相关阅读

目录[+]