Bootstrap(2) 排版样式
1、页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。
<p>Bootstrap 框架</p>
<!-- 创建包含段落突出的文本 -->
<p class="lead">Bootstrap 框架</p>
<!-- 添加标记,<mark>元素或.mark 类 -->
<p>Bootstrap<mark>框架</mark></p>
2、标题
<!-- 从 h1 到 h6 36px 30px 24px 18px 14px 12px-->
<h1>Bootstrap 框架</h1>
<h2>Bootstrap 框架</h2>
<h3>Bootstrap 框架</h3>
<h4>Bootstrap 框架</h4>
<h5>Bootstrap 框架</h5>
<h6>Bootstrap 框架</h6>
<!-- 内联元素使用标题字体 -->
<span class="h1">Bootstrap</span>
<!-- 在标题元素内插入 small 元素 -->
<h1>
Bootstrap 框架 <small>Bootstrap 小标题</small>
</h1>
<h2>
Bootstrap 框架 <small>Bootstrap 小标题</small>
</h2>
<h3>
Bootstrap 框架 <small>Bootstrap 小标题</small>
</h3>
<h4>
Bootstrap 框架 <small>Bootstrap 小标题</small>
</h4>
<h5>
Bootstrap 框架 <small>Bootstrap 小标题</small>
</h5>
<h6>
Bootstrap 框架 <small>Bootstrap 小标题</small>
</h6>
3、各种下划线
<!-- 各种加线条的文本 -->
<del> 删除的文本</del></br>
<s>无用的文本</s></br>
<ins>插入的文本</ins></br>
<u>效果同上,下划线文本</u>
4、各种强调的文本
<!-- 各种强调的文本 -->
<small>标准字号的 85%</small>
<strong>加粗 700</strong>
<em>倾斜</em>
5、设置文本对齐
<!-- 设置文本对齐 -->
<p class="text-left">居左</p>
<p class="text-center">居中</p>
<p class="text-right">居右</p>
<p class="text-nowrap">不换行不换行不换行不换行不换行不换行不换行不换行不不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行不换行</p>
6、设置英文大小写
<!-- 设置英文文本大小写 -->
<p class="text-lowercase">LOWERCASE 小写</p>
<p class="text-uppercase">uppercase大写</p>
<p class="text-capitalize">capitalize首字母大写</p>
7、引用文本
<!-- 默认样式引用,增加了做边线,设定了字体大小和内外边距 -->
<blockquote>默认</blockquote>
<blockquote class="blockquote-reverse ">反向</blockquote>
<blockquote class="pull-left">左边</blockquote>
<blockquote class="pull-right">右边</blockquote>
8、列表排版
<!-- 移出默认样式 -->
<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
<!-- 设置成内联 -->
<ul class="list-inline">
<li>设置成内联</li>
<li>设置成内联</li>
<li>设置成内联</li>
<li>设置成内联</li>
<li>设置成内联</li>
</ul>
<!--水平排列描述列表 -->
<dl class="dl-horizontal">
<dt>水平排列描述列表</dt>
<dd>水平排列描述列表水平排列描述列表水平排列描述列表水平排列描述列表</dd>
</dl>
9、代码
<code><内联代码></code></br>
用户输入 <kbd>ctrl + ,</kbd></br>
<pre class="pre-scrollable"><p>代码块代码块代码块代码块代码块代码块代码块...</p></pre>
Bootstrap(2) 排版样式的更多相关文章
- Bootstrap 一. 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )
第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...
- bootstrap之排版样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素
Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...
- 第二百三十二节,Bootstrap排版样式
Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一.页面排版 Boot ...
- bootstrap课程3 bootstrap中常用的排版样式有哪些
bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...
- [bootstrap] 基本css样式和组件
一.基本css样式 01.全局设置 全局 font-size 是 14px,line-height 是 20px. 这些样式应用到了 <body> 和所有的段落上. 另外,对 <p& ...
- bootstrap之css样式
一 bootstrap的介绍 Bootstrap是将html,css和js的代码打包好了,只管我们拿来调用.是基于jquery开发的. 使用BootCDN提供的免费CDN加速服务,同时支持http和h ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- bootstrap之排版类
bootstrap之排版类
随机推荐
- 尚硅谷redis学习8-事务
是什么? 能干嘛? 常用命令 案例说明 1.正常执行 2.放弃事务 3.全部放弃(全体连坐) 4.只抛弃错误(冤头债主) 5.watch监控 悲观锁 悲观锁(Pessimistic Lock), 顾名 ...
- Delphi XE8 中TIdTCPClient的WriteLn编码变化!
//XE2中正常的代码: IdTCPClient1.IOHandler.WriteLn(sendData,TEncoding.ANSI); //XE8中不行了,解决方法: //,引入“IdGlobal ...
- 编译安装php5 解决编译安装的php加载不了gd
1. 编译安装php需要的模块: yum install libxml2-devel libxml2 curl curl-devel libpng-devel libpng openssl o ...
- 在升级过内核的机器上安装docker遇到的一个错误
出现了以下错误: [root@osd2 ~]# service docker start Starting cgconfig service: Error: cannot mount memory t ...
- Unit 1 overview of IT Industry
Unit 1 overview of IT IndustryConcept LearningIT Industry OutlookThe term technology commonly refers ...
- Uni2D入门
转载 http://blog.csdn.net/kakashi8841/article/details/17558059 开始 Uni2D增加了一些新的便利的特性给Unity,它们用于推动你2D工作流 ...
- (Unity4.7)assetbundle 坑爹总结
使用版本Unity4.7 一.关于依赖打包 1.当一个被打包的资源A引用了其他的资源B,并且没有被打成一个包时,要选用[BuildAssetBundleOptions.CollectDependenc ...
- 吴裕雄 oracle 管理数据表对象
- DataTable--数据生成datatable
将数据库查出的数据生成datatable 我们一般将数据库查询出的数据用实体接受在泛型集合,然后遍历集合,以将数据绑定到前台展示,在很多情况下,泛型集合不如datatable更方便将数据操作,这里简单 ...
- rectangle,boundingRect和Rect
rectangle( rook_image, Point( , *w/8.0 ), Point( w, w), Scalar( , , ), , ); 矩形将被画到图像 rook_image 上 矩形 ...