对于前端的开发过程中，在程序员眼中，写代码不算痛苦，最痛苦的是 “取名字”，什么class名、id名之类的等等。而bootstrap解决了这个问题，你不需要绞尽脑汁去取名字写样式，你需要去记忆这些现成的类名。然后把它封装好的样式文件引入，添加class名到你的项目中即可；它是一个响应式布局的框架，所有样式都是封装好的，你只需要进行引用就好了。
下面我们就来看看它的强大之处：
bootstrap的强大之处在于它的 栅格系统，但是说到底我们将它作为一个辅助工具使用就好，毕竟我们不能本末倒置。我这里运用了一个需要进行响应式开发的小demo来进行介绍：
bootstrap它提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了很多易于使用的预定义类，只要将它的类名添加到你想要实现效果的地方即可，它实际上跟table布局是一样的，只不过它在样式上会更加的灵活多变，table布局最让人头疼的就是它的样式不易于修改；栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，并且在这个预定义好的col-lg-*，col-md-*等类中它已经给你写好了媒体查询这块，你直接把内容放入创建好的布局中即可；
下面是bootstrap中文官网中关于栅格系统的工作原理：
- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
- 通过“行（row）”在水平方向创建一组“列（column）”。
- 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
- 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
- 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
- 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
- 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
- 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
- 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
这是它的参数：
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
实例：
首先是看看项目需求：
将下面的这个网页用bootstrap框架做出响应式效果，下面这个是屏幕分辨率为PC端（大屏）、iPad端（中屏）、手机端（小屏）时的状态；
大屏时的初始状态：
要实现上图中的效果我们就需要用到它的栅格系统这一块了；我这里在原图的基础上画了一下它的结构布局分析：
在整个红色区域包裹的部分就是栅格系统来进行布局的效果展示；
在这个分析图中我们可以看到，红色盒子中包含了4个整块的黄色盒子，每一个盒子就是一个div，在每一行的div上添加一个.row的类就可以让其作为一块单独的行，并且款度就是外层盒子.container宽，然后我们再在每一行里面去按需求分出若干等份的列（column）；每一列的占比是多少就按12等份来计算，每一行中的列数占比中和不能超过12，否则就另起一行。就如上图中最底部的这一行，它本身是只有一行，但是因为分出了6列，并且每列占比为4，所以它就成了两行显示，并且在大屏时我们所使用的列（column）是为.col-md-*；
注意：因为栅格系统的使用需要搭配 .container定宽容器来使用，它所有的.row（行）都是包裹在整个.container定宽容器下，如：
<div class=".container">
<div class="row"> //一行一列布局，每列占比为12
<di class="col-md-12"></div> //单独一列
</div>
<div class="row"> //一行两列布局，每列占比为6
<di class="col-md-6"></div> //第一列
<di class="col-md-6"></div> //第二列
</div>
<div class="row"> //一行三列布局，每列占比为4
<di class="col-md-4"></div> //第一列
<di class="col-md-4"></div> //第二列
<di class="col-md-4"></div> //第三列
</div>
//以此类推，需要生成多少列，就分别计算每一列的占比，然后在“col-md-”跟数值即可
</div>
接下来如何去实现让它在中屏时显示的效果有所改变，就需要在原代码的基础上去再给它添加在中屏时应该显示的类名：.col-sm-*；同样的道理，以此类推，小屏时的样式类名就为：.col-xs-*；最后的效果图如下：
中屏时的状态：
小屏时的状态：
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Worktile</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="dist/css/index.css"/>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" id="navbg">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" id="logo"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">产品</a></li>
<li><a href="#">价格</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">服务</a></li>
<li><button class="btn btn-info">注册</button></li>
<li><button class="btn btn-info">登录</button></li>
</ul>
</div>
</div>
</nav>
<div class="context_top">
<div class="container">
<div class="row font_center" id="top">
<div class="col-md-6 col-sm-12 col-xs-12">
<img src="img/index-banner-img.png" width="100%"/>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 good">
<h1>更好的企业协作平台</h1>
<p>专注于提升企业办公和管理效率，节约企业管理成本，进而提升企业核心竞争力</p>
<div class="col-md-8 col-sm-8 col-xs-8">
<input type="text" class="form-control" placeholder="请输入您的手机号"/>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<button class="btn zhuce">免费注册</button>
</div>
</div>
</div>
<div class="row font_center">
<div class="col-md-12">
<h2>一个平台满足企业协作办公需求</h2>
<p>包括哪些业务</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="img/index-platform-img.png" width="100%"/>
</div>
</div>
<div class="row fun">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-2">
<img src="img/index-platform-item-msg.png"/>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4>即时沟通</h4>
<p>专为工作场景打造的企业即时沟通工具，成员之间保持实时联系，随时协调工作</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-2">
<img src="img/index-platform-item-project.png"/>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4>项目管理</h4>
<p>丰富的业务场景模板，敏捷开发，缺陷管理等，直观有效的管理项目进度与质量</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-2">
<img src="img/index-platform-item-oa.png"/>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4>办公管理</h4>
<p>提供简报、公告、门户、审批应用、办公事务可以随时跟踪，进度实时掌控</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-2">
<img src="img/index-platform-item-customer.png"/>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4>客户管理</h4>
<p>灵活有效的客户、联系人、合同管理、实现全过程客户管理</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-2">
<img src="img/index-platform-item-hr.png"/>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4>人事管理</h4>
<p>从目标管理OKR到考勤、考核管理，一站式解决人事管理的痛点</p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-2">
<img src="img/index-platform-item-dashboard.png"/>
</div>
<div class="col-md-9 col-sm-9 col-xs-10">
<h4>管理后台</h4>
<p>强大的企业管理后台，帮助企业管理员在企业内部推广落地协作平台</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
#logo {
display: inline-block;
background-image: url(../../img/logo.png);
background-repeat: no-repeat;
background-size: contain;
width: 200px;
height: 40px;
margin-top: 12px;
}
body{
min-width: 400px;
}
#navbg {
background-color: #fff;
}
.newactive {
background-color: #0081D5;
}
.navbar-default .navbar-nav > li > a{
text-align: center;
}
.nav li{
text-align: center;
margin: 0px 5px;
}
.navbar-right{
margin-top: 5px;
}
.nav .btn{
background-color: #22D7BB;
height: 35px;
width: 100px;
margin: 6px 0px 6px 6px;
border: none;
outline: none;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #22D7BB;
}
.navbar-default .navbar-toggle:hover {
background-color: #22D7BB;
}
.navbar-default .navbar-toggle:hover .icon-bar{
background-color: #fff;
}
.font_center{
padding: 70px 0px;
vertical-align: middle;
box-sizing: border-box;
text-align: center;
}
#top{
padding-top: 150px;
}
.good{
padding: 80px 20px;
vertical-align: middle;
}
.good h1{
font-size: 50px;
color: #485778;
}
.good p{
margin: 40px 0px 50px 0px;
color: #A0A4AD;
}
.tel{
padding-left: 15px;
width: 300px !important;
outline: none;
box-shadow: inset 0 0 1px #ccc;
border: 1px solid #ccc;
border-radius: 5px;
height: 50px;
}
.zhuce{
width: 140px;
height: 50px;
color: #fff;
background-color: #22D7BB;
}
.row h2{
color: #333;
font-size: 40px;
margin-bottom: 20px;
}
.row p{
color: #A0A4AD;
}
.fun{
padding-top: 100px;
box-sizing: border-box;
}
.fun .col-md-4{
margin-bottom: 80px;
}
.fun img{
margin-left: 10px;
margin-top: 25px;
width: 60px;
}
.fun h4{
margin-bottom: 20px;
}
.context_top{
width: 100%;
background-color: #fff;
}
.context_mid{
width: 100%;
background-color: #F8F9FD;
}
.img_center{
text-align: center;
}
.context_mid img{
width: 400px;
}
.context_mid .row:not(.font_center){
margin-bottom: 100px;
}
.col_right{
padding-left: 100px;
padding-top: 80px;
}
.col_right h3{
font-size: 30px;
margin-bottom: 50px;
}
.col_right ul li{
color: #9A9B9B;
}
.enter_sel{
width: 350px;
height: 410px;
margin:10px auto 0px;
background-color: #F8F9FD;
box-sizing: border-box;
}
.enter_sel img {
width: 350px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.enter_sel h4,.enter_sel p{
padding:20px 40px 0px 40px;
}
.reg{
margin-top: 100px;
background-color: #F8F9FD;
}
.reg .row>div{
padding: 0px 50px;
}
.row input{
height: 50px;
}
.row button{
margin-left: -50px;
}
li a{
color: #9A9B9B;
}
li{
margin-bottom: 10px;
}
footer{
padding: 100px 0px;
}
footer h5{
font-size: 16px;
}
来源：CSDN
作者：香蕉芭辣
链接：https://blog.csdn.net/weixin_44049725/article/details/103963917