Bootstrap页面布局10 - BS代码
网页中标记代码内容使用code和pre标签
要在HTML中显示标签本来的样子需要转化为实体
在此附上百度的实体字符：http://baike.baidu.com/view/4757776.htm#3
code标签标注行内的代码内容
我要在代码中显示如下效果：
需要这么使用code标签
在前面几节中有是否还是记得：我们在 <code><div></div></code>标签中添加了一个类<code>.page-header</code>来显示一条分割线
pre标签标注一段代码内容--同样需要转化实体
<pre>
<script type='text/javascript' src='./bootstrap/bootstrap.js'></script>
</pre>
效果如图：
bootstrap为代码和代码块提供了好看的样式，我们只需要调用它的code或者pre标签即可，值得注意的是需要注意将需要显示的HTML特殊标签转化为实体
下面我们来讲讲，如何更加美化自己要美化的代码块<pre></pre>中的代码
①首先网上搜索google-code-prettify ，下载得到2个文件
prettify.js 和prettify.css
②分别保存在路径中然后引入这2个文件
<link href="./bootstrap/css/prettify.css" rel="stylesheet">
<script type="text/javascript" src="./bootstrap/js/prettify.js"></script>
③要显示行号，需要添加如下css样式在 <style type='text/css'></style>标签中
li.L0, li.L1, li.L2, li.L3,li.L5, li.L6, li.L7, li.L8{ list-style-type: decimal !important }
如果不添加行CSS代码那么显示的效果是每隔5行显示一个行号即 5n (n为整数) 才会显示一个行号
④给body标签添加onload='prettyPrint();' --> 注意有大写
<body onload='prettyPrint();'></body>
⑤给pre标签添加class='prettyprint linenums' -->注意是小写
<pre class='prettyprint linenums'></pre>
如图效果：
看这样效果是不是很赞！！！
Bootstrap页面布局10 - BS代码的更多相关文章
- Bootstrap页面布局10 - BS表格
①了解需要怎样的表格标签结构 ②bootstrap为我们提供了一些类来变换表格样式 1.table中添加 <table class='table'></table> 如图: 2 ...
- Bootstrap页面布局3 - BS布局以及流动布局
1. <h1 class='page-header'>布局<small> 使用bootstrap网格系统布局网页</small></h1> 得到如图所示 ...
- Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单
代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...
- Bootstrap页面布局9 - BS列表
列表: 无序列表(列表中项目内容没有固定的顺序), 有序列表(通常使用在一组有前后顺序的内容上), 描述列表(定义解释一组词汇) 无序列表: <ul> <li>Ueditor编 ...
- Bootstrap页面布局17 - BS选项卡
代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...
- Bootstrap页面布局24 - BS旋转木马功能
代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...
- Bootstrap页面布局23 - BS折叠内容
<div class='container-fluid'> <h3 class='page-header'>Bootstrap 折叠内容</h3> <!--如 ...
- Bootstrap页面布局20 - BS缩略图
<div class='container-fluid'> <h2 class='page-header'>Bootstrap 缩略图</h2> <ul cl ...
- Bootstrap页面布局19 - BS提示信息
提示信息的设计 提示信息的类: .alert:提示信息类 .alert alert-danger: .alert alert-error: .alert alert-success: .alert a ...
随机推荐
- Perl中的正则表达式
转自:http://c20031776.blog.163.com/blog/static/684716252013624383887/ Perl 程序中,正则表达式有三种存在形式 分别是 (1 模式匹 ...
- linux tricks 之数据对齐。
转载:http://blog.chinaunix.net/uid-20608849-id-3027953.html 内核为了保持最大的兼容性和代码灵活性,不可能直接对某个数据类型定义它的大小范围. ...
- laravel框架中注册信息验证
.路由配置 <?php Route::. 控制器分配页面及验证表单提交内容 <?php .form 表单验证 {{ Form::open(array().slideUp(); < ...
- Android 利用Gson生成或解析json
目前手机端和服务端数据交流格式一般是json,而谷歌提供了Gson来解析json.下载Gson:https://code.google.com/p/google-gson/ 下载的放在lib并导入,若 ...
- js:语言精髓笔记12--动态语言特性(2)
对于括号内: 通过赋值时发生的重写: (Object1 = function() {}).prototype.value = 100; var obj1 = new Object1; console. ...
- 学习NGUI前的准备NGUI的相关信息
学习NGUI前的准备NGUI的相关信息 第1章 学习NGUI前的准备 NGUI是Unity最重要的插件,在Unity资源商店(Asset Store)的付费排行榜中始终名列前茅,如图1-1所示.本章 ...
- CodeForces Round 192 Div2
This is the first time I took part in Codeforces Competition.The only felt is that my IQ was contemp ...
- BZOJ 1121 & science
1121: [POI2008]激光发射器SZK Time Limit: 10 Sec Memory Limit: 162 MB Submit: 647 Solved: 537 [Submit][Sta ...
- TextBlock 格式化内容
Text="{Binding ContentName,StringFormat=分享好书\{0\}}"
- CSS3盒模型display:box详解
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...