Bootstrap是我最喜欢的前端框架，一个都没有。最新版本是bootstrap4.4.1，和之前的3.x版本有很大的不同，不过属于各种标签的分离，方法还是一样的。虽然网上有很多教程，但是对于入门来说还是不够的。很多入门教程都很混乱，我听不懂他们在说什么。我觉得用具体的例子结合相关的标签确实能加深我们的理解。
bootstrap4.4.1Bootstrap是一个移动优先的前端开发框架，旨在更好地适应各种移动浏览器。所以前端代码一定要用HTML5和css3写。自Bootstrap 4.0版本以来，推出了宽度小于576px的超小屏幕网格。bootstrap的好处是已经测试了各种浏览器的兼容性，除了较低版本不支持的浏览器，不需要担心浏览器的兼容性问题。
使用bootstrap 4x版本时，需要记住它对浏览版本和系统的支持:
chrome > = 45 Firefox > = 38 edge > = 12 internet Explorer > = 10 IOs > = 9 safari > = 9 Android > = 4.4 opera > = 30
01使用bootstrap创建页面
先去bootstrap官网下载源代码，也可以用相关的CND创建。具体方法是:下载bootstrap，找到dist文件夹中的css和JS文件，用min复制到你项目中对应的css和JS文件夹中。将css文件引入首页的head标签:
在页面标签前添加介绍JS代码。请注意，jQuery、popper和bootstrap的顺序不能更改。你必须首先介绍jQuery，然后是popper，最后是bootstrap。因为它们是相互依赖的，所以改变顺序会导致代码失败:
bootstrap的js文件载入顺序带min的文件是压缩文件，文件大小会更小，加载速度会更快。比如bootstrap.min.js是压缩的，没有min的比如bootstrap.js是不压缩的，适合需要修改的代码。区别在于是否压缩。
修改head标签使页面自适应，将前端代码改为HTML5，增加代码标识和自适应meta标签。代码如下:
这句话是实现有求必应的重要标志。
完整bootstrap代码将上面的代码保存为test.html文件，用浏览器打开这个文件，可以看到里面什么都没有，但是bootstrap的整个文件已经加载成功了。然后，编写相关代码。
网格在02网格系统中的应用
bootstrap最重要的核心功能是网格系统。不同宽度的屏幕用sm/md/lg/xl区分，最外面的容器用容器标签约束。记住默认网格是12列，如下图所示，每列占1个网格。
为了让不同宽度的屏幕自适应覆盖这块屏幕，就有了sm/md/lg/xl这个标签，在实战中几乎都会用到。如下图所示，这个网格体系，仅仅说这个子网格中的几列，很难理解。记住12格的总数，然后用下面的例子来说明。
在网页的body标记中编写以下代码:
因为默认情况下容器标签会在左右两边添加15px空白色，所以使用row将其清除。以上是标准写法，然后网格化，实现响应式布局。在行选项卡中继续添加。，col代表自动的意思，对所有的屏幕都是100%宽度，在bootstrap4.2以上版本中col=col-12。单纯理解网格太难了，有点抽象。我在这里准备了一个页面，左边显示文章内容，右边显示相关推荐内容的例子。这将很容易理解，我将直接编写代码:网格系统文章详情页左右分栏上面第13行和第19行中的p是平行关系。col-12表示无论屏幕的宽度是多少，都会显示12个方块来填满整个屏幕。col-lg-8表示当屏幕宽度大于等于992px时，显示8个方块。lg代表大于等于992px的屏幕。如果想不起来，可以查看官方帮助文档。第19行col-lg-4代表大于等于992px的屏幕保存代码，用Google Chrome打开，在page-check的空白色部分点击鼠标右键，会弹出如下图所示的对话框。点击“手机”图标，可以看到右侧会出现一个双竖条。上下左右移动鼠标来改变屏幕大小。这时，如果屏幕宽度小于992px，你会发现右边的标题会自动下移，而且是
响应式布局实战案例使用网格时，要注意sm/md/lg/xl的宽度不同。用不同的方法拆分12格就够了，只要总和是12格就没问题。网格的使用很简单，但是有些抽象很难理解，可以复制上面的代码进行局部实战。
理解网格的用法就容易多了。bootstrap提供了个性化的应用标签和一些常用的组件，比如轮播代码和当前行代码，这些都是直接从开源复制过来的，通过调用自己网站的数据就可以实现。而个性化标签有这些。
03使用个性化标签代码
1.颜色类:为元素或文本添加颜色和背景色。你可以在文档工具-颜色中找到合适的颜色，如代码:
灰色背景，绿色文本
直接用相关的颜色代码，非常方便。2.Border类:使用border-*，星号代表上、右、左、下值，可以快速给元素添加边框；如果需要给边框添加颜色，使用border-*。颜色代码也可以在文档工具-边框中找到。因为你记不住，所以你不用记。需要的时候复制就行了。这里还有Border-radius，可以用rounded来实现。3.内部和外部边距:可以根据需要使用边距和填充。例如，my-2表示边距设置为0.5rem，mr-1表示右边边距设置为0.5rem，px表示左边填充，pb表示底部填充。
这是我景区的很多代码，可以直接用。学习bootstrap4.4版本4.4以上时，难点是网格系统。在学习的过程中，不要忙着写代码，先把帮助文档从头到尾看一遍。看不懂英文也没关系，只要能看懂一部分代码，就有个大概的印象。当你写代码的时候，熟练地写就能很快学会。
