bootstrap有哪些功能

这篇文章主要介绍“bootstrap有哪些功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“bootstrap有哪些功能”文章能帮助大家解决问题。

　　Twitter Bootstrap是当前最受欢迎的前端框架。 它使开发人员能够快速构建移动优先和响应快速的网站 。 Bootstrap使得可以巧妙地使用标准HTML5，CSS3和Javascript前端三重奏。 目前， 已有超过600万个网站在使用它。

　　1.用萨斯代替LESS

　　到目前为止，Bootstrap一直使用LESS作为其主要CSS的前身 ，但是对于新的主要发行版，样式规则将被重构为Sass，它在前端开发人员中更受欢迎，具有庞大的贡献者基础，通常更易于使用并提供更多功能。可能性。 多亏了用C / C ++ Bootstrap 4编写的功能强大的Libsass Sass编译器 ， 编译速度比以前快得多 。

　　 2.用于较小屏幕的新网格层

　　Bootstrap具有完善的响应式网格系统，使开发人员可以使用不同视口定位设备。 Bootstrap 3当前对列有4个网格类。 col-xs-XX（用于手机）。 col-sm-XX平板电脑。 col-md-XX（用于台式机），以及。 col-lg-XX适用于大型台式机。 Bootstrap 4将通过第五个网格增强网格系统，这将有助于开发人员针对480px视口宽度以下的较小设备进行定位 。

　　新的网格类采用了以前最小的网格名称，并将当前网格层的名称向上推了一个档位。 在Bootstrap 4中，大型台式机将使用。col-xl-XX类选择器。 重要的是要知道，尽管使用了新名称，但它们并未为超大屏幕添加新类，而是为超小屏幕添加了新类。

　　3.引入相对CSS单位

　　Bootstrap 4最终放弃了对Internet Explorer 8的支持。这确实是一个明智的步骤，因为它允许他们摆脱讨厌的polyfills并转换为相对的CSS单元 。 新的主要版本将使用REM和EM代替像素，从而使在Bootstrap站点上实现响应式排版成为可能。 这还将提高可读性，并使残障用户可以更轻松地访问网站。

　   4.全新的引导卡

　　开发团队决定统一Bootstrap用户界面的某些先前元素，因此他们决定引入一个称为Cards的新UI组件 。 卡片将取代以前的Kong，缩略图和面板，并为用户提供更简化的工作流程。 不用担心，卡片会保留熟悉的元素，例如井的标题，页眉和页脚，缩略图和面板。

　　由于卡片将比当前的UI组件更加灵活，因此它们将为创意实现留出更大的空间。 有一些先驱者已经使用Bootstrap卡在Codepen上进行了实验 。 您可以签出它们，也可以创建自己的卡。

　　 5.新的重启模块

　　新的重新启动模块将替换以前的normalize.css重置文件。 它不会抛弃它。 相反，它在其上建立了更多规则。 此举的目的是将所有通用CSS选择器和重置样式包含在单个易于使用的SCSS文件中 。 如果您想更好地了解新模块的工作原理，可以在这里查看源代码。

　　很高兴知道，新的重置样式巧妙地将元素上的box-size CSS属性设置为border-box ，因此该属性由页面上的每个子元素继承。 新样式规则使响应式布局更易于管理 。 如果您想体验内容框和边框框布局类型之间的差异，请看一下CSS-Tricks.com提供的这个方便的演示 （它不是为Bootstrap 4创建的，它只是说明了如何调整框大小一般有效）。

　　 6.选择加入Flexbox支持

　　Bootstrap 4使得可以利用CSS3的Flexbox布局 ，但是-Internet Explorer 9不支持flexbox模块-默认版本的Bootstrap 4而是使用float和display CSS属性来实现流畅的布局 。

　　Flexbox具有易于使用的布局，可以很好地用于响应式设计中，因为它提供了一个灵活的容器，可以自行扩展或收缩以最佳方式填充可用空间。 仅使用选择在Flexbox的功能，如果你不需要为IE9提供支持做 。

　　7.简化的变量自定义

　　在新的Bootstrap版本中使用的所有Sass变量都包含在一个名为_variables.scss的文件中，它将大大简化开发过程。 除了将此文件中的设置复制到另一个名为_custom.scss的文件中以更改默认值之外，您无需执行任何其他操作。

　　您可以自定义许多内容，例如颜色，间距，链接样式，版式，表格，网格断点和容器，列号和装订线宽度等。

　　Bootstrap 3已经具有许多实用的实用程序类，例如更改浮动类或clearfix的实用程序类，但是Bootstrap 4却添加了更多实用程序类。 新的间距类别使开发人员可以快速更改其网站上的填充和边距。

　　新类的语法非常简单，例如添加。 ma-0类链接一个样式规则，该规则将给定元素（margin-all-0）的所有边距都设置为0。 边距使用m-前缀，而填充则使用p-前缀设置样式。 在开发文档中，您可以查看所有新的interval实用程序类。

　　9.系绳驱动的工具提示和弹出窗口

　　在Bootstrap 4中，工具提示和弹出窗口使用了supercool Tether 库 ，这是一个定位引擎，可以将绝对定位的元素保留在同一页面上的另一个元素旁边。 这意味着工具提示和弹出窗口将自动正确放置在Bootstrap 4网站上。

　　不要忘记，由于Tether是第三方JavaScript库，因此您需要在bootstrap.js文件之前将其单独包含在HTML中。

　　10.重构JavaScript插件

　　开发团队使用EcmaScript 6重构了每个新版本JavaScript插件。 通过智能利用最新的规范和最新的增强功能，他们打算改善前端体验。

　　新的Bootstrap 4还经历了其他JavaScript改进，例如选项类型检查 ， 通用拆卸方法和UMD支持 ，它们将一起工作，以使最受欢迎的前端框架比以往任何时候都更流畅地运行。

关于“bootstrap有哪些功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。