源代码
源代码是指计算机程序的源码，或其他机器可以阅读的文本，如计算机程序、或函数名、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 上开源。