189 8069 5689

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有哪些功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。


当前标题:bootstrap有哪些功能
网站链接:http://cdxtjz.com/article/jsgioj.html

其他资讯