1、bootstrap 排版
全局样式style.css:
1、移除body的margin声明
2、设置body的背景色为白色
3、为排版设置了基本的字体、字号和行高
4、设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式
标题 h1-h6
HTML 中的所有标题标签,
到 均可使用。另外,还提供了 .h1 到 .h6 类选择器,为的是给内联(inline)属性的文本赋予标题的样式。
1、重新设置了margin-top和margin-bottom的值
2、h1~h3重置后的值都是20px;h4~h6重置后的值都是10px
3、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体
4、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px
在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。
<h2>Bootstrap heading <small>Secondary Text</small></h2>
Bootstrap heading <small style="color:gray;"> Secondary text</small>
p 标签
(段落)元素还被设置底部外边距(margin)10px。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
通过添加 .lead 类可以让段落突出显示。
<pre style="font-size:21px;font-family:宋体">
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</pre>
强调内容的标签
<lead>一般配合段落标签使用
强调相关的类
text-muted: 提示,使用浅灰色(#999)text-primary:主要,使用蓝色(#428bca)text-success:成功,使用浅绿色(#3c763d)text-info: 通知信息,使用浅蓝色(#31708f)text-warning:警告,使用黄色(#8a6d3b)text-danger: 危险,使用褐色(#a94442)
文本对齐风格 text-left: 左对齐
text-center: 居中对齐
text-right: 右对齐
text-justify:两端对齐
列表
1、ul 、 ol <span style="color:red;">去序列</span>:
class=“list-unstyled“
2、ul 、 ol <span style="color:red;">水平排列</span>(把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示)
class=“list-inline”
3、dl水平列表(屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果)
class=“dl-horizontal”
图片
使用方法非常简单,只需要在
查看更多关于总结bootstrap前端框架的使用实例的详细内容...