首先在写之前，明确一下什么是框架。所谓框架，就是说已经架构好了基础的模型，只需要大家去更改模型中的细节就好。也就是说，在bootstrap中，已经封装好了我们所需要的一些外观及功能（响应式），只需要我们去对其外观做出需要的更改即可（如backgroundColor，font等）。
其次，何为响应式。响应式就是根据使用终端的屏幕尺寸，来更改内容的样式。假象一下，1920*1080的尺寸，要如何放入小小的手机屏幕呢。那必然会出现一个长到吐的滚动条。这对于用户体验的破坏可想而知。那么，这就极其需要响应式的存在，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
1.安装及使用方法
bootstrap上百度搜索一下，进入bootstrap中文官网，然后直接下载，导入文件夹即可（建议把图标库也导入）
2.重点内容
如上所述，bootstrap是已经写好的css，js代码，是一种可以直接拿来用的框架。他其中的功能非常多，他的重点不在于理解，而在于多用多记，熟能生巧。这里，我列出bootstrap中几个我常用且比较重要的工具和组件。
版心（container）
别问我版心是什么。。如果这么问建议还是从css基础布局再学一下。bootstrap中提供了版心的布局，并在4.4中新增响应性，这里粘贴一下官网的分类：
栅格系统（Grid system）
栅格系统，先说一下这个东西应该是bootstrap中最重要的东西。那什么是栅格系统，如上文所述，一个宽度为1200px的容器，必然无法直接显示在手机屏幕上，那么这就需要在可视域内，将内容收缩。比如原本6列的内容，在缩小屏幕以后，显示为3列；再缩小，显示为一列。
具体代码实现要涉及媒体查询，关于这个我也有写到别的文章中，此处不再赘述。这里我们只要知道，栅格系统要如何使用。
so easy！直接写在版心容器里添加一个元素，类名设为"row"，然后再其中的子元素上设置".col-*"类名。
.col-* 类名，根据所需不同，后面的类名也不同，这里再次召唤bootstrap中已经为我们写好的说明，应该已经非常详细了：
这里再附上我的测试代码，如果还不懂建议直接复制粘贴自己去试一下：
<div class="container">
<!-- 行容器 -->
<div class="row">
<!-- 列容器 -->
<div class="col-md-3 col-sm-6 col-6">1</div>
<div class="col-md-3 col-sm-6 col-6">2</div>
<div class="col-md-3 col-sm-6 col-6">3</div>
<div class="col-md-3 col-sm-6 col-6">4</div>
</div>
</div>
<!--
中等屏幕以上 1行4列的展示(12/4=3)
小屏幕1行2列展示 (12/2 = 6)
特小屏幕1行2列展示 (12/2 = 6)
列容器的数字相加等于12，超出12就会换行显示
-->
图片样式
本来不想写关于图片的，因为在下经常使用backgroundImage来设置图片，不过之前遇到了重叠的一个问题。。所以说<img>还是需要的，这里写一下关于图片的响应式
响应式图片
<imgsrc="..."class="img-fluid"alt="...">
图片外框（缩略图常用）
<imgsrc="..."class="img-thumbnail"alt="...">
图片对齐
<imgsrc="..."class="rounded float-left"alt="..."><imgsrc="..."class="rounded float-right"alt="...">
图片居中
<imgsrc="..."class="rounded mx-auto d-block"alt="..."> 行列居中
<divclass="text-center"><imgsrc="..."class="rounded"alt="..."></div> 行居中
