Bootstrap页面布局10 - BS代码

网页中标记代码内容使用code和pre标签

要在HTML中显示标签本来的样子需要转化为实体

  在此附上百度的实体字符http://baike.baidu.com/view/4757776.htm#3

code标签标注行内的代码内容

  我要在代码中显示如下效果:

    Bootstrap页面布局10 - BS代码

    需要这么使用code标签

    在前面几节中有是否还是记得:我们在 <code>&lt;div&gt;&lt;/div&gt;</code>标签中添加了一个类<code>.page-header</code>来显示一条分割线

pre标签标注一段代码内容--同样需要转化实体

  <pre>

    &lt;script type='text/javascript' src='./bootstrap/bootstrap.js'&gt&lt;/script&gt;

  </pre>

  效果如图:

    Bootstrap页面布局10 - BS代码

  bootstrap为代码和代码块提供了好看的样式,我们只需要调用它的code或者pre标签即可,值得注意的是需要注意将需要显示的HTML特殊标签转化为实体

  下面我们来讲讲,如何更加美化自己要美化的代码块<pre></pre>中的代码

  ①首先网上搜索google-code-prettify ,下载得到2个文件

    prettify.js 和prettify.css 

  ②分别保存在路径中然后引入这2个文件

    <link href="./bootstrap/css/prettify.css" rel="stylesheet">

    <script type="text/javascript" src="./bootstrap/js/prettify.js"></script>

  ③要显示行号,需要添加如下css样式在 <style type='text/css'></style>标签中

    li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }

    如果不添加行CSS代码那么显示的效果是每隔5行显示一个行号即 5n (n为整数) 才会显示一个行号

  ④给body标签添加onload='prettyPrint();' --> 注意有大写

    <body onload='prettyPrint();'></body>

  ⑤给pre标签添加class='prettyprint linenums' -->注意是小写

    <pre class='prettyprint linenums'></pre>

  如图效果:

    Bootstrap页面布局10 - BS代码

  看这样效果是不是很赞!!!

上一篇:bzoj3905: Square


下一篇:Windows 2008修改密码策略方法