Learning Path

Bootstrap 5 tutorials

Browse tutorials and chapters for Bootstrap 5.

Frontend

HTML, CSS, JavaScript, browser APIs, frontend frameworks, and UI engineering.

Tutorials

TAXONOMYFrontendFetched/Bootstrap 5

Bootstrap5 教程

Bootstrap5 教程 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap5 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。谁适合阅读本教程？只要..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 信息提示框

Bootstrap5 信息提示框 Bootstrap 5 可以很容易实现信息提示框。提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现: 实例 [mycode3 type=..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 徽章（Badges）

Bootstrap5 徽章（Badges）徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 <span> 元素上即可。徽章可以根据父元素的大小的变化而变化: 实例 [mycode3 type='html'] 测试标题 New 测试标题 New 测试标题 New 测试标..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 按钮组

Bootstrap5 按钮组 Bootstrap 5 中允许我们将按钮放在同一行上。可以在 <div> 元素上添加 .btn-group 类来创建按钮组。实例 [mycode3 type='html'] Apple Samsung Sony [/mycode3] 尝试一下 » 提示: 我们可以使用 .btn-group-lg|sm 类来设置..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 按钮

Bootstrap5 按钮 Bootstrap 5 提供了不同样式的按钮。实例 [mycode3 type='html'] 基本按钮主要按钮次要按钮成功信息警告危险黑色浅色链接 [/mycode3] 尝试一下 » 按钮类可用于 <a>, <button>, 或 <input> 元素..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 卡片

Bootstrap5 卡片 Bootstrap 5 卡片（Card）组件是一种强大且灵活的容器，用于展示各种内容，如文本、图片、列表、按钮等。卡片组件在 Bootstrap 5 中得到了改进和增强，提供了更多的定制选项和更灵活的布局方式。卡片组件在 UI 设计中非常常见，尤其适用于博客、社交媒体、仪表盘和其他内容展示页面。基本结构 Bootstrap 5 的卡片组件包括以下常用元素： .card：卡片的最外层容器。.card-bo..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 轮播

Bootstrap5 轮播轮播是一个循环的幻灯片：如何创建轮播以下实例创建了一个简单的图片轮播效果：实例 [mycode3 type='html'] [/myco..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 折叠

Bootstrap5 折叠 Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。 data-bs-toggle 和 data-bs-target 是用于定义组件行为和目标元素的自定义数据属性。 1、data-bs-toggle 属性：用于定义组件的行为，指示组件在何时触发。可以设置的值取决于具体的组件类型，如 'collapse'（折叠菜单）、'modal'（模态框）、't..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 颜色

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..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 容器

Bootstrap5 容器在上一章节中我们了解到 Bootstrap 需要一个容器元素来包裹网站的内容。我们可以使用以下两个容器类： .container 类是默认的容器，提供一个固定宽度的布局，宽度会随着屏幕大小的不同而调整。。 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器，使用这个容器类会始终充满整个屏幕的宽度，适用于全屏布局。。固定宽度 .container 类..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 下拉菜单

Bootstrap5 下拉菜单下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。实例 [mycode3 type='html'] 下拉菜单按钮链接 1 链接 2 链接 3 [/mycode3] 尝试一下 » 实例解析 .dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单，按钮或链..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 Flex（弹性）布局

Bootstrap5 Flex（弹性）布局 Bootstrap5 通过 flex 类来控制页面的布局。弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4/5 最大的区别就是 Bootstrap 4/5 使用弹性盒子来布局，而不是使用浮动来布局。弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程 ..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 复选框与单选框

Bootstrap5 复选框与单选框如果您希望用户从预设选项列表中选择任意数量的选项，可以使用复选框：实例 [mycode3 type='html'] Option 1 [/mycode3] 尝试一下 » 复选框通过使用 class='form-check' 来确保标签和复选框有适当边距。 .form-check-label 类添加到标签元素，.fo..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 表单浮动标签

Bootstrap5 表单浮动标签默认情况下，标签内容一般显示在 input 输入框的上方：使用浮动标签，可以在 input 输入框内插入标签，在单击 input 输入框时使它们浮动到上方 Bootstrap 实例 [mycode3 type='html'] Email Password [/mycode3] 尝试一下 » 注意事项： &..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 输入框组

Bootstrap5 输入框组我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。 .input-group-text 类来设置文本的样式。。 Bootstrap 实例 [mycode3 type='html'] @ @runoob.com [/mycode3] 尝试一下 &raq..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 选择区间

Bootstrap5 选择区间要设置一个选择区间可以在 input 元素中添加 type='range' 并使用 .form-range 类：选择区间：实例 [mycode3 type='html'] Custom range [/mycode3] 尝试一下 » 步长默认情况下，步长为 1，可以通过 step 属性来设置：实例 [mycode3 ..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 下拉菜单

Bootstrap5 下拉菜单下拉菜单可以是单选下拉菜单，也可以是多选的下拉菜单。单选下拉菜单：多选下拉菜单：在 Bootstrap5 中下拉菜单 <select> 元素可以使用 .form-select 类来渲染 : 实例 [mycode3 type='html'] 1 2 3 4 [/mycode3] 尝试一下 » 下拉菜..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 表单验证

Bootstrap5 表单验证我们可以使用不同的验证类来设置表单的验证功能。 .was-validated 或 .needs-validation 添加到 <form> 元素中，input 输入字段将具有绿色（有效）或红色（无效）边框效果，用于说明表单是否需要输入内容。 .valid-feedback 或 .invalid-feedback 类用来告诉用户缺少什么信息，或者在提交表单之前需要完成什么。 ..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 表单

Bootstrap5 表单在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。 Bo..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 网格系统

Bootstrap5 网格系统 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数： table.grid { width:100%; border:none; background-color:#F6F4F0; padding:0px; } table.grid..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 图像形状

Bootstrap5 图像形状 Bootstrap 5 提供了许多类来帮助你快速调整和优化图像的外观，尤其是控制图像的形状、尺寸和响应式布局。圆角图片 .rounded 类可以让图片显示圆角效果：实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 椭圆图片 .rounded-circle 类可以设置椭圆形图片: 实例 [mycode3..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 安装使用

Bootstrap5 安装使用我们可以通过以下两种方式来安装 Bootstrap5：使用 Bootstrap5 CDN。从官网 getbootstrap.com 下载 Bootstrap 5。 Bootstrap 5 CDN CDNJS： Bootstrap5 CDN [mycode3 type='html'] [/mycode3] 注意：popper.mi..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 Jumbotron

Bootstrap5 Jumbotron Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。在 Bootstrap 3 中引入了一个 jumbotron 来创建一个大的背景框，用于显示一些重要的信息。在 Bootstrap 5 中，已经不再支持 Jumbotron。但是，我们可以使用 <div> 元素添加一些辅助类与颜色类来达到相同的效果：提示: Jumbo..

TUTORIALFrontendFetched/Bootstrap 5

Bootstrap5 列表组

Bootstrap5 列表组 Bootstrap 5 列表组（List Group）是一种用于展示一系列项目或内容的组件，通常用于展示导航、标签、菜单或其他类似的列表形式。列表组组件提供了一个灵活的方式来展示有序或无序的内容，可以自定义每个项目的样式、交互和布局。基本结构 Bootstrap 5 列表组由以下几部分组成：.list-group：用于包裹整个列表的容器。.list-group-item：每个列表项，通常包含文本、链接..