Bootstrap 5 教程 - 现代响应式前端框架

什么是 Bootstrap 5？

Bootstrap 5 是世界上最流行的前端开源工具包的最新版本，用于使用 HTML、CSS 和 JavaScript 开发响应式、移动优先的网站。

Bootstrap 5 带来了重大变化，包括移除 jQuery 依赖、改进网格系统、新的实用工具类以及重新设计的组件。

                                    
                                        <!-- 引入 Bootstrap 5 CSS -->

                                        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

                                        <!-- 引入 Bootstrap 5 JS -->

                                        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

版本信息

最新版本: 5.3.0
发布日期: 2023年2月
GitHub 星标: 160k+
移除 jQuery 依赖
改进表单控件

Bootstrap 5 主要特性

移动优先

Bootstrap 5 采用移动优先的方法，首先针对移动设备开发代码，然后使用 CSS 媒体查询为更大的设备扩展组件。

响应式网格系统

使用容器、行和列来布局和对齐内容。Bootstrap 5 的网格系统使用 flexbox 构建，完全响应式。

丰富的组件

Bootstrap 5 包含广泛的组件，如按钮、卡片、导航栏、模态框等，可以轻松构建现代网站。

Bootstrap 5 新特性

移除 jQuery

Bootstrap 5 移除了对 jQuery 的依赖，使用纯 JavaScript 重写所有组件，减少了页面加载时间。

改进的网格系统

新增了 xxl 断点，改进了 gutter 类，并更新了网格类以更好地支持现代屏幕尺寸。

新的表单控件

改进了表单样式，添加了浮动标签、新的选择菜单样式和更好的验证状态。

实用工具 API

引入了实用工具 API，使开发人员能够轻松创建自定义实用工具类，扩展 Bootstrap 的功能。

快速开始

通过 CDN 引入

最简单的方式是通过 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件。

                                    
                                        <!-- CSS -->

                                        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

                                        <!-- JS Bundle -->

                                        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

通过包管理器安装

也可以通过 npm、yarn 或 Composer 安装 Bootstrap 5。

                                    
                                        # npm

                                        npm install bootstrap@5.3.0-alpha1

                                        # yarn

                                        yarn add bootstrap@5.3.0-alpha1

                                        # Composer

                                        composer require twbs/bootstrap:5.3.0-alpha1