Bootstrap

Bootstrap

概念：

Bootstrap是Twitter退出的一个用前端开发发的开源框架，是一个做网页的框架（目前最流行的web前端框架），就是说你只需要写HTML标签就可以调用它的类，就可以快速的做一个高大上的网页（非常漂亮的样式网页）。

使用：

bootstrap对css样式进行了简单的封装，通过class呈现给开发者使用，是开发更为便捷，但是仍需要了解class如何被实现。

容器：

容器用来包裹其他元素。有两种容器。

• . container : 对于不同的设备屏宽又相应的固定宽度，并且居中容器。
• . container - fluid : 占据所有屏宽（width：100%）
• 可以出现多个容器，但容器不应该被其他元素包含。

网格布局：

bootstrap4的网格布局是基于flexbox的，将宽度分为12等份（列），一列中元素可以分为不同等份（列），但加起来共12份（列）。

每一行的容器使用 .row 标识，行容器中元素使用如下class标识在不同环境下占据空间比例：

• . col [ - * ] ：样式（比例）引用与笑设备（如手机）机器大设备。

• . col - sm [ - * ] : 样式（比例）应用于屏宽 >=567px的设备（如 平板），否则，每个元素占据整行（width：100%）

• . col - md [ - * ] : 样式（比例）应用于屏宽 >= 768px的设备（如 笔记本），否则，每个元素占据整行（width：100%）

• . col - lg [ - * ] : 样式（比例）应用于屏宽 >= 992px的设备，否则，每个元素占据整行（width ： 100%）

• . col - xl [ - * ] : 样式（比例）应用于屏宽 >=1200px的设备，否则，每个元素占据整行（width ：100%）

  其中 * 表示元素的比例，不指定比例表示所有元素等宽。

<div class="row">
	<div class="col-sm-4 col-10">column 1</div>
	<div class="col-sm-8 col-2">column 2</div>
</div>

在平板设备上，.col - * 和 . col - sm - * 样式都作用，但只有 .col - sm - * 生效，因为bootstrap.css中 . col - sm - * 的媒体查询非匹配。注意，于class中的书写顺序无关。

注意：下面说到响应时，他的样式规则于玩个够布局差不多！！！

文字排版：

bootstrap使用新的样式覆盖了元素的默认全样式，并且提供了对应于文本样式的class。只是简单的css样式对应关系而已

• test - center 或 test - [ sm | md | lg | xl ] -center : 剧中文字，同时也是响应式的。

颜色：

前景颜色的class以text为前缀：

表格：

首先 form 元素使用 class . table，其他关于表格外观的class置于 . table 之后，如：

.table-striped:The .table-striped class adds zebra-stripes to a table
.table-bordered：The .table-bordered class adds borders on all sides of the table and cells:
.table-hover：The .table-hover class adds a hover effect (grey background color) on table rows
.table-dark：The .table-dark class adds a black background to the table
.table-hover：The .table-hover class adds a hover effect (grey background color) on table rows
.table-sm：The .table-sm class makes the table smaller by cutting cell padding in half

如果表格列太长，导致页面过宽呢？可以使用.table-responsive，但是我觉得太丑了，建议使用在form元素上css样式overflow-x: auto;

Utilities：

bootstrap包含很多无需css代码而style元素样式的class：

.border或.border-[ top | right | bottom | left ]：添加对应边框，class后面加-0表示删除对应边框
边框颜色：class以border开始，如border-primary、border-sesondary…
.rounded：添加圆角
rounded-circle：即border-radius:50%!important;

…