unber的博客

Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

Bootstrap5 弹窗 (Toasts) 是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。弹窗可以在页面的不同位置显示，包括左上角、右上角、左下角、右下角以及页面底部中央。

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

div class="carousel-item"> <img src="https://static.jyshare.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%"> <div class="carousel-caption"> <h3>第一张图片描述标题</h3> <p>第一张图片描述内容显示在这里！

导航栏一般放在页面的顶部。我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。导航栏上的选项可以使用 <ul> 元素并添加 class="navbar-nav" 类。

标签使用 .tab-content 类。-- 导航居中 --> <ul class="nav justify-content-center"> <!-- 导航右对齐 --> <ul class="nav justify-content-end">

Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。和是用于定义组件行为和目标元素的自定义数据属性。"collapse""modal""tab"以下实例中，当按钮被点击时，data-bs-toggle="collapse" 属性触发了折叠菜单的行为，data-bs-target="#demo" 属性指定了折叠菜单的目标元素为 ID 为 demo 的 <div> 元素。

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

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

Bootstrap 5 列表组（List Group） 是一种用于展示一系列项目或内容的组件，通常用于展示导航、标签、菜单或其他类似的列表形式。列表组组件提供了一个灵活的方式来展示有序或无序的内容，可以自定义每个项目的样式、交互和布局。

网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap 5 可以很简单的实现分页效果。要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。

我们也可以设置一个正在加载的按钮。

进度条可以显示用户任务的完成过程。

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 <span> 元素上即可。

Bootstrap 5 中允许我们将按钮放在同一行上。可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

Bootstrap 5 提供了不同样式的按钮。

Bootstrap 5 可以很容易实现信息提示框。

Bootstrap 5 提供了许多类来帮助你快速调整和优化图像的外观，尤其是控制图像的形状、尺寸和响应式布局。

Bootstrap 5 的表格（Table）组件提供了一系列功能和样式，使得表格更加易于构建、响应式和美观。我们可以轻松地创建带有不同样式、排序功能、分页和响应式布局的表格。

柔和的文本。</p> </div><div class="container"> <h2>背景颜色</h2> <p class="bg-primary text-white">重要的背景颜色。</p> <p class="bg-warning text-white">警告背景颜色

h1 Bootstrap 标题</p> <p class="h2">h2 Bootstrap 标题</p> <p class="h3">h3 Bootstrap 标题</p> <p class="h4">h4 Bootstrap 标题 </p> <p class="h5">h5 Bootstrap 标题</p> <p class="h6">h6 Bootstrap 标题</p> </div>

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。请确保每一行中列的总和等于或小于 12。

在上一章节中我们了解到 Bootstrap 需要一个容器元素来包裹网站的内容。

我们可以通过以下两种方式来安装 Bootstrap5：使用 Bootstrap5 CDN。从官网下载 Bootstrap 5。

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

接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。

Bootstrap 提供了很好的方式来处理多媒体对象（图片或视频）和内容的布局。

Bootstrap4 通过 flex 类来控制页面的布局。

Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。

提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。

<li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li>

如果要自定义一个复选框，可以设置 <div> 为父元素，类为 .custom-control 和 .custom-checkbox，复选框作为子元素放在该 <div> 里头，然后复选框设置为，类为 .custom-control-input。复选框的文本使用label标签，标签使用 .custom-control-label 类，label的for属性值需要匹配复选框的 id。如果要自定义一个单选框，可以设置<div>

我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。最后，我们还需要使用 .input-group-text 类来设置文本的样式。