不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码&lt;”来替代,大于号(>)使用“&gt;”来替代

一、单行内联代码

  <code>:一般是针对于单个单词或单个句子的代码

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

二、多行块代码

  <pre>:一般是针对于多行代码(也就是成块的代码)

<pre>
&lt;ul&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;li&gt;...&lt;/li&gt;
&lt;/ul&gt;
</pre>

效果如下:

  有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

三、用户输入代码

  <kbd>:一般是表示用户要通过键盘输入的内容。

<kbd>ctrl+c</kbd>来复制代码
<kbd>ctrl+v</kbd>来粘贴代码

Bootstrap_排版_代码的更多相关文章

  1. Bootstrap_排版_文字样式

    一.段落 段落是排版中另一个重要元素之一.在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本): 1.全局文本字号为14px(font-size). 2.行高为1.428 ...

  2. Bootstrap_排版_标题

    Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规 ...

  3. Bootstrap_排版_表格

    一.基础表格 <table class="table"> <thead> <tr> <th>表格标题</th> < ...

  4. Bootstrap_排版_列表

    一.基本列表 <h5>普通列表</h5> <ul> <li>列表项目</li> <li>列表项目</li> < ...

  5. 转:HIBERNATE一些_方法_@注解_代码示例---写的非常好

    HIBERNATE一些_方法_@注解_代码示例操作数据库7步骤 : 1 创建一个SessionFactory对象 2 创建Session对象 3 开启事务Transaction : hibernate ...

  6. Bootstrap 一. 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )

    第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...

  7. Bootstrap_排版

    标题: Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体 ...

  8. 按PEP8风格自动排版Python代码

    Autopep8是一个将Python代码自动排版为PEP8风格的小工具.它使用pep8工具来决定代码中的哪部分需要被排版.Autopep8可以修复大部分pep8工具中报告的排版问题. 安装步骤如下: ...

  9. Bootstrap方法之--排版、代码

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

随机推荐

  1. FZYZ-2071 A Simple Math Problem IX

    P2071 -- A Simple Math Problem IX 时间限制:1000MS      内存限制:262144KB 状态:Accepted      标签:    数学问题-博弈论    ...

  2. 菜鸟学习SSH(一)——Struts实现简单登录(附源码)

    从今天开始,一起跟各位聊聊java的三大框架——SSH.先从Struts开始说起,Struts对MVC进行了很好的封装,使用Struts的目的是为了帮助我们减少在运用MVC设计模型来开发Web应用的时 ...

  3. mysql备份数据库

    需求: 1,每天4点备份mysql数据: 2,为节省空间,删除超过3个月的所有备份数据: 3,删除超过7天的备份数据,保留3个月里的 10号 20号 30号的备份数据: #创建shell文件 vim  ...

  4. 转载:linux capability深入分析

    转至http://www.cnblogs.com/iamfy/archive/2012/09/20/2694977.html 一)概述:  1)从2.1版开始,Linux内核有了能力(capabili ...

  5. Web —— 小技巧集

    html中设置锚点定位3种方法(已知): 1. id 定位         <a href="#1F" name="1F">锚点1</a> ...

  6. [分享]WPF 虚拟键盘

    场景:用WPF做触屏的软件难免会需要用户输入的问题,至少是简单的数字,这个时候就免不了需要键盘输入. 思路:既然是虚拟键盘,那么我的目的就是模拟键盘输入即可. 1.模拟键盘输入 模拟键盘输入?那么肯定 ...

  7. nvl,空时的推断和取值

    nvl NVL的概念 Oracle/PLSQL中的一个函数. 格式为: NVL( string1, replace_with) 功能:假设string1为NULL,则NVL函数返回replace_wi ...

  8. uva:10340 - All in All(字符串匹配)

    题目:10340 - All in All 题目大意:给出字符串s和t,问s是否是t的子串.s若去掉某些字符能和t一样,那么t是s的子串. 解题思路:匹配字符.t的每一个字符和s中的字符匹配.注意这里 ...

  9. POJ2250:Compromise(LCS)

    Description In a few months the European Currency Union will become a reality. However, to join the ...

  10. [转] boost.circular_buffer简介

    http://www.cnblogs.com/TianFang/archive/2013/02/05/2892503.html 很多时候,我们需要在内存中记录最近一段时间的数据,如操作记录等.由于这部 ...