Bootstrap知识点大合集（上）

于 2024-06-27 11:26:37 发布
阅读量520 收藏 8
点赞数 6
文章标签： bootstrap 前端 html 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zwdkkk/article/details/139929817
版权

简介

Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。

快速开始

如何让项目快速用上 Bootstrap？ 使用 jsDelivr，这是一个免费且开源的 CDN，在你的页面上添加几个文件链接就能开始你的 Bootstrap 之旅啦。你是否在使用软件包管理器或想下载 Bootstrap 的源文件？ 请转到下载页面查看说明。

CSS 文件

复制以下 <link> 标签并粘贴到 <head> 标签内，注意，务必放到其它所有 CSS 样式前面。

Copy

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS 文件

Bootstrap 自带的大部分组件都需要依赖 JavaScript 才能起作用。具体来说，这些组件依赖 jQuery、Popper 以及我们自己开发的 JavaScript 插件。我们使用的是 jQuery 的 slim 构建版本，当然，完整版本也是被支持的。

复制下面的 <script> 标签 粘贴到页面底部，并且是在 </body> 标签之前，就能起作用了。注意，顺序很重要，不能错，首先是 jQuery，然后是 Popper，最后是我们自己的 JavaScript 插件。

集成包

我们提供的两个集成包都包含了 Bootstrap 的每一个 JavaScript 插件。即 bootstrap.bundle.js 和 bootstrap.bundle.min.js，此外，还包含了 Popper，用于支持工具提示（tooltip）和弹出框（popover）功能，但是不包含 jQuery。添加到页面中时，按照先 jQuery 后 Bootstrap 的 JavaScript 集成包的顺序依次添加。有关 Bootstrap 中包含了哪些内容的更多信息，请参见我们的 内容 章节。

Copy

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>
分开加载

如果你决定分开加载各个文件，那么务必按此顺序，首先是 jQuery，其次是 Popper（如果你使用工具提示和弹出框的话），最后是我们提供的 JavaScript 插件。

Copy

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
Bootstrap 组件

是否好奇哪些组件明确需要 jQuery，或者我们提供的 JavaScript 插件以及 Popper？请单击下面的组件详情链接进行查看。如果不确定页面如何结构，请继续阅读并参考示例页面模板。

Show components requiring JavaScript
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Scrollspy for scroll behavior and navigation updates
  • Tooltips and popovers for displaying and positioning (also requires Popper)

入门模板

请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：

Copy

<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
    -->
  </body>
</html>

以上就是对于一个页面的大致要求。请访问 布局文档 或 我们的官方示例 作为你布局网站内容和组件的参考。

重要的全局设置

Bootstrap 依赖一些重要的全局样式和设置，专门针对的是跨浏览器的样式 统一化（normalization），需要你在使用 Bootstrap 之前重点了解。接下来开始我们历险之旅吧。

HTML5 文档类型（doctype）

Bootstrap 要求文档类型（doctype）是 HTML5。如果没有这一设置，你就会看到一些古怪的、不完整的样式，因此，正确设置文档类型（doctype）就能轻松避免这些困扰。

Copy

<!doctype html>
<html lang="zh-CN">
  ...
</html>

响应式布局相关的 标签

Bootstrap 采用的是 移动设备优先（mobile first） 的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的渲染和触屏缩放，请务必在 <head> 标签中 添加让 viewport（视口）支持响应式布局的 标签。

Copy

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

你可以在 入门模板 中查看此示例的实际应用。

CSS 盒模型

为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 Google Maps 和 Google Custom Search Engine）出现问题。

在为数不多的情况下，你需要专门覆盖这一些设置，可以使用如下示例代码：

Copy

.selector-for-some-widget {
  box-sizing: content-box;
}

利用上述代码片段，嵌套的元素（包括通过 ::before 和 ::after 生成的内容）都将继承 .selector-for-some-widget 所指定的 box-sizing 值。

了解有关 盒模型和尺寸设置 的更多信息。

Reboot

为了提升跨浏览器的渲染效果，我们使用 Reboot 来纠正不同浏览器和设备之间的差异，并同时为常见的 HTML 元素提供更多更合适的样式重置。

栅格系统

用于布局 Bootstrap 项目的组件和选项，包括包装容器、强大的网格系统、灵活的媒体对象和响应式实用程序类。

集装箱

容器是 Bootstrap 中最基本的布局元素，在使用我们默认的网格系统时是必需的。容器用于包含、填充和（有时）居中其中的内容。虽然容器可以嵌套，但大多数布局不需要嵌套容器。

Bootstrap 附带三个不同的容器：

  • .container``max-width，在每个响应断点处设置一个
  • .container-fluid，在width: 100%所有断点处
  • .container-{breakpoint}，直到width: 100%指定的断点

下表说明了每个容器max-width与原始容器.container以及.container-fluid每个断点之间的比较。

查看它们的实际应用，并在我们的网格示例中对它们进行比较。

特小 <576px小 ≥576px中等 ≥768px大 ≥992px特大号 ≥1200px
.container100%540像素720像素960像素1140像素
.container-sm100%540像素720像素960像素1140像素
.container-md100%100%720像素960像素1140像素
.container-lg100%100%100%960像素1140像素
.container-xl100%100%100%100%1140像素
.container-fluid100%100%100%100%100%

