通用技能:
# 文档类型
1 2 3 4 |
|
说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用Html5的DOCTYPE属性.
# 移动先行
1 2 |
|
说明: 由于BootStrap以移动端优先,所以可通过一些viewport特性来设置移动端行为,如上可实现内容宽度与设备宽度1:1,最大缩放为屏幕宽度,且禁用用户缩放功能,防止用户触发缩放而导致出现滚动条
# 响应图片
1 |
|
说明: 为了实现容器内图片大小缩放自适应,BootStrap3中只需为图片加img-responsive类即可,其实实现方式非常简单只要设置了max-width: 100%;和height: auto;即可
# 居中容器
1 |
|
说明: 一个页面或元素要居中显示,可以在外部容器上简单应用.Container类即可,它其实由一个max-width属性来限制删栏系统的最大宽度,默认容器左右内边距15px,当然都可以后期重载覆盖这些值
排版技能:
# 标题相关
1 2 3 4 5 6 7 8 9 10 11 12 |
|
说明: BootStrap重定义h1~h6可直接使用,也可以作为非标题元素的类,但前者默认有上下外边距,而后者没有,常常配合使用的是在内部使用<small></small>,以便显示稍微小一点儿的字体,且字体颜色被设置为灰色(#999999)
# 页面主题
1 2 |
|
说明: BootStrap默认全局设置字体大小14px,行高20px,p元素段落会有一个额外的下外边距,大小为行间距的一半,10px,如果想让一个段落突出显示,可加lead类,会增大字体大小,粗细,行间距,和下外边距
# 强调文本
1 2 3 4 5 6 7 8 |
|
说明: BootStrap将默认的文本强调元素<small></small> <strong></strong> <em></em> <cite></cite>以及文本对齐都进行了轻量级的实现.
# 缩略语句
1 |
|
说明: BootStrap在abbr元素上实现了缩略词功能,鼠标移动到缩略词上时缩略词下有虚横线且显示声明的title的属性值,光标变帮助,另一种是通过添加initialism类,但是似乎只是字体小一点儿.
# 地址元素
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
说明: BootStrap在address元素上实现了简单通用的样式,设置下外边距20px,行高20px,非常方便的加个样式实现火狐中文网的底部版权样式.
# 引用内容
1 2 3 4 5 6 7 8 9 10 |
|
说明: BootStrap在blockquota元素上实现了引用,可以引用任意HTML内容,但一般推荐使用<p></p>,在内部使用<small></small>文字前面会加-作为注释,常常配合<small></small>和<em></em>和<cite></cite>一起使用,当然还可以配合text-right/pull-right来右对齐,以适应不同的排版方式
# 普通列表
1 2 3 4 5 6 7 8 9 |
|
说明: BootStrap在ul/ol和li元素上做了细微的优化,ul上外边距设为0px,除了最后一个ul,所有的ul下外边距默认设置为10px.
# 有序列表
1 2 3 4 |
|
# 去点列表
1 2 3 4 5 6 7 8 9 |
|
说明: BootStrap的list-unstyled类只会去除当前被选择的元素列表项前面的圆点,而不会作用于其子元素,其实设置的是ul的padding-left: 0;list-style: none;所以要注意ul的内左边距被设置为0px.
# 内联列表
1 2 3 4 5 6 7 8 9 |
|
说明: BootStrap的list-inline类用于实现内联样式表,也就是将列表项水平显示,常用于菜单,默认设置ul的padding-left: 0;list-stype:none;子li除了第一个设置了padding-left:0;其它的都默认左右各5px,所以很多时候做菜单需要我们自定义覆盖该默认样式.
# 定义列表
1 2 3 4 5 6 |
|
说明: BootStrap对默认的dl定义列表也做了一些轻微的调整,主要是dl设置margin-top: 0;margin-bottom: 20px;对于dd设置margin-left: 0;导致dt和dd内容左对齐,所以常常需要自定义覆盖样式.
# 水平定义
1 2 3 4 5 6 7 8 |
|
说明: BootStrap的dl-horizontal类默认使得dl下的dt和dd列表水平显示,但由于对dt设置width: 160px;text-align:right;对dd设置margin-left: 180px;所以dt和dd并排显示且中间间隔20px,但是dt的内容右对齐导致左边可能出现大片空白区,所以可能需要自定义覆盖样式
# 内联代码
1 |
|
说明: BootStrap对默认的code设置了浅红背景和其内部深红字体
# 输入代码
1 |
|
说明: BootStrap对默认的kbd设置了深黑色背景和内部白颜色字体
# 多行代码
1 2 3 4 5 6 7 8 9 |
|
说明: BootStrap默认对可显示大块代码段,并保证原有格式不变,另外可在pre元素上应用.pre-scollable样式,则可控制该区域最大高度为340像素,并可在y轴方向滚动.
# 基础表格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
说明: BootStrap默认提供表格的基础样式table类,默认table设置margin-bottom:20px;th和td设置padding: 8px;border-top: 1px solid #ddd;使得table下外边距20px,所有的th/td内边距8px且拥有一个1px的上边框,最后对于thead中的th设置border-bottom: 2px solid #ddd;使其有一个2px的粗边框.
# 条纹表格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
说明: BootStrap的table-striped类在table类的基础上利用CSS3的.table-striped > tbody > tr: nth-child(odd) {background-color: #f9f9f9;},常常需要自定义覆盖样式
# 边框表格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
说明: BootStrap的table-bordered类在table类的基础上设置了整体表格和单元格的边框,不再附加圆角效果,简洁许多.
# 高亮表格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
说明: BootStrap的table-hover类在table类的基础上使用css3设置.table-hover > tbody> tr:hover {background-color: #f5f5f5;},常常需要自定义覆盖样式
# 紧凑表格
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
说明: BootStrap的table-condensed类在table类的基础上减少了单元格的默认8px为5px
登录乐搏学院官网http://www.learnbo.com/
或关注我们的官方微博微信,还有更多惊喜哦~