bootstrap是我最喜欢的前端框架，没有之一，当前的最新版本是bootstrap4.4.1，和之前的3.X版本相比较有较大的变化，不过都是属于各种标签的分离，方法还是一样的，在网上各种教程虽多，但是对于入门还不是不够，很多入门教程讲得云里雾里，看不懂到底在说些什么。我觉得使用具体的实例来结合相关的标签使用才能真正的加深理解。
bootstrap4.4.1bootstrap是移动优先的前端开发框架，本身是为了更好地适应各种移动浏览器而设计的，所以前端代码必须使用HTML5和css3来写，从bootstrap4.0版本开始引入了超小屏幕小于px宽度的网格。bootstrap的优势在于其对各种浏览器兼容性已经做好了测试，除了那些低版本的浏览器不支持外，完全不用担心浏览器的兼容问题。
在使用bootstrap4x版本时需要记住其对个浏览版本和系统的支持情况：
Chrome=45Firefox=38Edge=12InternetExplorer=10iOS=9Safari=9Android=4.4Opera=30
01使用bootstrap创建一个页面
首先去bootstrap官方网站上下载源码，也可以使用相关的CND来创建，具体方法是：下载bootstrap，找到dist文件夹里面的css和JS文件，将带有min的拷贝到你项目中对应的css和JS文件夹里面。在前端页面head标签里面引入css文件：
linkrel=stylesheethref=/css/bootstrap.min.css在页面/body标签的前面添加引入JS代码，注意jQuery、popper、和bootstrap这三个js的顺序不能变，必须首先引入jQuery，其次是popper，最后才是bootstrap，因为他们之间有相互依赖的关系，改变了顺序会导致代码失效：
scriptsrc=/js/jquery-3.4.1.slim.min.js/scriptscriptsrc=/js/popper.min.js/scriptscriptsrc=/js/bootstrap.min.js/script
bootstrap的js文件载入顺序带有min的文件是经过压缩后的文件，体积会比较小，加载速度更快，比如bootstrap.min.js就是经过压缩后的，而不带min的比如bootstrap.js就是没有压缩处理过，适合于需要修改其中的代码使用，差别就是压缩与否的关系。
修改head标签使页面实现自适应，把前端代码修改为HTML5，并且添加编码识别和自适应meta标签，代码如下：
!doctypehtmlhtmlheadmetacharset=utf-8metaname=viewportcontent=width=device-width,initial-scale=1,shrink-to-fit=no，这一句是实现响应式的重要标志。
完整bootstrap代码将上面的代码保存为test.html文件，使用浏览器打开这个文件，可以看到里面没有什么内容，但是bootstrap的整个文件已经成功全部载入，下面接着编写相关代码即可。
02网格系统grid的使用
bootstrap最重要的核心功能就是网格系统，通过sm/md/lg/xl来对不同宽度的屏幕进行区分，最外层容器使用container标签进行约束。记住网格默认一共是12列，下图所示，每一列占用1个网格。
bootstrap网格为了使不同宽度的屏幕都能自适应铺满这个屏幕，所以有sm/md/lg/xl这个标签，在实战中几乎经常用到。下图所示，这个网格系统光是这个子说几列是很难理解，记住总的12格，然后下面通过实例来说明。
在网页的body标签里面写如下代码：
divclass=container divclass=row/div /div由于container标签默认左右会添加15px空白，使用row来清楚掉，上面就是标准的写法，然后再进行网格化，实现响应式布局。继续在row标签内添加divclass=col/div，col代表自动的意思，对所有的屏幕都是%宽度，在bootstrap4.2以上版本中col=col-12。
单纯地将网格实在太难理解，而且有些抽象，我这里准备了一个页面上左边显示文章内容，右边显示相关推荐内容的实例，这样子会很容理解，直接上代码：
网格系统文章详情页左右分栏上面第13行和19行的div是并列的关系，col-12指不论在什么样宽度的屏幕上都显示为12格填充满整个屏幕，col-lg-8指当屏幕宽度大于等于px时，显示8格，lg代表的是大于等于px的屏幕，记不住的话可以查看官方帮助文档，第19行的div中col-lg-4代表在大于等于px的屏幕上显示4格。将代码保存，用谷歌浏览器打开，在页面的空白处点鼠标右键---检查，会弹出如下图所示的会话框，点那个“手机”图标，就可以了看到在右侧会有一个双竖线的地方，鼠标放上去左右移动改变屏幕的大小，此时如果屏幕宽度小于px，你会发现右边的标题会自动下移，并且是%宽度。
响应式布局实战案例使用网格需要注意sm/md/lg/xl这几个分别代表的不同宽度是多少，把12个网格进行不同的拆分就可以了，只要总的加起来是12格就没有问题。网格的使用非常简单，但是有些抽象难以理解，你可以把上面的代码拷贝本地实战。
理解了网格的使用其他的就容易多了，bootstrap提供了个性化的应用标签和一些常用的组件，比如轮播图代码、当行代码都是开源直接复制过来，调用你自己网站的数据就能实现。而个性化的标签则有这些。
03使用个性化标签代码
1、颜色类：为某个元素或文字添加颜色，背景颜色，在文档utilities---colors里面可以找到适合于的的颜色，比如代码：
divclass=bg-lighttext-success背景灰色，文字绿色/div直接用相关的颜色代码，非常方便。
2、边框类：使用border-*，星号代表top、right、left、bottom值，即可快速为元素添加边框；如果需要为边框添加颜色，使用border-*的方式，颜色代码同样在文档中utilities---border里面可以找到，因为记不住，所以不用记，需要的时候去复制就好了；还有Border-radius（为元素添加圆角效果）也在这里，使用rounded即可实现。
3、内外边距：使用margin和padding的时候可以根据需要，比如my-2代表margin上下分别设置为0.5rem，mr-1代表marginright设置为0.5rem，px代表paddingleft，pb代表paddingbottom。
这些为我名胜区很多的代码量，直接使用即可，在学习bootstrap4.4以上版本时，难点是网格系统。学习的过程中先不要忙着写代码，先去把帮助文档从头到尾看一遍，英文的看不懂也没关系，只要能看懂一部分代码即可，有一个大概的印象了，再写代码的时候边写边熟练，这样学起来很快。