Bootstrap5 教程

半兽人 发表于: 2020-06-18   最后更新时间: 2023-09-16 15:01:47  
{{totalSubscript}} 订阅, 42,755 游览

Bootstrap5 中文教程

Bootstrap5 本网提供 bootstrap5(bs5) 完整学习资料,您可在本网进行在线调试、在线问答。

知名开源前端框架Bootstrap官方发布最新的Bootstrap 5 Alpha测试版本,这个版本做了一些大刀阔斧的改进,包括不再相依于jQuery,并且放弃了对Internet Explorer的支持,把重点放在更有未来性的工具上,官方改善了CSS变数以及JavaScript运作速度,并且提供了全新公用工具API。

重大变化

把jQuery从Bootstrap的相依项目中移除,可以说是近年Bootstrap最大的变化了,官方提到,之所以能够进行这项工作,归因于前端开发工具和浏览器支援的进步,而这也代表使用Bootstrap 5建构的专案,其档案大小将轻巧的多,页面载入也能够更加快速。

除了移除jQuery之外,官方还强化了Bootstrap 5中的JavaScript功能,官方提到,这些强化工作侧重于提升程式码品质,并且消除Bootstrap第4版和第5版本间的差异,其中一大改变是官方放弃大部分的Button扩充套件,仅使用HTML和CSS来切换状态,功能开关按钮(Toggle Button)现在是以表单选项按钮和核取方块作为基础,因此更加强健可靠。

由于Bootstrap不再支援Internet Explorer,所以在第5版中,已经可使用CSS自定义属性,在Bootstrap 4中,仅包含部分颜色和字体的根变数,而现在还多了一些元件和布局选项,像是表格元件就多了区域变数,可以配置线条和控制等属性。

另外,Bootstrap 5还扩充了调色盘,透过内建颜色系统,开发者可以更直觉地在程式码中,调整应用程式外观,而且官方也改善了调色盘对比度,并在文件中提供色彩对比指南。官方在Bootstrap 5实作了全新的公用工具API,基于API的方法,官方在CSS3扩充Sass中创建了语言和语法,让开发者可以即时创建公用工具,并且也能修改和删除官方所提供的公用工具。

现在官方释出第一个Alpha版本,在几周后,官方会发布另一个Alpha版本,届时还会加入更多功能更新,包括RTL(Right to Left)以及offcanvas等功能。

在线调试示例

下面是bootstrap5的例子,您可以直接运行示例,在线运行调试开发。

<h1>h1. Bootstrap5 heading</h1>
<h2>h2. Bootstrap5 heading</h2>
<h3>h3. Bootstrap5 heading</h3>
<h4>h4. Bootstrap5 heading</h4>
<h5>h5. Bootstrap5 heading</h5>
<h6>h6. Bootstrap5 heading</h6>

在线运行

最后,欢迎进入Bootstrap5的世界。

更新于 2023-09-16
在线,6小时前登录

得運電子 3年前

BS5中是否同步更新并使用bootstrap select.min.js插件呢?

半兽人 -> 得運電子 3年前

select.min.js插件都没有了。

得運電子 -> 半兽人 3年前

哦,那就是以后可以不再使用bootstrap select.min.js了

x-lucky 3年前

赞赞赞

半兽人 3年前

本网为了追赶潮流,80%的页面已经升级为bootstrap5了,版本为beta3
还有部分功能受到影响,也在修复ing。

半兽人 -> 半兽人 3年前

正式版本已经发布了,beat3去掉就可以了。

半兽人 -> 半兽人 3年前

现在最新版本是5.0.2

Bing 4年前

作者能提供下载地址吗?我下载的5运行你的导航条代码没效果。

Bing -> 半兽人 4年前

非常感谢!我马上下载来试。

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章