一体

我们的默认.container类是一个响应式、固定宽度的容器，这意味着它max-width在每个断点处都会发生变化。

复制

<div class="container">
  <!-- Content here -->
</div>

体液

用于.container-fluid全宽容器，跨越视口的整个宽度。

复制

<div class="container-fluid">
  ...
</div>

反应灵敏

响应式容器是 Bootstrap v4.4 中的新增功能。它们允许您指定一个 100% 宽的类，直到到达指定的断点，之后我们max-width对每个较高的断点应用 s。例如，.container-sm开始时为 100% 宽，直到sm到达断点，此时它将按md、lg和进行缩放xl。

复制

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

响应式断点

由于 Bootstrap 是为了移动优先而开发的，因此我们使用一些媒体查询来为我们的布局和界面创建合理的断点。这些断点主要基于最小视口宽度，并允许我们在视口变化时放大元素。

Bootstrap 主要在我们的布局、网格系统和组件的源 Sass 文件中使用以下媒体查询范围（或断点）。

复制

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

由于我们用 Sass 编写源 CSS，因此所有媒体查询都可以通过 Sass mixins 获得：

复制

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

我们偶尔会使用相反方向的媒体查询（给定的屏幕尺寸或更小）：

复制

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

请注意，由于浏览器当前不支持范围上下文查询，因此我们通过使用更高精度的值进行这些比较来解决具有分数宽度的前缀min-和max-视口的限制（例如，在高 dpi 设备上的某些条件下可能会发生这种情况） 。

同样，这些媒体查询也可以通过 Sass mixins 获得：

复制

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

还有媒体查询和混合，用于使用最小和最大断点宽度来定位屏幕尺寸的单段。

复制

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

这些媒体查询也可以通过 Sass mixins 获得：

复制

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

同样，媒体查询可能跨越多个断点宽度：

复制

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

针对相同屏幕尺寸范围的 Sass mixin 为：

复制

@include media-breakpoint-between(md, xl) { ... }

Z 指数

一些 Bootstrap 组件利用z-indexCSS 属性，通过提供第三个轴来排列内容来帮助控制布局。我们在 Bootstrap 中使用默认的 z 索引比例，该比例旨在正确分层导航、工具提示和弹出窗口、模式等。

这些较高的值从任意数字开始，足够高且具体，可以理想地避免冲突。我们的分层组件需要一套标准的工具提示、弹出窗口、导航栏、下拉菜单、模式，这样我们的行为就可以相当一致。我们没有理由不能使用100+ 或500+。

我们不鼓励定制这些个人价值观；如果您更改其中一项，您可能需要更改全部。

复制

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

为了处理组件内的重叠边框（例如，输入组中的按钮和输入），我们使用低单位数字z-index值1、2和3来表示默认、悬停和活动状态。在悬停/焦点/活动时，我们将特定元素带到最前面并具有更高的z-index值，以显示其在同级元素上的边框。

网格系统

使用我们强大的移动优先 Flexbox 网格来构建各种形状和大小的布局，这要归功于十二个列系统、五个默认响应层、Sass 变量和混合以及数十个预定义类。

怎么运行的

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它是用Flexbox构建的并且完全响应式。下面是一个示例，深入介绍了网格如何组合在一起。

刚接触或不熟悉 Flexbox？ 阅读这份 CSS Tricks flexbox 指南，了解背景、术语、指南和代码片段。

三列之一

三列之一

三列之一

复制

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上面的示例使用我们预定义的网格类在小型、中型、大型和超大型设备上创建三个等宽列。这些列与父级一起位于页面的中心.container。

将其分解，其工作原理如下：

  • 容器提供了一种居中和水平填充网站内容的方法。用于.container响应式像素宽度或.container-fluid跨width: 100%所有视口和设备尺寸。
  • 行是列的包装。每列都有水平线padding（称为排水沟），用于控制它们之间的空间。然后，这padding会在具有负边距的行上抵消。这样，列中的所有内容在视觉上都在左侧向下对齐。
  • 在网格布局中，内容必须放置在列内，并且只有列可以是行的直接子级。
  • 感谢 Flexbox，没有指定的网格列width将自动布局为等宽列。例如，四个实例的.col-sm宽度将自动为小断点及以上的 25%。有关更多示例，请参阅自动布局列部分。
  • 列类别指示您想要使用的列数（每行可能有 12 列）。因此，如果您想要三个等宽的列，您可以使用.col-4.
  • Columnwidth以百分比设置，因此它们始终相对于其父元素是可变的和大小的。
  • 列具有水平方向padding以在各个列之间创建装订线，但是，您可以使用 上的margin从行和padding列中删除装订线。.no-gutters``.row
  • 为了使网格具有响应性，有五个网格断点，每个响应断点对应一个：所有断点（特小）、小、中、大和特大。
  • 网格断点基于最小宽度媒体查询，这意味着它们适用于该一个断点及其之上的所有断点（例如，.col-sm-4适用于小型、中型、大型和超大型设备，但不适用于第一个xs断点）。
  • 您可以使用预定义的网格类（例如.col-4）或Sass mixins来获得更多语义标记。

