通用技能:

# 文档类型



    

说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性.

# 移动先行

说明: 由于BootStrap以移动端优先,所以可通过一些viewport特性来设置移动端行为,如上可实现内容宽度与设备宽度1:1,最大缩放为屏幕宽度,且禁用用户缩放功能,防止用户触发缩放而导致出现滚动条

# 响应图片

说明: 为了实现容器内图片大小缩放自适应,BootStrap3中只需为图片加img-responsive类即可,其实实现方式非常简单只要设置了max-width: 100%;和height: auto;即可

# 居中容器

说明: 一个页面或元素要居中显示,可以在外部容器上简单应用.container类即可,它其实由一个max-width属性来限制删栏系统的最大宽度,默认容器左右内边距15px,当然都可以后期重载覆盖这些值


排版技能:

# 标题相关

有上下边距的h1 小号有上下边距的h1


有上下边距的h1 小号有上下边距的h2


有上下边距的h1 小号有上下边距的h3


有上下边距的h1 小号有上下边距的h4


有上下边距的h1 小号有上下边距的h5


有上下边距的h1 小号有上下边距的h6

无上下边距的h1 小号无上下边距的h1 

无上下边距的h1 小号无上下边距的h1 

无上下边距的h1 小号无上下边距的h1 

无上下边距的h1 小号无上下边距的h1 

无上下边距的h1 小号无上下边距的h1 

无上下边距的h1 小号无上下边距的h1 

说明: BootStrap重定义h1~h6可直接使用,也可以作为非标题元素的类,但前者默认有上下外边距,而后者没有,常常配合使用的是在内部使用,以便显示稍微小一点儿的字体,且字体颜色被设置为灰色(#999999)

# 页面主题

下外边距为10px的p

突出显示下外边距为10px的p

说明: BootStrap默认全局设置字体大小14px,行高20px,p元素段落会有一个额外的下外边距,大小为行间距的一半,10px,如果想让一个段落突出显示,可加lead类,会增大字体大小,粗细,行间距,和下外边距

# 强调文本

字体加粗效果 

字体倾斜效果 

字体引用效果 

小号字体效果 

文本左对齐效果