认识Bootstrap

Bootstrap主打的是响应布局；

网址：Bootstrap中文网

操作步骤： 

• 下载：

• 然后可以点击图中的css文件比较/js文件比较，查看下载的文件内容； 

• 下载下来的文件很多， 根据代码需要引入相应的文件即可，其中bootstrap.css和bootstrap.bundle.js是两个最全的模块，可以只导入这两个，但是因为代码全所以加载时长也会长一点比其他的零散的模块；
• 接下来是两个最重要的class名字，要记住：

<div class="container">
  <!-- Content here -->
</div>

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

12栅格：

• 比如说下面这个布局，Bootstrap就有格式给我们套用，是12栅格的体现，我们要做成4部分的话，就让每一部分占3份，这样4个就达到了12份；如果是做成两部分，就让每一部分占6份，这样2个就达到了12份； 

 

12栅格的代码：

• 代码严格按照下面的代码写，class名也是要一样，如果不一样就会出错；下面因为有三个<div class="col">所以是将12分为3份，一个占4份，也就是页面被分为3部分，原理是，这三个 <div class="col">都运用了flex：1；弹性盒平分布局的性质；
• 当然还有一种写法就是：下面第二张图，后面的数字代表这个div标签分几份；

12栅格-响应式布局：

• 在具体的数值范围内，运用什么class属性，（数值范围是画红线的，class属性是画绿线的）

代码：

含义是：在窗口宽度> 1200px时，运用col-xl属性，分为4部分，一部分分3份；在992px<窗口宽度<1200px时，运用col-lg属性，分为3部分，一部分分4份；在768px<窗口宽度<992px时，运用col-md属性，分为2部分，一部分分6份；在窗口宽度<768px时，运用col-sm属性，分为1部分，一部分分12份；

效果：

表单：是关于信息录入的一些样式：