请注意Flexbox 的限制和错误，例如无法使用某些 HTML 元素作为 Flex 容器。

网格选项

虽然 Bootstrap 使用ems 或rems 来定义大多数大小，但pxs 用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不随字体大小而变化。

通过方便的表格了解 Bootstrap 网格系统的各个方面如何在多个设备上工作。

特小 <576px小 ≥576px中等 ≥768px大 ≥992px特大号 ≥1200px
最大集装箱宽度无（自动）540像素720像素960像素1140像素
类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-
列数12
天沟宽度30px（每列15px）
可嵌套是的
列排序是的

自动布局列

利用特定于断点的列类来轻松调整列大小，而无需像.col-sm-6.

等宽

例如，这里有两个适用于每个设备和视口的网格布局，从xs到xl。为您需要的每个断点添加任意数量的无单位类，并且每列将具有相同的宽度。

1 个（共 2 个）

2 共 2 个

1 个（共 3 个）

2 共 3 个

3 共 3 个

复制

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

等宽多线

.w-100通过在希望列换行的位置插入 来创建跨多行的等宽列。通过.w-100与一些响应式显示实用程序混合使用，使中断响应灵敏。

Safari flexbox存在一个错误，如果没有显式flex-basis或border.对于较旧的浏览器版本有一些解决方法，但如果您的目标浏览器不属于有错误的版本，则不需要这些解决方法。

坳

坳

坳

坳

复制

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

设置一列宽度

Flexbox 网格列的自动布局还意味着您可以设置一列的宽度，并让同级列在其周围自动调整大小。您可以使用预定义的网格类（如下所示）、网格混合或内联宽度。请注意，无论中心列的宽度如何，其他列都会调整大小。

1 个（共 3 个）

2 共 3 个（更宽）

3 共 3 个

1 个（共 3 个）

2 共 3 个（更宽）

3 共 3 个

复制

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

可变宽度内容

使用col-{breakpoint}-auto类根据内容的自然宽度来调整列的大小。

1 个（共 3 个）

可变宽度内容

3 共 3 个

1 个（共 3 个）

可变宽度内容

3 共 3 个

复制

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

响应式课程

Bootstrap 的网格包括五层预定义类，用于构建复杂的响应式布局。在超小型、小型、中型、大型或超大型设备上自定义您认为合适的列的大小。

所有断点

对于从最小设备到最大设备都相同的网格，请使用.col和.col-*类。当您需要特定大小的列时，请指定编号类；否则，请随意坚持.col。

坳

坳

坳

坳

8 号栏

第 4 栏

复制

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

水平堆叠

使用一组类.col-sm-*，您可以创建一个基本的网格系统，该系统一开始是堆叠的，并在小断点 ( sm) 处变成水平的。

科尔-sm-8

科尔-sm-4

科尔-SM

科尔-SM

科尔-SM

复制

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

连连看

不希望您的列简单地堆叠在某些网格层中？根据需要为每个层使用不同类的组合。请参阅下面的示例，以更好地了解其工作原理。

.col-md-8

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6

.col-6

复制

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

排水沟

可以通过特定于断点的填充和负边距实用程序类来响应地调整装订线。要更改给定行中的装订线，请在 上配对负边距实用程序，.row并在 s 上配对匹配的填充实用程序.col。.container或父.container-fluid级可能也需要调整以避免不必要的溢出，再次使用匹配的填充实用程序。

lg下面是在大 ( ) 断点及以上自定义 Bootstrap 网格的示例。我们.col用 增加了填充.px-lg-5，用 抵消了.mx-lg-n5父级的填充.row，然后.container用 调整了包装器.px-lg-5。

自定义列填充

自定义列填充

复制

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

行列

使用响应式.row-cols-*类快速设置最能呈现内容和布局的列数。普通.col-*类适用于各个列（例如.col-md-4），而行列类则在父级上设置.row为快捷方式。

使用这些行列类可以快速创建基本网格布局或控制卡片布局。

柱子

柱子

柱子

柱子

复制

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

柱子

柱子

柱子

柱子

复制

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

柱子

柱子

柱子

柱子

复制

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

柱子

柱子

柱子

柱子

复制

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

柱子

柱子

柱子

柱子

复制

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

您还可以使用随附的 Sass mixin row-cols()：

复制

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

结盟

使用 Flexbox 对齐实用程序垂直和水平对齐列。当 Flex 容器具有如下所示的****a 时，Internet Explorer 10-11 不支持 Flex 项目的垂直对齐。min-height 有关更多详细信息，请参阅 Flexbugs #3。

垂直对齐

三列之一

三列之一

三列之一

三列之一

三列之一

三列之一

三列之一

三列之一

三列之一

复制

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

三列之一

三列之一

三列之一

复制

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平对齐

两列之一

两列之一

两列之一

两列之一

两列之一

两列之一

两列之一

两列之一

两列之一

两列之一

复制

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

无排水沟

可以使用 删除我们预定义网格类中列之间的间距.no-gutters。这会从所有直接子列中删除margin负数.row和水平线。padding

