bootstrap代码(一)
一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格:
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码
预编译版本的Bootstrap将代码的样式单独提取出来:
1、LESS版本,请查阅code.less文件
2、Sass版本,请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一列举。
在使用代码时,用户可以根据具体的需求来使用不同的类型:
1、<code>:一般是针对于单个单词或单个句子的代码
2、<pre>:一般是针对于多行代码(也就是成块的代码)
3、<kbd>:一般是表示用户要通过键盘输入的内容
虽然不同的类型风格不一样,但其使用方法是类似的。
code风格:
<div>Bootstrap的代码风格有三种:
<code><code></code>
<code><pre></code>
<code><kbd></code>
</div>
pre风格:
<div>
<pre>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</pre>
</div>
kbd风格:
<div>请输入<kbd>ctrl+c</kbd>来复制代码,然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>
不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。
bootstrap代码(一)的更多相关文章
- Bootstrap 代码
[Bootstrap 代码] Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种 ...
- 【原创】bootstrap框架的学习 第六课[bootstrap代码]
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
- !!!常用bootstrap代码
http://v3.bootcss.com/components/ 组件 http://v3.bootcss.com/customize/ bootstrap定制 http://v3.bootcs ...
- bootstrap学习笔记--bootstrap组件
前面已经学习了bootstrap环境搭建以及基本布局方面的知识,下面将学习下关于bootstrap的相关组件,知识点有点多. 关于bootstrap组件知识点目录: Bootstrap--代码显示 B ...
- bootstrap学习笔记--bootstrap布局方式
Bootstrap 3 是移动设备优先的,在这个意义上,Bootstrap 代码从小屏幕设备(比如移动设备.平板电脑)开始,然后扩展到大屏幕设备(比如笔记本电脑.台式电脑)上的组件和网格. 移动设备优 ...
- 使用外部web组件-----easyUI、jQueryUI、Bootstrap、js正则表达式
1.使用外部web组件,以Bootstrap为例 <head> <link rel='stylesheet' href='bootstrap-3.3.0-dist/dist/css ...
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/he ...
- Bootstrap<基础二> 网格系统
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是网格(Grid)? 摘自维基百科: 在平面设计中,网格 ...
- bootstrap弹框
http://v3.bootcss.com/javascript/#modals 参考bootstrap官网 模态框做php后端 前端一直不行,但是很多时候 用到ajax都要用到弹框,一直在代码里面找 ...
随机推荐
- JVM 堆参数调优 (四)
堆参数调优 1.堆的结构 JAVA7 堆逻辑上分为:新生区.养老区.永久区:实际上堆只有新生区.养老区: Minor GC:轻量的垃圾回收: Major GC(Full GC):重量级垃圾回收. ...
- Android.DebugTools.Traceview & dmtracedump
1. Android 调试工具之Traceview http://www.cnblogs.com/devinzhang/archive/2011/12/18/2291592.html TraceVie ...
- 原生和web交互jsbridge交互总结
技术点:jsbridge. 一: 参数及其意义(代码意义结合支付项目) 二:主动请求原生参数与方法(sendapi) 参数1 判断接口类型 参数2 传递给原生的数据 参数3 回调函数,response ...
- Python 环境安装教程(Windows 10)
Python编程语言非常强大,非常容易上手,版本更新也不慢,在win10 x64中兼容性也很好,直接安装不需另外配置,虽然Python2和3有点异同.学习的话选择最新的 python 3.7.1版. ...
- springboot配置il8n
springMvc下,配置il8n: 1.配置ResourceBundleMessageSource管理国际化资源文件 2.在页面使用fmt标签取出国际化内容 springBoot下,自动配置了il8 ...
- [js]获取网页屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
- springMVC学习 四 请求的中文乱码解决
在使用SpringMVC时,同样有前端向后端发送请求,请求参数中有中文,需要解决中文乱码问题,在Spring中也是向java web中一样,通过一个过滤器来解决中文乱码. 这个过滤器在spring-w ...
- Linux CPU Hotplug CPU热插拔
http://blog.chinaunix.net/uid-15007890-id-106930.html CPU hotplug Support in Linux(tm) Kernel Linu ...
- vue 开发系列(二) vue ajax 拦截
概要说明 在开发的过程中,我们需要通过AJAX请求,访问后台获取数据,这个获取数据的时候,当然需要后台需要时登录状态才能访问数据,当没有登录的情况,这个时候我们需要跳转到登录界面进行登录. 如果每次请 ...
- matlab 设定坐标比例
figure() u=-0.1:0.005:0.1; v=-0.1:0.005:0.1; [x,y]=meshgrid(u,v); z=sin(x-y)./abs(x)+abs(y); surf(x, ...