代码改变世界

Bootstrap系列 -- 8. 代码显示

2015-06-19 22:19  贺臣  阅读(1681)  评论(0编辑  收藏  举报

 

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

  效果如下


作者:情缘
出处:http://www.cnblogs.com/qingyuan/
关于作者:从事仓库,生产软件方面的开发,在项目管理以及企业经营方面寻求发展之路
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。
联系方式: 个人QQ  821865130 ; 仓储技术QQ群 88718955,142050808 ;
吉特仓储管理系统 开源地址: https://github.com/hechenqingyuan/gitwms