这是创建这些样式的源代码。请注意，列覆盖的范围仅限于第一个子列，并且通过属性选择器定位。虽然这会生成更具体的选择器，但仍然可以使用间距实用程序进一步自定义列填充。

**需要无边设计？**删除父级.container或.container-fluid.

复制

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

实际上，它看起来是这样的。请注意，您可以继续将其与所有其他预定义的网格类（包括列宽、响应层、重新排序等）一起使用。

.col-sm-6 .col-md-8

.col-6 .col-md-4

复制

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列环绕

如果单行中放置的列超过 12 列，则每组额外的列将作为一个单元换行到新行。

.col-9

.col-4
由于 9 + 4 = 13 > 12，这个 4 列宽的 div 被包装到一个新行作为一个连续的单元。

.col-6
后续列沿着新行继续。

复制

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

分栏符

在 Flexbox 中将列分成新行需要一个小技巧：在width: 100%要将列换行到新行的任意位置添加一个元素。通常这是通过多个.rows 来完成的，但并不是每个实现方法都能解决这个问题。

.col-6 .col-sm-3

.col-6 .col-sm-3

.col-6 .col-sm-3

.col-6 .col-sm-3

复制

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

您还可以使用我们的响应式显示实用程序在特定断点处应用此中断。

.col-6 .col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

.col-6 .col-sm-4

复制

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

重新排序

订单类别

使用.order-类来控制内容的视觉顺序。这些类是响应式的，因此您可以设置order断点（例如，.order-1.order-md-2）。包括对所有五个网格层的1支持。12

首先在 DOM 中，没有应用顺序

在 DOM 中排名第二，顺序更大

在 DOM 中排名第三，阶数为 1

复制

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

还有响应式.order-first和类分别通过应用和( ).order-last来更改order元素的。这些类也可以根据需要与编号类混合。order: -1``order: 13``order: $columns + 1``.order-*

DOM 中第一个，最后一个

DOM 中的第二个，无序

DOM 中第三，顺序第一

复制

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

偏移列

您可以通过两种方式偏移网格列：我们的响应式.offset-网格类和我们的边距实用程序。网格类的大小与列相匹配，而边距对于偏移宽度可变的快速布局更有用。

偏移类

使用类将列移至右侧.offset-md-*。这些类逐列增加一列的左边距*。例如，.offset-md-4移动.col-md-4四列。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

复制

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

除了在响应断点处清除列之外，您可能还需要重置偏移量。请参阅网格示例中的实际操作。

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

复制

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>
保证金效用

随着 v4 中转向 Flexbox，您可以使用边距实用程序，例如.mr-auto强制同级列彼此远离。

.col-md-4

.col-md-4 .ml-自动

.col-md-3 .ml-md-自动

.col-md-3 .ml-md-自动

.col-自动 .mr-自动

.col-自动

复制

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

嵌套

要将内容与默认网格嵌套，请在现有列中添加一.row组新列。嵌套行应包含一组总计不超过 12 列的列（不要求您使用所有 12 个可用列）。.col-sm-*``.col-sm-*

布局实用程序

为了实现更快的移动友好和响应式开发，Bootstrap 包含数十个用于显示、隐藏、对齐和间隔内容的实用程序类。

改变display

使用我们的显示实用程序来响应地切换属性的常用值display。将其与我们的网格系统、内容或组件混合，以在特定视口中显示或隐藏它们。

弹性盒选项

Bootstrap 4 是使用 Flexbox 构建的，但并非每个元素display都已更改，display: flex因为这会添加许多不必要的覆盖并意外地更改关键浏览器行为。我们的大多数组件都是在启用 Flexbox 的情况下构建的。

如果您需要添加display: flex到元素，请使用.d-flex响应式变体之一（例如.d-sm-flex）。您将需要此类或display值来允许使用我们额外的Flexbox 实用程序来调整大小、对齐、间距等。

边距和填充

使用margin和padding 间距实用程序来控制元素和组件的间距和大小。 Bootstrap 4 包括基于1rem值默认变量的五级间距实用程序$spacer。为所有视口选择值（例如，.mr-3对于margin-right: 1rem），或选择响应变体以定位特定视口（例如，.mr-md-3从断点margin-right: 1rem开始md）。

切换visibility

display当不需要切换时，您可以使用我们的可见性实用程序visibility切换元素的。不可见元素仍然会影响页面的布局，但在视觉上对访问者隐藏。

警告框（Alert）

通过精炼且灵活的警告消息为典型的用户操作提供契合上下文的反馈。

示例

警告框（alert）组件能够展示任意长度的文本以及一个可选的关闭按钮。为了展示合适的样式，必须 从下列 8 个情境类（例如 .alert-success）中选择一个合适的并使用。中选择一个合适的并使用。如需内联一个关闭按钮，请使用 警告框（alert）的 JavaScript 插件。

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

Copy

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

链接的颜色

通过使用 .alert-link 工具类可以为任何警告框（alert）组件添加颜色相匹配的链接。

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

Copy

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

添加其它内容

警告框（alert）组件还可以包含其它 HTML 元素，例如标题、段落、分割线等。

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Copy

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

关闭警告框

