Bootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目，是美国Twitter公司设计师设计的产品。
中文：https://v4.bootcss.com/
英文：https://getbootstrap.com/
Github：https://github.com/twbs/bootstrap
Bootstrap在构建响应式网站是非常快速的，是非常棒的前端组件，目前我们伟致开发的响应式网站基本也都是采用Bootstrap。当然除了bootstrap还有很多前端响应式框架，像我们国内自己产的就有AmazeUI等。
随着现在显示器分辨率的提升，原始的网页在2K，4K的显示器上显示太小，只占屏幕中间一点点。Bootstrap也一样，最大宽度是1200px，这个时候不满足我们需求，我们可以通过增加多个breakpoint来进行扩展，如1400px一个，1600px一个以此来满足大显示器的最优显示。
我们在变量源文件里（_variales.scss） $grid-breakpoints: 中看到对应的breakpoint分为 xs ， sm ， md ， lg ， xl 五个等级，分别表示极小、小、中等、大、超大。这个断点设置主要用于媒体查询，即当浏览器视窗横向尺寸发生变化时，一旦到了指定条件，比如width=768px，就将触发设置在md断点下的样式。这些等级的数据可以按需改动，全局凡是引用这个map的都将受到影响。
在之前的Bootstrap 3中, 在栅格系统中增加一个层级 (breakpoint) 并不是一件容易的事情。需要程序员做各种LESS 或 CSS 的自定义。而现在的Bootstrap 4 采用了SASS，这就非常方便的增加新的断点，只需添加一个新的 $grid-breakpoints 变量即可。比如你需要增加一个1400px的breakpoint，我们可以把他命名为 xxl ，以此来让宽屏显示器显示更多内容，你只需要在SASS中如下操作即可。
首先增加一个新的breakpoint，我们设置为1400像素，并命名为 xxl
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px) !default;
第二步就是去调整 container 的最大宽度，这边我们将其设置为和breakpoint一样的 xxl
$container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl： 1400px) !default;
第三步就是把修改的文件从新编译下，直接命令行执行npm run dist。如果本地环境没有，那还需要再装下本地调试环境了。具体可以参照官方说明，本文就不再赘述了。
https://getbootstrap.com/docs/4.4/getting-started/build-tools/#tooling-setup
最后，我们只需要在前端html中用 col-xxl-* css类就可以了。
