&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. pci 记录

    用linux 下的sysfs可以方便的查看pci设备的配置和资源. 所有的pci设备在/sys/bus/pci/device 下面看到 pci配置空间对应的是设备对应的目录下的config文件,是二进 ...

  2. 《Genesis-3D开源游戏引擎--横版格斗游戏制作教程:简介及目录》(附上完整工程文件)

    介绍:讲述如何使用Genesis-3D来制作一个横版格斗游戏,涉及如何制作连招系统,如何使用包围盒实现碰撞检测,软键盘的制作,场景切换,技能读表,简单怪物AI等等,并为您提供这个框架的全套资源,源码以 ...

  3. fork之后发生了什么(基于3.16-rc4)

    在linux c编程中,我们可以使用fork,vfork,clone三个系统调用来创建子进程.下面我们先分析下fork系统调用的实现原理.代码如下(kernel/fork.c): #ifdef __A ...

  4. HBase Shell手动移动Region

    在生产环境中很有可能有那么几个Region比较大,但是都运行在同一个Regionserver中. 这个时候就需要手动将region移动到负载低的Regionserver中. 步骤: 1.找到要移动的r ...

  5. 《Java数据结构与算法》笔记-CH4-3用栈实现分隔符匹配

    import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; /** * 利 ...

  6. 生成chm文档工具- Sandcastle -摘自网络

    Sandcastle是微软官方的文档生成工具,NDoc开发停止后,这个貌似也是唯一的一个这方面的工具.它从dll文件及其xml注释文件能够 生成完整的帮助文档,支持多种生成格式(Helpe1x:chm ...

  7. matlab中的字符串数组与函数调用

    1, matlab中的字符串就是1维字符数组,即如: a = 'dddssd'; b = 'lsde'; c = [a, b]; 当然也可以: c= strcat(a, b); 2, matlab中的 ...

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

    不是傻,就是因为人太好了,我宁愿相信是我人太好了,好吧,我就是对人都挺好,这是病吗. 昨天一起吃的饭一起AA了,挺好,这种事就得AA,玩的挺happy. 还有.感觉自己好傻,老是遇事焦虑,以后试着改变 ...

  9. Red5点播和直播的实现

    (一)        Red5流媒体服务器介绍Red5是一个采用Java开发开源的Flash流媒体服务器.它支持:把音频(MP3)和视频(FLV)转换成播放流: 录制客户端播放流(只支持FLV):共享 ...

  10. Codeforces Round #359 (Div. 2) C. Robbers' watch (暴力DFS)

    题目链接:http://codeforces.com/problemset/problem/686/C 给你n和m,问你有多少对(a, b) 满足0<=a <n 且 0 <=b &l ...