&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. 并行开发——Parallel的使用 -摘自网络

    随着多核时代的到来,并行开发越来越展示出它的强大威力,像我们这样的码农再也不用过多的关注底层线程的实现和手工控制, 要了解并行开发,需要先了解下两个概念:“硬件线程”和“软件线程”. 1. 硬件线程 ...

  2. RestTemplate中文乱码问题

    使用RestTemplate传输带有图片的表单时,需要对表单中的中文参数进行URL编码, eg :URLDecoder.decode(name);               // 使用默认的解码   ...

  3. HDU 5919 -- Sequence II （主席树）

    题意: 给一串数字,每个数字的位置是这个数第一次出现的位置. 每个询问对于序列的一个子区间,设一共有k个不同的数,求第ceil(k/2)个数的位置. 因为强制在线,所以离线乱搞pass掉. 主席树可解 ...

  4. homework-05

    经过这几天的深思熟虑我和小明同学将这次作业基本的完整了,可能界面略丑陋,但是基本功能均已实现.我们的服务器端采用python编写,因为服务器端是这次作业的难点,而python中有一个叫做web.py的 ...

  5. CodeForces 682B Alyona and Mex （排序+离散化）

    Alyona and Mex 题目链接: http://acm.hust.edu.cn/vjudge/contest/121333#problem/B Description Someone gave ...

  6. UVA 315 315 - Network（求割点个数）

     Network  A Telephone Line Company (TLC) is establishing a new telephone cable network. They are con ...

  7. Java IO (3) - Reader

    Java IO (3) - Reader 前言 JavaIO一共包括两种,一种是stream,一种是reader/writer,每种又包括in/out,所以一共是四种包.Java 流在处理上分为字符流 ...

  8. javascript中数组的迭代等操作

  9. mac 下对 iterm 终端 设置代理

    vi .profile export http_prox="http://xxxx:port" export https_proxy="http://xxxx:port& ...

  10. JavaScript- 获取经度纬度

    昨天获得一个小需求,需要取地理位置. 通过以下的JS能获得经度和纬 if(navigator.geolocation) { navigator.geolocation.getCurrentPositi ...