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>