&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. 【和我一起学python吧】Python 启航

    话说万张高楼平地起,不会走之前先学会爬吧.尤其对于我等的小菜同学来说更是这样,不管怎么先code first吧,等我等小菜们翅膀硬了才test first吧. 1, 怎么运行python? 先到pyt ...

  2. MFC DLL 资源模块句柄切换[转]

    以前写MFC的DLL的时候,总会在自动生成的代码框架里看到提示,需要在每一个输出的函数开始添加上 AFX_MANAGE_STATE(AfxGetStaticModuleState()).一直不明白这样 ...

  3. git常用命令[持续更新]

    git commit -am "abc" 提交已经删除过的文件 git reset --hard HEAD 用于清除跟踪文件的修改

  4. 使用DBCC SHOW_STATISTICS展示索引的统计信息

    在开始之前搭建演示环境: USE master GO SET NOCOUNT ON --创建表结构 IF OBJECT_ID(N'ClassA', N'U') IS NOT NULL DROP TAB ...

  5. TJOI2013 DAY2

    第一题:明显先处理出最终序列,然后用线段树求解.处理最终序列可以用二分加树状数组(时间复杂度log2n, 用平衡树也可以搞...). /* * Problem: TJOI2013-day2-Seque ...

  6. redis的hashes类型

    redis hash 是一个string类型的field和value 的映射表.它的添加.删除操作都是O(1) . hash特别适合用于存储对象.相较于将对象的每个字段存成单个string类型 . 将 ...

  7. 第二百四十九天 how can I 坚持

    竟然让我跟着他们去旅游..泡温泉,滑雪..西北坡,不去白不去. 罗娜,你别把我拉黑啊.哎,不知道咋办. 晚上玩了四局LOL,全输了,伤心. 还有今天抢票没抢到. 该怎么破,12点半正好在吃饭啊. 睡觉 ...

  8. HDU 5660 jrMz and angles （暴力枚举）

    jrMz and angles 题目链接: http://acm.hust.edu.cn/vjudge/contest/123316#problem/E Description jrMz has tw ...

  9. STM32的GPIO使用的函数剖析

    转载http://blog.csdn.net/wuwuhuizheyisheng/article/details/8239599 STM32的GPIO总结 作者:JCY 该文是自己学习了一段STM32 ...

  10. mysql一些写常用命令

    参见pcttcnc2007博客腾飞 1.mysql的status信息命令: mysql> show global status; 2.可以列出mysql服务器运行各种状态值,另外,查询mysql ...