zoukankan      html  css  js  c++  java
  • 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>
    带滚动条的pre

    四. kbd 显示

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

      效果如下

  • 相关阅读:
    override new virtual 的比较
    c#页面无内容解决方案
    插入排序
    排序算法(转)
    treenode遍历文件夹
    案例篇(1)
    索引器(转)
    迭代器的实现
    抽象类和接口的区别
    索引器与迭代器,属性的区别
  • 原文地址:https://www.cnblogs.com/qingyuan/p/4589838.html
Copyright © 2011-2022 走看看