可以从Bootstrap的开发网站上下载alpha版本 ，并且在Github上也可以找到源代码。
Bootstrap框架的下一个主要版本迫在眉睫。
目前， 已有超过600万个网站在使用它。
Bootstrap使得可以巧妙地使用标准HTML5，CSS3和Javascript前端三重奏。
它使开发人员能够快速构建移动优先和响应快速的网站 。
Twitter Bootstrap是当前最受欢迎的前端框架。
在本文中，我们将介绍新版本，其中包括许多出色的功能，这些功能肯定会简化和改进前端开发工作流程 。
尽管Bootstrap 4仍处于开发阶段（因此请不要在实际站点上使用它），但是开发人员已经完成了出色的工作。
1.用萨斯代替LESS
多亏了用C / C ++ Bootstrap 4编写的功能强大的Libsass Sass编译器 ， 编译速度比以前快得多 。
到目前为止，Bootstrap一直使用LESS作为其主要CSS的前身 ，但是对于新的主要发行版，样式规则将被重构为Sass，它在前端开发人员中更受欢迎，具有庞大的贡献者基础，通常更易于使用并提供更多功能。可能性。
2.用于较小屏幕的新网格层
Bootstrap 4将通过第五个网格增强网格系统，这将有助于开发人员针对480px视口宽度以下的较小设备进行定位 。
col-lg-XX适用于大型台式机。
col-md-XX（用于台式机），以及。
col-sm-XX平板电脑，。
col-xs-XX（用于手机）。
Bootstrap 3当前有4个用于列的网格类。
Bootstrap具有完善的响应式网格系统，使开发人员可以使用不同视口定位设备。
重要的是要知道，尽管使用了新名称，但它们并未为超大屏幕添加新类，而是为超小屏幕添加了新类。
在Bootstrap 4中，大型台式机将使用.col-xl-XX类选择器。
新的网格类采用了以前最小的网格名称，并将当前网格层的名称向上推了一个档位。
3.引入相对CSS单位
新的主要版本将使用REM和EM代替像素，从而使在Bootstrap站点上实现响应式排版成为可能。
Bootstrap 4最终放弃了对Internet Explorer 8的支持。这确实是一个明智的步骤，因为它使他们摆脱了讨厌的polyfills并转换为相对的CSS单元 。
如果您想尝试相对单位如何与新的Bootstrap 4配合使用，请在Codepen上查看此演示 。
4.全新的引导卡
不用担心，卡片将保留熟悉的元素，例如井的标题，页眉和页脚，缩略图和面板。
卡片将取代以前的Kong，缩略图和面板，并为用户提供更简化的工作流程。
开发团队决定统一Bootstrap用户界面的某些先前元素，因此他们决定引入一个称为Cards的新UI组件 。
您可以签出它们，也可以创建自己的卡。
有一些先驱者已经使用Bootstrap卡在Codepen上进行了实验 。
由于卡片将比当前的UI组件更加灵活，因此它们将为创意实现留出更大的空间。
5.新的重启模块
如果您想更好地了解新模块的工作原理，则可以在此处查看源代码。
此举的目的是将所有通用CSS选择器和重置样式包含在单个易于使用的SCSS文件中 。
相反，它在其上建立了更多规则。
它不会抛弃它。
新的Reboot模块将替换以前的normalize.css重置文件。
如果您想体验内容框和边框框布局类型之间的差异，请查看CSS-Tricks.com提供的这个方便的演示 （它不是为Bootstrap 4创建的，它只是说明了框大小一般有效）。
新样式规则使响应式布局更易于管理 。
很高兴知道，新的重置样式巧妙地将<html>元素上的box-size CSS属性设置为border-box ，因此该属性由页面上的每个子元素继承。
6.选择加入Flexbox支持
Bootstrap 4使得可以利用CSS3的Flexbox布局 ，但是-Internet Explorer 9不支持flexbox模块-默认版本的Bootstrap 4而是使用float和display CSS属性来实现流畅的布局 。
仅使用选择在Flexbox的功能，如果你不需要为IE9提供支持做 。
Flexbox具有易于使用的布局，可以很好地用于响应式设计，因为它提供了一个灵活的容器，可以自行扩展或收缩以最佳方式填充可用空间。
7.简化的变量自定义
除了将此文件中的设置复制到另一个名为_custom.scss的文件中以更改默认值之外，您无需执行任何其他操作。
在新的Bootstrap版本中使用的所有Sass变量都包含在一个名为_variables.scss的文件中，它将大大简化开发过程。
您可以自定义许多内容，例如颜色，间距，链接样式，版式，表格，网格断点和容器，列号和装订线宽度等。
8.用于间隔的新实用程序类
新的间距类别使开发人员可以快速更改其网站上的填充和边距。
Bootstrap 3已经具有许多实用的实用程序类，例如更改浮动或clearfix的实用程序类，但是Bootstrap 4却添加了更多实用程序类。
在开发文档中，您可以查看所有新的interval实用程序类。
边距使用m-前缀，而填充则使用p-前缀设置样式。
ma-0类链接一个样式规则，该规则将给定元素（margin-all-0）的所有边距都设置为0。
新类的语法非常简单，例如添加。
9.系绳驱动的工具提示和弹出窗口
这意味着工具提示和弹出窗口将自动正确放置在Bootstrap 4网站上。
在Bootstrap 4中，工具提示和弹出窗口利用了supercool Tether 库 ，这是一个定位引擎，可以将绝对定位的元素保留在同一页面上的另一个元素旁边。
不要忘记，由于Tether是第三方JavaScript库，因此您需要在bootstrap.js文件之前将其单独包含在HTML中。
10.重构JavaScript插件
通过巧妙地利用最新的规范和最新的增强功能，他们打算改善前端体验。
开发团队使用EcmaScript 6重构了每个新版本JavaScript插件。
新的Bootstrap 4还经历了其他JavaScript改进，例如选项类型检查 ， 通用拆解方法和UMD支持 ，它们将一起工作，以使最受欢迎的前端框架比以往任何时候都更流畅地运行。
现在阅读：
翻译自: https://www.hongkiat.com/blog/boostrap-4-best-features/