03-全局CSS样式

全局CSS样式

页面排版

除啦对所有HTML标记统一了风格样式外（mark、del、strong等），还提供了类，用来满足想要与HTML标记一样的样式，但是又不想使用HTML标记的需求，也就是.h1~.h6的作用，但是这些类并不会改变内敛元素为块儿元素。还有一些元素配合使用效果更佳

• 标题标签中使用small标签可用来标记副标题
• blockquote标签中使用footer标签可用来标记引用来源，Bootstrap4需要.blockquote和.blockquote-footer类的支持
• abbr标签中的title属性可以可增加缩略语的解释信息

另外还有一些增强性的标记类

类名	描述
.lead	段落突出显示
.list-unstyled	去除列表样式
.list-inline和.list-inline-item	行内样式列表，同时去除列表样式

图片

类名	描述
Bootstrap3：.img-responsive Bootstrap4：.img-fluid	响应式图片
.img-thumbnail	图片边框

表格

类名	描述
.table	添加表格样式，作用于table标签
.table-responsive	响应式表格，列数过多表格会出现横向滚动条而不是整个页面，需要在.table类的基础上加
.table-striped	表格隔行变色，需要在.table类的基础上加
.table-bordered	每个单元格增加边框，需要在.table类的基础上加
.table-hover	表格行增加鼠标悬停效果，需要在.table类的基础上加
.table-dark	黑暗风格表格样式，作用于table标签，仅Bootstrap4支持
.thead-dark	黑暗风格表头，作用于thead标签，仅Bootstrap4支持
.thead-light	光明风格表头，作用于thead标签，仅Bootstrap4支持

表单

表单控件包含一组标签，这些标签可以使用栅格系统进行布局，Bootstrap3和Bootstrap4差异较大，需要参考官方文档，标准的表单控件应该如下：由.form-group包裹，具有label标签，控件使用.form-control标记

<div class="form-group">
  <label for="id">输入框</label>
  <input type="input" class="form-control" id="id">
</div>

按钮使用.btn，而且连接也可以转化为按钮，添加.btn-block可将按钮变为块元素