通过使用警告框（alert）组件的 JavaScript 插件，可以为任何警告框（alert）组件添加内联的关闭按钮。步骤如下：

  • 确保已加载了警告框（alert）组件的 JavaScript 插件，或者是 Bootstrap 的预编译 JavaScript 文件。
  • 如果你是自行编译的 JavaScript 源码，那么 需要依赖 util.js 文件。预编译版本已经包含了该文件。
  • 添加关闭按钮和 .alert-dismissible 类，这将在警告框（alert）组件的右侧增加额外的空间并放置关闭按钮（ .close）。
  • 在关闭按钮上添加 data-dismiss="alert" 属性，该属性会触发 JavaScript 代码。请务必使用 <button> 元素，以确保在所有设备上都具有正确的行为。
  • 如需在关闭警告框（alert）时展示动画效果，请确保添加 .fade 和 .show。

以下是演示效果：

Holy guacamole! You should check in on some of those fields below.×

Copy

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

徽章（Badge）

徽章（badge）组件相关的文档和示例。徽章（badge）是一种小型的用于计数和打标签的组件。

示例

徽章（badge）组件通过使用相对字体大小和 em 单位来实现缩放以匹配其直接父元素的大小。

Example heading New

Example heading New
Example heading New
Example heading New

Copy

<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

徽章（badge）组件可以作为链接或按钮的一个组成部分，以提供计数功能。

Notifications 4

Copy

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

请注意，根据使用方式的不同，徽章（badge）组件可能会给使用屏幕阅读器及类似辅助技术的用户带来困惑。虽然徽章（badge）组件通过样式传达了有关其用途的视觉提示，但视觉受限的用户则只能获取到徽章（badge）组件内所包含的文本内容。根据具体使用情况（例如放在句子、链接或按钮的结尾处），这些徽章（badge）组件可能给人的印象是一串随机的单词或数字。

除非上下文是清晰的（例如，在 “Notifications” 示例中，数字 “4” 被理解为通知的条数），否则请考虑附上一段额外的文本并在视觉上设置为隐藏以提供一个额外的上下文。

Profile 9unread messages

Copy

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

根据情境改变外观

添加下面列出的任何一个修饰符类来更改徽章（badge）组件的外观。

Primary Secondary Success Danger Warning Info Light Dark

Copy

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

胶囊式徽章（Pill badges）

使用 .badge-pill 修饰符类能够让徽章（badge）组件的边角变得更圆滑（这是通过设置更大的 border-radius， 并在水平方向添加额外的 padding 来实现的）。如果你很怀念 Bootstrap v3 中的徽章（badge）组件的话，这就是你的老朋友。

Primary Secondary Success Danger Warning Info Light Dark

Copy

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge badge-pill badge-secondary">Secondary</span>
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-danger">Danger</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-light">Light</span>
<span class="badge badge-pill badge-dark">Dark</span>

链接

在 <a> 元素上使用具有情境模式的 .badge-* 类可以快速为 可相应动作的 徽章（badge）组件赋予鼠标悬停和焦点状态。

Primary Secondary Success Danger Warning Info Light Dark

Copy

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

面包屑导航（Breadcrumb）

面包屑导航（Breadcrumb）用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。

示例

HomeHomeLibraryHomeLibraryData

Copy

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

改变分隔符

分隔符是通过 CSS 的 ::before 和 content 两个属性自动添加的。可以通过 $breadcrumb-divider 变量来改变分隔符。Sass 中的 quote 函数用于生成字符串两侧的引号，因此，如果你希望用 > 字符作为分隔符的话，你可以这样做：

Copy

$breadcrumb-divider: quote(">");

也可以使用 经过 base64 编码的嵌入式 SVG 图标：

Copy

$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);

通过将 $breadcrumb-divider 设置为 none，从而删除分隔符：

Copy

$breadcrumb-divider: none;

按钮（Buttons）

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

示例

Bootstrap 内置了几种预定义的按钮样式，每种样式都有自己的语义目的，并添加了一些额外的按钮includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Primary Secondary Success Danger Warning Info Light Dark Link

Copy

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>
Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

禁止按钮上的文字换行

如果你不希望按钮中的文字换行的话，可以为按钮添加 .text-nowrap 类。在 Sass 代码中，你可以设置 $btn-white-space: nowrap 来禁止所有按钮中的文本换行。

可用作按钮的 HTML 标签

.btn 系列类（class）被设计为用于 <button> 元素。不过，你也可以将这些类用于 <a> 或 <input> 元素（但是某些浏览器可能会使用略有不同的渲染方式）。

当 .btn 系列类（class）用于 <a> 元素并触发页面上的功能（例如折叠内容），而不是链接到新页面或当前页面中的内容部分时，应当为这些链接设置 role="button" 属性，以便将链接的目的以适当的方式传递给类似屏幕阅读器的辅助工具。

Link Button

Copy

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

带轮廓线的按钮

当你需要使用按钮，但不希望按钮带有背景颜色时，请将默认的修饰符类（modifier class）替换为 .btn-outline-* 系列类（class），已去除按钮上的所有背景图片和颜色。

Primary Secondary Success Danger Warning Info Light Dark

Copy

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

某些按钮的样式使用了相对较浅的前景色，因此仅应在深色背景上使用才能具有足够的对比度。

