Bootstrap3 源代码样式

源代码

源代码是指计算机程序的源码，或其他机器可以阅读的文本，如计算机程序、或函数名、XML元素名、或文件名等。

Bootstrap中，有两种方式显示源代码，一种是使用 <code> 标签包裹行内代码，另一种是使用 <pre> 标签包裹多行代码。

在使用 <pre> 和 <code> 标签标记源代码时，为了正确的展示代码，要对代码中的尖括号进行转义处理，即把代码中的左尖括号和右尖括号，分别替换成实体字符 < 和 >。

行内代码

出现在文本流中的行内代码，不会影响文本流的布局，一般使用 <code> 标签来包裹它。如：

<p>For example, <code><section></code> should be wrapped as inline.</p>

Bootstrap为 <code> 标签标记的文本使用了不同的文本颜色，并为添加了背景颜色和边框。效果如图 2‑35所示：

图2-35 行内代码

代码块

一般使用 <pre> 标签来包裹多行代码块，这会保证代码中的回车、换行、空格、制表符等原有格式不变。Bootstrap也为多行代码添加了背景颜色和边框。

从美观方面考虑，还可以对源代码进行语法高亮显示。网上有很多这样的插件，最著名的非 google 的 code prettify 插件莫属。这个插件非常好用，只需引入它的样式表和JS文件，并为 <pre> 标签添加 .prettyprint 类即可。如果要为源代码添加行号，再追加一个 .linenums 类就行了。如：

<pre class="prettyprint linenums">
$(function() {
$("#view").toggle(function() {
$("nav").hide();
$("[id=show]:checkbox").attr("checked", false);
},function() {
$("nav").show();
$("[id=show]:checkbox").attr("checked", true);
});
});
</pre>

效果如图 2‑36所示：

图2-36 多行代码

用户输入

HTML中的 <kbd> 标签用来标记通过键盘输入的内容，通常用来指示键盘按键，如 ctrl、shift等。如：

<p>
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd>+ <kbd>,</kbd></kbd>
</p>

Bootstrap 为 <kbd> 标签标记的文本添加浅黑色背景，并将文本显示为白色。效果如图 2‑37所示：

图2-37 用户输入

变量

HTML中的 <var> 标签用来标记计算机程序的源代码中的变量，它可以是数学表达式或程序上下文中一个真正变量，或一个常量，或函数参数，或仅仅是内容中的占位符。如：

<p><var>y</var> = <var>m</var><var>x</var> +<var>b</var></p>

Bootstrap 将 <var> 标签标记的文本显示为斜体。效果如图 2‑38所示：

图2-38 变量

程序输出

HTML中的 <samp> 标签用来标记程序或系统输出的内容。如：

<p>
<samp>This text is meant to be treated as sample output from a computer program.</samp>
</p>

Bootstrap 将 <samp> 标签标记的文本以等宽字体显示。效果如图 2‑39所示：

图2-39 程序输出

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。