Bootstrap 4如何添加一个新的Breakpoint

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类就可以了。

我们伟致的官方网站就是增加了1400px的breakpoint做的。大家可以通过审查元素看下。