bootstrap分页功能_Bootstrap 4:您会喜欢的新功能和酷功能

Bootstrap框架的下一个主要版本迫在眉睫。 可以从Bootstrap的开发网站上下载alpha版本 ,并且在Github上也可以找到源代码。

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

尽管Bootstrap 4仍处于开发阶段(因此请不要在实际站点上使用它),但是开发人员已经完成了出色的工作。 在本文中,我们将介绍新版本,其中包括许多出色的功能,这些功能肯定会简化和改进前端开发工作流程

1.用萨斯代替LESS

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

无礼与较少
图片:Google趋势
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类选择器。 重要的是要知道,尽管使用了新名称,但它们并未为超大屏幕添加新类,而是为超小屏幕添加了新类。

网格系统
图像:W3C学校
3.引入相对CSS单位

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

如果您想尝试相对单位如何与新的Bootstrap 4配合使用,请在Codepen上查看此演示

相对单位
图像:CodePen上的barsala
4.全新的引导卡

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

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

引导卡
图片:CodePen中的Thomas Ingall
5.新的重启模块

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

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

装箱大小如何工作
图像:tsmith512的Github.IO
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 4的开发站点
8.用于间隔的新实用程序类

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中。

Tether JavaScript库
图像:Github Hubspot
10.重构JavaScript插件

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

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

增强功能
现在阅读:

翻译自: https://www.hongkiat.com/blog/boostrap-4-best-features/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值