按钮的尺寸

需要更大或更小的按钮吗？使用 .btn-lg 或 .btn-sm 类可以设置按钮的不同尺寸。

Large button Large button

Copy

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

Small button Small button

Copy

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

通过添加 .btn-block 类来创建块级按钮（即，按钮占满了整个父级元素的宽度）。

Block level buttonBlock level button

Copy

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

活动状态

当按钮处于活动状态时，按钮将表现为被按下的效果，即背景和边框变暗，如果启用了阴影效果，将会有 inset 阴影。由于这一效果是基于伪类（pseudo-class）实现的，因此无需为 <button> 添加任何类（class）。但是，如果需要以编程方式强制复现这一效果的话，可以使用 .active 类（并设置 aria-pressed=“true” 属性）。

Primary link Link

Copy

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

禁用状态

通过为 <button> 元素设置 disabled 属性（此属性是布尔类型的）可以使按钮看起来处于不可用状态。

Primary button Button

Copy

<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>

使用 <a> 元素创建的处于禁用状态的按钮具有些许不同的行为：

  • <a> 元素不支持 disabled 属性，因此必须设置 .disabled 类以使其在外观上显示为禁用状态。
  • 包含了一些并未被全面支持的的属性，用于禁止按钮上的所有 鼠标事件（pointer-events） 。在支持这些属性的浏览器中，光标移动到被禁用的按钮上时将不会出现变化（即不会变为手的样子）。
  • 利用 <a> 标签实现的禁用按钮应当设置 aria-disabled="true" 属性，以便向辅助技术提供当前元素的状态。
  • 利用 <a> 标签实现的禁用按钮 不应 设置 href 属性。

Primary link Link

Copy

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

按钮组

使用按钮组将一系列按钮组合在一行上，并使用 JavaScript 增强它们的功能。

基本示例

.btn用in包裹一系列按钮.btn-group。使用我们的按钮插件添加可选的 JavaScript 单选和复选框样式行为。

左边中间正确的

复制

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
确保正确role并提供标签

为了让辅助技术（例如屏幕阅读器）传达一系列按钮已分组的信息，role需要提供适当的属性。对于按钮组，这将是role="group"，而工具栏应该有role="toolbar"。

此外，组和工具栏应该有一个明确的标签，因为大多数辅助技术不会公布它们，尽管存在正确的角色属性。在此处提供的示例中，我们使用，但也可以使用aria-label替代方案，例如。aria-labelledby

按钮工具栏

将多组按钮组组合到按钮工具栏中，以获得更复杂的组件。根据需要使用实用程序类来分隔组、按钮等。

1234

567

8

复制

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

您可以随意将输入组与工具栏中的按钮组混合使用。与上面的示例类似，您可能需要一些实用程序来正确分配空间。

1234

@

1234

@

复制

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

浆纱

无需将按钮大小调整类应用于组中的每个按钮，只需添加.btn-group-*到每个按钮.btn-group，包括嵌套多个组时的每个按钮。

左边中间正确的

左边中间正确的

左边中间正确的

复制

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

嵌套

当您希望下拉菜单与一系列按钮混合时，请将一个放在.btn-group另一个中。.btn-group

12

落下

复制

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

垂直变化

使一组按钮垂直堆叠而不是水平堆叠。这里不支持拆分按钮下拉菜单。

按钮按钮按钮按钮按钮按钮

按钮按钮

落下

按钮按钮

落下

落下

落下

复制

<div class="btn-group-vertical">
  ...
</div>

卡片card

Bootstrap 的卡片提供了灵活且可扩展的内容容器，具有多种变体和选项。

关于

卡片是一种灵活且可扩展的内容容器。它包括页眉和页脚选项、各种内容、上下文背景颜色和强大的显示选项。如果您熟悉 Bootstrap 3，卡片将取代我们旧的面板、孔和缩略图。与这些组件类似的功能可用作卡片的修饰符类。

例子

卡片是用尽可能少的标记和样式构建的，但仍然设法提供大量的控制和自定义。它们采用 Flexbox 构建，可轻松对齐并与其他 Bootstrap 组件完美混合。默认情况下没有margin，因此请根据需要使用间距实用程序。

下面是具有混合内容和固定宽度的基本卡片的示例。卡片开始时没有固定的宽度，因此它们自然会填充其父元素的整个宽度。这可以通过我们的各种尺寸选项轻松定制。

Image cap

卡标题

一些基于卡片标题的快速示例文本构成了卡片的大部分内容。

去一个地方

复制

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

内容类型

卡片支持多种内容，包括图像、文本、列表组、链接等。以下是支持的示例。

身体

卡的构建块是.card-body.当您需要在卡片中添加填充部分时，请使用它。

这是卡片正文中的一些文本。

复制

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

标题、文本和链接

.card-title卡片标题通过添加到标签来使用<h*>。以同样的方式，通过添加.card-link到标签来添加链接并将其放置在彼此旁边<a>。

.card-subtitle通过在标签中添加 a 来使用字幕<h*>。如果将.card-title和.card-subtitle项目放置在一个.card-body项目中，则卡片标题和副标题会很好地对齐。

卡标题
卡牌副标题

