Learning Path
浏览 Bootstrap 5 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
39
Bootstrap5 教程 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。 谁适合阅读本教程？ 只要..
Bootstrap5 信息提示框 Bootstrap 5 可以很容易实现信息提示框。 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例 [mycode3 type=..
Bootstrap5 徽章（Badges） 徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 <span> 元素上即可。 徽章可以根据父元素的大小的变化而变化: 实例 [mycode3 type='html'] 测试标题 New 测试标题 New 测试标题 New 测试标..
Bootstrap5 按钮组 Bootstrap 5 中允许我们将按钮放在同一行上。 可以在 <div> 元素上添加 .btn-group 类来创建按钮组。 实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 » 提示: 我们可以使用 .btn-group-lg|sm 类来设置..
Bootstrap5 按钮 Bootstrap 5 提供了不同样式的按钮。 实例 [mycode3 type='html'] 基本按钮 主要按钮 次要按钮 成功 信息 警告 危险 黑色 浅色 链接 [/mycode3] 尝试一下 » 按钮类可用于 <a>, <button>, 或 <input> 元素..
Bootstrap5 卡片 Bootstrap 5 卡片（Card）组件 是一种强大且灵活的容器，用于展示各种内容，如文本、图片、列表、按钮等。 卡片组件在 Bootstrap 5 中得到了改进和增强，提供了更多的定制选项和更灵活的布局方式。卡片组件在 UI 设计中非常常见，尤其适用于博客、社交媒体、仪表盘和其他内容展示页面。 基本结构 Bootstrap 5 的卡片组件包括以下常用元素： .card：卡片的最外层容器。.card-bo..
Bootstrap5 轮播 轮播是一个循环的幻灯片： 如何创建轮播 以下实例创建了一个简单的图片轮播效果 ： 实例 [mycode3 type='html'] [/myco..
Bootstrap5 折叠 Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。 data-bs-toggle 和 data-bs-target 是用于定义组件行为和目标元素的自定义数据属性。 1、data-bs-toggle 属性： 用于定义组件的行为，指示组件在何时触发。可以设置的值取决于具体的组件类型，如 'collapse'（折叠菜单）、'modal'（模态框）、't..
Bootstrap5 颜色 Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色，为黑色) and .text-light: 实例 [mycod..
Bootstrap5 容器 在上一章节中我们了解到 Bootstrap 需要一个容器元素来包裹网站的内容。 我们可以使用以下两个容器类： .container 类是默认的容器，提供一个固定宽度的布局，宽度会随着屏幕大小的不同而调整。。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，使用这个容器类会始终充满整个屏幕的宽度，适用于全屏布局。。 固定宽度 .container 类..
Bootstrap5 下拉菜单 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。 实例 [mycode3 type='html'] 下拉菜单按钮 链接 1 链接 2 链接 3 [/mycode3] 尝试一下 » 实例解析 .dropdown 类用来指定一个下拉菜单。 我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链..
Bootstrap5 Flex（弹性）布局 Bootstrap5 通过 flex 类来控制页面的布局。 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局，而不是使用浮动来布局。 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程 ..
Bootstrap5 复选框与单选框 如果您希望用户从预设选项列表中选择任意数量的选项，可以使用复选框： 实例 [mycode3 type='html'] Option 1 [/mycode3] 尝试一下 » 复选框通过使用 class='form-check' 来确保标签和复选框有适当边距。 .form-check-label 类添加到标签元素，.fo..
Bootstrap5 表单浮动标签 默认情况下，标签内容一般显示在 input 输入框的上方： 使用浮动标签，可以在 input 输入框内插入标签，在单击 input 输入框时使它们浮动到上方 Bootstrap 实例 [mycode3 type='html'] Email Password [/mycode3] 尝试一下 » 注意事项： &..
Bootstrap5 输入框组 我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。 .input-group-text 类来设置文本的样式。。 Bootstrap 实例 [mycode3 type='html'] @ @runoob.com [/mycode3] 尝试一下 &raq..
Bootstrap5 选择区间 要设置一个选择区间可以在 input 元素中添加 type='range' 并使用 .form-range 类： 选择区间： 实例 [mycode3 type='html'] Custom range [/mycode3] 尝试一下 » 步长 默认情况下，步长为 1，可以通过 step 属性来设置： 实例 [mycode3 ..
Bootstrap5 下拉菜单 下拉菜单可以是单选下拉菜单，也可以是多选的下拉菜单。 单选下拉菜单： 多选下拉菜单： 在 Bootstrap5 中下拉菜单 <select> 元素可以使用 .form-select 类来渲染 : 实例 [mycode3 type='html'] 1 2 3 4 [/mycode3] 尝试一下 » 下拉菜..
Bootstrap5 表单验证 我们可以使用不同的验证类来设置表单的验证功能。 .was-validated 或 .needs-validation 添加到 <form> 元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。 .valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。 ..
Bootstrap5 表单 在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。 表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。 Bo..
Bootstrap5 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 我们也可以根据自己的需要，定义列数： table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0px; } table.grid..
Bootstrap5 图像形状 Bootstrap 5 提供了许多类来帮助你快速调整和优化图像的外观，尤其是控制图像的形状、尺寸和响应式布局。 圆角图片 .rounded 类可以让图片显示圆角效果： 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 [mycode3..
Bootstrap5 安装使用 我们可以通过以下两种方式来安装 Bootstrap5： 使用 Bootstrap5 CDN。 从官网 getbootstrap.com 下载 Bootstrap 5。 Bootstrap 5 CDN CDNJS： Bootstrap5 CDN [mycode3 type='html'] [/mycode3] 注意：popper.mi..
Bootstrap5 Jumbotron Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。 在 Bootstrap 3 中引入了一个 jumbotron 来创建一个大的背景框，用于显示一些重要的信息。 在 Bootstrap 5 中，已经不再支持 Jumbotron。但是，我们可以使用 <div> 元素添加一些辅助类与颜色类来达到相同的效果： 提示: Jumbo..
Bootstrap5 列表组 Bootstrap 5 列表组（List Group） 是一种用于展示一系列项目或内容的组件，通常用于展示导航、标签、菜单或其他类似的列表形式。 列表组组件提供了一个灵活的方式来展示有序或无序的内容，可以自定义每个项目的样式、交互和布局。 基本结构 Bootstrap 5 列表组由以下几部分组成：.list-group：用于包裹整个列表的容器。.list-group-item：每个列表项，通常包含文本、链接..