Bootstrap系列 -- 8. 代码显示

​​ Bootstrap系列 -- 8. 代码显示 ​​

2015-06-19 22:19  ​​贺臣​​ 阅读(1573)  评论(0)  ​

编辑 收藏

 

一. Bootstrap中的代码块

　　代码块一般在博客中使用的较多，比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示

　　1. 使用<code></code>来显示单行内联代码

　　2. 使用<pre></pre>来显示多行块代码

　　3. 使用<kbd></kbd>来显示用户输入代码

 

二. code 显示

<div class="col-md-offset-2">
        Bootstrap的code代码风格:
        <code><code></code>
        <code><pre></code>
        <code><kbd></code>
</div>

　　效果如下：

 

三. pre显示

<div>
        <pre>
        <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        </ul>
        </pre>
</div>

　　效果图如下：

　　如果代码块的内容较多，需要显示滚动条效果如何实现呢

<pre class="pre-scrollable">
        <ul>
        <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>
        <li>...</li><li>...</li>
        <li>...</li>
        <li>...</li>
        </ul>
        </pre>

带滚动条的pre

 

四. kbd 显示

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

　　效果如下

• 分类 ​​bootstrap​​
•