Bootstrap

1.Bootstrap简介
Bootstrap来自twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的，它简洁灵活，使得web开发更加快捷。

中文官网：https://www.bootcss.com/
官网：https://getbootstrap.com/
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范开发进行。

(1)优点
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更简单，提高了开发的效率
(2)版本

1. ：停止维护，兼容性好，代码不够简洁，功能不够完善
2. ：目前使用最多，稳定，但是放弃了IE6-IE7。对于IE8支持但界面效果不好，偏向用于开发响应式布局，移动设备优先的web项目。
3. ：最新版本，目前还不是很流行

2.Bootstrap使用
在现阶段还没有接触js，暂时只考虑使用它的样式库。

控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

Bootstrap使用分为四步：1.创建文件夹结构。2.创建html骨架结构。3.引入相关样式文件。4.书写内容。

3.布局容器
Bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container。

它提供了两个作此用处的类。

(1)container类
响应式布局的容器 固定的宽度
大屏（>=1200px）宽度定为1170px
中屏（>=992px）宽度定为970px
大屏（>=768px）宽度定为750px
超小屏（100%）
(2)container-fluid类
流式布局容器，百分比宽度
占据全部视口（viewport）的容器
适合于单独做移动端开发
二、Bootstrap栅格系统
1.栅格系统简介
栅格系统英文为“grid systems”，也有人翻译为“网络系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12例。

Bootstrap里面container宽度是固定的，但是在不同屏幕下，container的宽度不同，再把container划分为12等份。

2.栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，页面内容就可以放入这些创建好的布局中。

————————————————
版权声明：本文为CSDN博主「王祎0825」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44757223/article/details/124112523