BootStrap知识概括

BootStrap简介

BootStrap简介：

• Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
• Bootstrap提供了优雅的HTML和CSS规范，Bootstrap3及以前版本都是基于Less编写的。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。
• BootStrap中文网
• BootStrap英文网
• 注意：在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版。在Bootstrap4中，Bootstrap团队做了大量改进，包括迁移到 Sass、重写所有的 JavaScript 插件、全新自定义选项、不再支持IE8等，

容器

CSS的width:100%和width:auto区别：

• width:100% 并不包含margin-left margin-right的属性值，直接取其父容器的宽度加上含margin-left/margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。（细心观察）就会发现加了margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。
• width:auto包含margin-left/margin-right的属性值。其值包含margin-left/margin-right的值。width:auto总是占据整行！！！这其中margin的值已经包含其中了（也就是一整行）如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
• 在IE6下显示不正常，但是在IE8和IE9下显示正常，可能是IE8和IE9对width:100%的解析与IE6不同所致，但是两者对width:auto的解析是一致的。

流体布局容器：

• 容器的width为100%，两边加了15px的padding。
• 流体容器会随屏幕大小随时适应相应。
• 注意: 占用页面的100宽度

<div class="container-fluid"></div>	

固定布局容器：

• 容器的width为auto，两侧有15px padding。且会随设备分辨率的不同而生产变化
• 固定容器会根据屏幕大小范围，呈现出固定的样式大小。
• 注意: 两边留有一定宽度 padding
• 父元素的width：子元素的width+padding+border+margin。

阀值	width
≥1200px（lg 大屏PC）	1140px + 30px(槽宽)
≥992px && ≤1200px（md 小屏PC）	940px + 30px(槽宽)
≥768px && ≤992px（sm 平板）	720px + 30px(槽宽)
≥768px（xs 移动手机）	auto