Bootstrap 5 Alpha发布啦!不再依赖jQuery,放弃支持IE


当前第2页 返回上一页

请查阅新的表单文档,告诉我们你的看法。

1

https://v5.getbootstrap.com/docs/5.0/forms/overview/

使用程序 API

我们很高兴看到有很多人都在构建新颖有趣的 CSS 库和工具包,不断改进我们构建 Web 内容的方式。因此,我们在 Bootstrap 5 中实现了全新的实用程序(utility)API。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

$utilities: () !default;

$utilities: map-merge(

  (

    // ...

    "width": (

      property: width,

      class: w,

      values: (

        25: 25%,

        50: 50%,

        75: 75%,

        100: 100%,

        auto: auto

      )

    ),

    // ...

    "margin": (

      responsive: true,

      property: margin,

      class: m,

      values: map-merge($spacers, (auto: auto))

    ),

    // ...

  ), $utilities);

自从实用程序成为一种首选的构建方式以来,我们一直在寻找适当的平衡点,以便在 Bootstrap 中实现它们的同时提供控制和自定义功能。在 v4 中,我们使用了全局 $enable-* 类来实现它,在 v5 中则更进一步。但采用基于 API 的方法后,我们在 Sass 中创建了一种语言和语法,让你可以及时创建自己的实用程序,同时还可以修改或删除我们提供的实用程序。

我们认为这对于那些基于我们的源文件构建内容的开发人员来说是一大利好,欢迎大家尝试。

注意! 我们将之前的一些 v4 实用程序移到了新的“帮助程序”(Helper)部分。这些帮助程序是一些代码段,比你常用的 property-value 更长一些。这改善了命名操作和我们的文档内容。

增强网格系统

从设计上来说,Bootstrap 5 并没有对 v4 推倒重来。我们希望大家都能更轻松地升级到这个新版本上。因此,我们将大部分构建系统保留在原位(只是拿掉了 jQuery),并且我们还保留了现有的网格系统。

以下是我们在网格中所做更改的摘要:

  • 我们添加了一个新的网格层!那就是 xxl。

  • .gutter 类已被.g* 使用程序替代,它很像我们的 margin/padding 实用程序。我们还为网格 gutter spacing 添加了一些选项,以配合大家熟悉的 spacing 实用程序。

  • https://v5.getbootstrap.com/docs/5.0/layout/gutters/

  • 表单布局选项已替换为新的网格系统。

  • 添加了 Vertical spacing 类。

  • 列默认不再是 position: relative。

下面是一个新的网格 gutter 类的快速示例:

1

2

3

4

5

<div class="row g-5">

  <div class="col">...</div>

  <div class="col">...</div>

  <div class="col">...</div>

</div>

查看文档以了解更多信息。

1

https://v5.getbootstrap.com/docs/5.0/layout/

CSS 网格布局正在日益完善,我们也在持续关注并学习它。预计将来的 v5 版本会进一步与之产生交集。

文档

我们将文档静态站点生成器从 Jekyll 切换到了 Hugo。长期以来,Jekyll 一直是我们的首选生成器,因为它安装和运行起来非常容易,并且部署到 GitHub Pages 也十分简单。

但这些年来,我们在 Jekyll 上遇到了两大问题:

1、Jekyll 要求安装 Ruby

2、站点生成速度非常缓慢

相比之下,Hugo 使用 Go 编写的,因此它没有外部运行时依赖项,并且速度更快。我们构建当前的主分支站点(包括文档的 Sass->CSS 转换)只用了 1.6 秒。我们的本地服务器重新加载的时间从 8-12 秒缩短到了毫秒计,大大改善了处理文档的体验。

即将推出:RTL、offcanvas 等

我们的第一个 Alpha 时间不够,还有很多内容没有加入进来,预计它们会在之后的版本中实现。这里先提前预告一下相关内容。

  • RTL 即将到来!我们已经用 RTLCSS 做了一个 PR,并且还将继续探索逻辑属性。就我个人而言,很抱歉花了这么长时间才解决这个问题,我们知道社区为此付出了多大努力。希望等待是值得的。

  • 我们的 modal 有一个分叉的版本,实现了 offcanvas 菜单。这里还需要做很多工作来控制开销,改善体验。但有了 offcanvas 包装器后,大家就可以放很多适合侧边栏的内容(导航,购物车等)了。

  • 我们正在评估其他许多更改,包括 Sass 模块系统、更多 CSS 自定义属性的应用,将 SVG 嵌入 HTML 而不是 CSS 等等。

未来还会有很多改进,包括更多文档改进、错误修复和体验增强。请务必查看我们的 open issue 和 PR,以提供反馈、测试社区 PR 或分享看法。

试用

可以访问官网获取新版本:

1

https://v5.getbootstrap.com/

或在命令行中输入:

1

npm i bootstrap@next

下一步计划

在 v5 中我们还有很多工作要做,其中包括一些重大更改。我们将尽可能听取反馈,与大家保持同步。我们的目标是在 3-4 周内再发布一次 Alpha 版,此后可能还会再发布几次。我们还将发布 v4.5.1 版本,以修复一些旧问题。

除此之外,请密切关注 Bootstrap Icons 项目,我们的 RFS 项目(现在在 v5 中已默认启用)和 npm starter 项目的更新信息。

1

2

3

https://icons.getbootstrap.com/

https://github.com/twbs/rfs

https://github.com/twbs/bootstrap-npm-starter

以上就是Bootstrap 5 Alpha发布啦!不再依赖jQuery,放弃支持IE的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

jquery如何判断元素是否有滚动条

jquery点击事件失效怎么办

jquery怎么设置disabled属性?

jquery怎么获取父亲节点

jquery如何判断元素是否在数组中

jquery not不起作用怎么办

jquery中on()和live()的区别是什么?

怎么用jquery做图片轮播

jquery如何判断元素是否包含某个属性

jquery trim()函数怎么用

更多相关阅读请进入《Bootstrap5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...