一些基于卡片标题的快速示例文本构成了卡片的大部分内容。

卡链接 另一个链接

复制

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

图片

.card-img-top将图像放置在卡片的顶部。使用.card-text，可以将文本添加到卡片中。其中的文本.card-text也可以使用标准 HTML 标签进行样式设置。

Image cap

一些基于卡片标题的快速示例文本构成了卡片的大部分内容。

复制

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

列出组

使用刷新列表组在卡片中创建内容列表。

  • 一个物品
  • 第二项
  • 第三项

复制

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

精选

  • 一个物品
  • 第二项
  • 第三项

复制

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>
  • 一个物品
  • 第二项
  • 第三项

卡页脚

复制

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

厨房水槽

混合并匹配多种内容类型以创建您需要的卡片，或者将所有内容都放入其中。下面显示的是图像样式、块、文本样式和列表组 - 全部包含在固定宽度的卡片中。

Image cap

卡标题

一些基于卡片标题的快速示例文本构成了卡片的大部分内容。

  • 一个物品
  • 第二项
  • 第三项

卡链接 另一个链接

复制

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

页眉和页脚

在卡片中添加可选的页眉和/或页脚。

精选

特殊职称待遇

下面的支持文本作为附加内容的自然引导。

去一个地方

复制

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

可以通过添加元素来设置卡片标题的.card-header样式<h*>。

精选
特殊职称待遇

下面的支持文本作为附加内容的自然引导。

去一个地方

复制

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

引用

众所周知的引用，包含在 blockquote 元素中。

来源标题中的某个名人

复制

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

精选

特殊职称待遇

下面的支持文本作为附加内容的自然引导。

去一个地方

2天前

复制

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

浆纱

卡片假定没有特定的width开始位置，因此除非另有说明，它们将是 100% 宽。您可以根据需要使用自定义 CSS、网格类、网格 Sass mixin 或实用程序来更改此设置。

使用网格标记

使用网格，根据需要将卡片按列和行排列。

特殊职称待遇

下面的支持文本作为附加内容的自然引导。

去一个地方

特殊职称待遇

下面的支持文本作为附加内容的自然引导。

去一个地方

复制

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

轮播

用于循环浏览元素（图像或文本幻灯片）的幻灯片组件，就像轮播一样。

怎么运行的

轮播是一个循环播放一系列内容的幻灯片，使用 CSS 3D 转换和一些 JavaScript 构建。它适用于一系列图像、文本或自定义标记。它还包括对上一个/下一个控件和指示器的支持。

在支持Page Visibility API的浏览器中，当网页对用户不可见时（例如当浏览器选项卡处于非活动状态、浏览器窗口最小化等时），轮播将避免滑动。

该组件的动画效果依赖于prefers-reduced-motion媒体查询。请参阅我们的辅助功能文档的减少运动部分。

请注意，不支持嵌套传送带，并且传送带通常不符合辅助功能标准。

最后，如果您从源代码构建我们的 JavaScript，它需要util.js.

例子

轮播不会自动标准化幻灯片尺寸。因此，您可能需要使用其他实用程序或自定义样式来适当调整内容大小。虽然轮播支持上一个/下一个控件和指示器，但它们并不是明确需要的。根据您的需要添加和自定义。

**该类.active需要添加到其中一张幻灯片中，**否则轮播将不可见。另外，请务必id为可选控件设置唯一的.carousel，特别是当您在单个页面上使用多个轮播时。控制和指示器元素必须具有与元素的匹配的data-target属性（或href链接）。id``.carousel

仅幻灯片

这是一个仅包含幻灯片的轮播。请注意轮播图像上存在.d-block和 ，.w-100以防止浏览器默认图像对齐。

First slide

Third slide

复制

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
        <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>

带控件

添加上一个和下一个控件。我们建议使用<button>elements，但您也可以将<a>elements 与role="button".

First slide

Third slide

以前的下一个

复制

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

带指标

您还可以将指示器与控件一起添加到轮播中。

First slide

Third slide

以前的下一个

复制

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

带字幕

.carousel-caption使用任何 中的元素轻松为幻灯片添加标题.carousel-item。使用可选的显示实用程序，它们可以轻松隐藏在较小的视口中，如下所示。我们最初用 隐藏它们，.d-none然后用 重新将它们带回到中型设备上.d-md-block。

First slide

第一张幻灯片标签

第一张幻灯片的一些代表性占位符内容。

Third slide

第三张幻灯片标签

第三张幻灯片的一些代表性占位符内容。

以前的下一个

复制

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

交叉淡入淡出

添加.carousel-fade到轮播中，以使用淡入淡出过渡而不是幻灯片来制作幻灯片动画。根据您的轮播内容（例如，纯文本幻灯片），您可能需要.bg-body向 s 添加或一些自定义 CSS.carousel-item以实现正确的交叉淡入淡出。

Third slide

以前的下一个

复制

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

个别.carousel-item间隔

添加data-interval=""到 a.carousel-item以更改自动循环到下一个项目之间的延迟时间量。

First slide

以前的下一个

复制

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

禁用触摸滑动

