&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. Write a program to convert decimal to 32-bit unsigned binary.

    Write a program to convert decimal to 32-bit unsigned binary. Write a program to convert a 32-bit un ...

  2. BestCoder Round #75 解题报告

    King's Cake [思路] 递推 公式:f(n,m)=f(max(m,n-m),min(m,n-m))+1,n>m [代码] #include<cstdio> #include ...

  3. 线段和矩形相交 POJ 1410

    // 线段和矩形相交 POJ 1410 // #include <bits/stdc++.h> #include <iostream> #include <cstdio& ...

  4. 瞬间从IT屌丝变大神——分工安排

    分工安排主要包含以下内容: 公共组件(包括common.css和common.js)一人维护,各子频道专人负责,每个频道正常情况下由一人负责,要详细写明注释,如多人合作,维护的人员注意添加注释信息,具 ...

  5. 基于Hbase数据的Mapreduce程序环境开发

    一.实验目标 编写Mapreduce程序,以Hbase表数据为Map输入源,计算结果输出到HDFS或者Hbase表中. 在非CDH5的Hadoop集群环境中,将编写好的Mapreduce程序整个工程打 ...

  6. struts2框架开发的第一个应用

    写这篇博文,主要是帮助那些刚接触struts2框架开发而不知所措的人,希望批评指正 一.先建立一个web project,命名为struts2 二.在webroot/WEB-INF/lib目录下添加如 ...

  7. 删除 Mac OS X 中“打开方式”里重复或无用的程序列表

    如果右键菜单的「打开方式」里出现了已不存在的应用程序或者重复的项目,打开终端,执行以下命令: /System/Library/Frameworks/CoreServices.framework/Ver ...

  8. mysql统计一张表中条目个数的方法

    统计一张表中条目的个通常的SQL语句是: select count(*) from tableName; #or ) from tableName; #or 统计一个列项,如ID select cou ...

  9. Codeforces 377

    简单说一下. A 搜索出任意一个剩余细胞个数的联通块.剩下的填X. B 二分加贪心加数据结构. /* * Problem: * Author: Shun Yao */ #include <str ...

  10. ColorNote[动态][log]

    Windows 应用商店上传日志 [ColorNote In Windows APP Store Log]: ColorNote v1.0 2012/12/2 ColorNote v1.1 2012/ ...