Bootstrap3 源代码样式

源代码

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

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

 标签包裹多行代码。
 
  
在使用 
 和  标签标记源代码时，为了正确的展示代码，要对代码中的尖括号进行转义处理，即把代码中的左尖括号和右尖括号，分别替换成实体字符 < 和 >。
 
  
行内代码
 
  
出现在文本流中的行内代码，不会影响文本流的布局，一般使用  标签来包裹它。如：
 
  
 
 
  
 
   
For example, <section> should be wrapped as inline.
 
  
 
  
Bootstrap为  标签标记的文本使用了不同的文本颜色，并为添加了背景颜色和边框。效果如图 2‑35所示：
 
  
 
  
图2-35 行内代码
 
  
代码块
 
  
一般使用 
 标签来包裹多行代码块，这会保证代码中的回车、换行、空格、制表符等原有格式不变。Bootstrap也为多行代码添加了背景颜色和边框。
 
  
从美观方面考虑，还可以对源代码进行语法高亮显示。网上有很多这样的插件，最著名的非 google 的 code prettify 插件莫属。这个插件非常好用，只需引入它的样式表和JS文件，并为 
 标签添加 .prettyprint 类即可。如果要为源代码添加行号，再追加一个 .linenums 类就行了。如：
 
  
 
 
  
 
   
 
   
$(function() {
 
   
   $("#view").toggle(function() {
 
   
       $("nav").hide();
 
   
       $("[id=show]:checkbox").attr("checked", false);
 
   
   },function() {
 
   
       $("nav").show();
 
   
       $("[id=show]:checkbox").attr("checked", true);
 
   
   });
 
   
});
 
   
 
   
  
效果如图 2‑36所示：
 
  
 
  
图2-36 多行代码
 
  
用户输入
 
  
HTML中的  标签用来标记通过键盘输入的内容，通常用来指示键盘按键，如 ctrl、shift等。如：
 
  
 
 
  
 
   
 
   
To switch directories, type cd followed by the name of the directory.
 
   
To edit settings, press ctrl+ ,
 
   
 
  
 
  
Bootstrap 为  标签标记的文本添加浅黑色背景，并将文本显示为白色。效果如图 2‑37所示：
 
  
 
  
图2-37 用户输入
 
  
变量
 
  
HTML中的  标签用来标记计算机程序的源代码中的变量，它可以是数学表达式或程序上下文中一个真正变量，或一个常量，或函数参数，或仅仅是内容中的占位符。如：
 
  
 
 
  
 
   
y = mx +b
 
  
 
  
Bootstrap 将  标签标记的文本显示为斜体。效果如图 2‑38所示：
 
  
 
  
图2-38 变量
 
  
程序输出
 
  
HTML中的  标签用来标记程序或系统输出的内容。如：
 
  
 
 
  
 
   
 
   
This text is meant to be treated as sample output from a computer program.
 
   
 
  
 
  
Bootstrap 将  标签标记的文本以等宽字体显示。效果如图 2‑39所示：
 
  
 
  
图2-39 程序输出
 
  
关于作者
 
  
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。