轮播支持在触摸屏设备上向左/向右滑动以在幻灯片之间移动。可以使用该属性禁用此data-touch功能。下面的示例也不包含该data-ride属性，data-interval="false"因此它不会自动播放。

First slide

以前的下一个

复制

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

用法

通过数据属性

使用数据属性可以轻松控制轮播的位置。data-slide接受关键字prev或next，这会更改幻灯片相对于其当前位置的位置。或者，使用data-slide-to将原始幻灯片索引传递到轮播data-slide-to="2"，这会将幻灯片位置移动到以 开头的特定索引0。

该data-ride="carousel"属性用于将轮播标记为在页面加载时开始动画。如果您不使用data-ride="carousel"初始化轮播，则必须自己初始化它。它不能与同一轮播的（冗余和不必要的）显式 JavaScript 初始化结合使用。

通过JavaScript

手动调用轮播：

复制

$('.carousel').carousel()

选项

选项可以通过数据属性或 JavaScript 传递。对于数据属性，将选项名称附加到data-，如 中data-interval=""。

姓名类型默认描述
间隔数字5000自动循环项目之间的延迟时间量。如果false，则轮播不会自动循环。
键盘布尔值真的轮播是否应对键盘事件做出反应。
暂停字符串|布尔值‘徘徊’如果设置为'hover'，则暂停轮播的循环mouseenter并恢复轮播的循环mouseleave。如果设置为false，则将鼠标悬停在轮播上不会暂停它。在支持触摸的设备上，当设置为 时'hover'，循环将暂停touchend（一旦用户完成与轮播的交互）两个时间间隔，然后自动恢复。请注意，这是对上述鼠标行为的补充。
骑细绳错误的在用户手动循环第一个项目后自动播放轮播。如果设置为'carousel'，则在加载时自动播放轮播。
裹布尔值真的传送带是否应连续循环或硬停止。
触碰布尔值真的轮播是否应支持触摸屏设备上的左/右滑动交互。

方法

异步方法和转换

所有 API 方法都是异步的并启动转换。一旦转换开始但在结束之前，它们就会返回调用者。此外，对转换组件的方法调用将被忽略。

请参阅我们的 JavaScript 文档以获取更多信息。

.carousel(options)

使用可选选项初始化轮播object并开始循环浏览项目。

复制

$('.carousel').carousel({
  interval: 2000
})
.carousel('cycle')

从左到右循环浏览轮播项目。

.carousel('pause')

阻止轮播循环浏览项目。

.carousel(number)

将轮播循环到特定帧（从 0 开始，类似于数组）。在目标项显示之前（即slid.bs.carousel事件发生之前）返回给调用者。

.carousel('prev')

循环到上一项。在显示前一项之前（即slid.bs.carousel事件发生之前）返回给调用者。

.carousel('next')

循环到下一个项目。在显示下一个项目之前（即在slid.bs.carousel事件发生之前）返回给调用者。

.carousel('dispose')

销毁元素的轮播。

.carousel('nextWhenVisible')

当页面不可见或轮播或其父级不可见时，请勿将轮播循环到下一个。在显示下一个项目之前（即在slid.bs.carousel事件发生之前）返回给调用者。

.carousel('to')

将轮播循环到特定帧（从 0 开始，类似于数组）。在显示下一个项目之前（即在slid.bs.carousel事件发生之前）返回给调用者。

活动

Bootstrap 的轮播类公开了两个事件来挂钩轮播功能。这两个事件都具有以下附加属性：

  • direction：转盘滑动的方向（"left"或"right"）。
  • relatedTarget：作为活动项滑入到位的 DOM 元素。
  • from：当前项的索引
  • to: 下一项的索引

所有轮播事件均在轮播本身上触发（即在<div class="carousel">）。

事件类型描述
幻灯片.bs.轮播slide当实例方法被调用时，该事件立即触发。
滑动bs轮播当轮播完成其幻灯片转换时会触发此事件。

复制

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something...
})

更改过渡持续时间

如果您使用编译的 CSS，则.carousel-item可以在编译前使用 Sass 变量或自定义样式更改过渡持续时间。$carousel-transition如果应用多个过渡，请确保首先定义变换过渡（例如transition: transform 2s ease, opacity .5s ease-out）。

折叠

使用一些类和我们的 JavaScript 插件切换项目中内容的可见性。

怎么运行的

折叠 JavaScript 插件用于显示和隐藏内容。按钮或锚点用作触发器，映射到您切换的特定元素。折叠元素会将 的动画效果height从其当前值变为0。鉴于 CSS 处理动画的方式，您不能在元素padding上使用.collapse。相反，使用类作为独立的包装元素。

该组件的动画效果依赖于prefers-reduced-motion媒体查询。请参阅我们的辅助功能文档的减少运动部分。

例子

单击下面的按钮可通过类更改显示和隐藏另一个元素：

  • .collapse隐藏内容
  • .collapsing在过渡期间应用
  • .collapse.show显示内容

一般来说，我们建议使用带有该属性的按钮data-target。虽然从语义的角度来看不建议这样做，但您也可以使用带有href属性（和role="button"）的链接。在这两种情况下，data-toggle="collapse"都是必需的。

带有 href 的链接 带有数据目标的按钮

复制

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
zwwkkkkk
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值