&lt；表示“<”

&gt；表示“>”

在BootStrap中标记代码的标签使用<code>,标记代码块使用<pre>(里面的代码特殊标签必须转义)

下面我们看一个例子

代码：

<body>

<div class="container">

  <h1 class="page-header">代码</h1>

  <p>这是一个<code>&lt;h1&gt;</code>标签<code>int temp=0;</code></p>

  <pre ><code>&lt;dl class=&quot;dl-horizontal&quot;&gt;

  &lt;dt&gt;Mybatis&lt;/dt&gt;

  &lt;dd&gt;MyBatis 是支持普通 SQL查询，存储过程和高级映射的优秀持久层框架。&lt;/dd&gt;

  &lt;dt&gt;Spring&lt;/dt&gt;

  &lt;dd&gt;Spring是一个开源框架，Spring 是于2003 年兴起的一个轻量级的Java。&lt;/dd&gt;

  &lt;dt&gt;MVC&lt;/dt&gt;

  &lt;dd&gt;模型－视图－控制器一种软件设计模式。&lt;/dd&gt;

&lt;/dl&gt;</code></pre>

</div>

效果：

使用goole-prettify下载地址：https://code.google.com/p/google-code-prettify/downloads/detail?name=prettify-small-4-Mar-2013.tar.bz2&can=2&q=

使用：

1.下载后解压

2.在页面导入prettify.css，prettify.js

3.<pre class="prettyprint linenums"> 在pre中使用2个类第一个是渲染关键词颜色格式；第二个是给代码添加行号

4.最后在body标签中 添加 onLoad="prettyPrint()"

代码：

<body onLoad="prettyPrint()">

<div class="container">

  <h1 class="page-header">代码</h1>

  <p>这是一个<code>&lt;h1&gt;</code>标签<code>int temp=0;</code></p>

  <pre class="prettyprint linenums"><code>&lt;dl class=&quot;dl-horizontal&quot;&gt;

  &lt;dt&gt;Mybatis&lt;/dt&gt;

  &lt;dd&gt;MyBatis 是支持普通 SQL查询，存储过程和高级映射的优秀持久层框架。&lt;/dd&gt;

  &lt;dt&gt;Spring&lt;/dt&gt;

  &lt;dd&gt;Spring是一个开源框架，Spring 是于2003 年兴起的一个轻量级的Java。&lt;/dd&gt;

  &lt;dt&gt;MVC&lt;/dt&gt;

  &lt;dd&gt;模型－视图－控制器一种软件设计模式。&lt;/dd&gt;

&lt;/dl&gt;</code></pre>

</div>

效果:

BootStrap2学习日记6---代码的更多相关文章

  1. BootStrap2学习日记3--响应式布局实用类

    BootStrap2中常用的响应式布局类如: visible-phone     仅在 手机平台显示 visible-tablet      仅在 平板电脑显示 visible-desktop   仅 ...

  2. BootStrap2学习日记2--将固定布局换成响应式布局

    概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...

  3. BootStrap2学习日记20---定制缩略图

    先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...

  4. BootStrap2学习日记19---缩略图

    缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...

  5. BootStrap2学习日记18---提示消息

    代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...

  6. BootStrap2学习日记17---导航路径和分页

    导航路径 代码: <ul class="breadcrumb"> <li><a href="#">Home</a> ...

  7. BootStrap2学习日记16---选项卡内容

    代码: <ul class="nav nav-tabs"> <li class="active"><a href="#t ...

  8. BootStrap2学习日记14----导航

    <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inne ...

  9. BootStrap2学习日记13----关于按钮

    普通按钮 代码: <div style="margin-bottom:15px"> <a href="#" class="" ...

  10. BootStrap2学习日记12---注册表单

    <form method="" action="" class="form-horizontal"> <frameset& ...

随机推荐

  1. DOM笔记（一）：HTMLDocument接口

    操作HTML文档的第一步就是获取对文档元素的引用,每一个元素在DOM中就是一个节点,所有的元素在DOM中构成一个节点树. 用于获取元素节点定义的方法定义于HTMLDocument接口,window.d ...

  2. kendoui-在线文本编辑器

    文本编辑器用过很多,fckeditor是我之前用的最多的,但是问题也有很多,诸如安全问题,浏览器兼容问题..所以最近也一直在找替代产品,正好在研究kendo,所以就尝试了下kendo提供的edit控件 ...

  3. Google C++ 编程规范总结

    一.头文件 #define 的保护 项目 foo 中的头文件 foo/src/bar/baz.h 按如下方式保护: #ifndef FOO_BAR_BAZ_H_ #define FOO_BAR_BAZ ...

  4. Hadoop上路-03_Hadoop JavaAPI

    一.Eclipse安装 1.下载解压 下载:http://www.eclipse.org/downloads/ 解压:SHELL$ sudo tar -zxvf eclipse.tar.gz 2.快捷 ...

  5. java StreamTokenizer使用

    注意:用JAVA解题一般用Scanner类来进行输入,但对时间要求严格的题,用它可能会超时,我.解POJ1823的时候就遇到这样的问题,后改用StreamTokenizer类进行输入,就过了.看来后者 ...

  6. work3

    HOMEWORK-03 红字部分为组员修改的意见 文件介绍 在EXE文件夹中的main.exe文件为本项目执行文件直接点击即可,CODE文件夹中的C文件夹中包含了算法部分的代码,其编译出的DLL文件在 ...

  7. UVA 796 - Critical Links （求桥）

    Critical Links  In a computer network a link L, which interconnects two servers, is considered criti ...

  8. 在JS和.NET中使用JSON (以及使用Linq to JSON定制JSON数据)

    转载原地址: http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如 ...

  9. Socket连接与HTTP连接

    我们在传输数据时,可以只使用(传输层)TCP/IP协议,但是那样的话,如果没有应用层,便无法识别数据内容,如果想要使传输的数据有意义,则必须使用到应用层协议,应用层协议有很多,比如HTTP.FTP.T ...

  10. CodeForces 707A Brain's Photos (水题)

    题意:给一张照片的像素,让你来确定是黑白的还是彩色的. 析:很简单么,如果有一种颜色不是黑白灰,那么就一定是彩色的. 代码如下: #pragma comment(linker, "/STAC ...