Bootstrap系列 -- 8. 代码显示

简介: 一. Bootstrap中的代码块   代码块一般在博客中使用的较多,比较博客园中提供的贴代码. 在Bootstrap中提供了三种形式的代码显示   1. 使用来显示单行内联代码   2. 使用来显示多行块代码   3.

 

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

  效果如下

相关文章
|
4月前
|
前端开发 数据可视化 算法
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
r语言Bootstrap自助法重采样构建统计量T抽样分布近似值可视化|代码分享
|
4月前
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
|
4月前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
|
前端开发
bootstrap组件的案例代码
bootstrap组件的案例代码
130 0
bootstrap组件的案例代码
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
104 0
bootstrap样式代码案例
|
移动开发 前端开发 开发者
Bootstrap响应式前端框架笔记三——代码与表格
Bootstrap响应式前端框架笔记三——代码与表格
153 0
Bootstrap响应式前端框架笔记三——代码与表格
|
JSON 前端开发 数据格式
bootstrap-table 前端分页,刷新事件代码实例
function renderIssueTable(){ $('#issueTable').bootstrapTable({ detailView: false,//父子表 //分...
1263 0
|
存储 前端开发 JavaScript
BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 2.html设置: ? 1 2 3    3.
1798 0
|
数据可视化 前端开发
BootStrap可视化布局系统,自动生成代码
http://www.bootcss.com/p/layoutit/ image.png
2275 0