跳到主要内容
在 GitHub 查看原文

简介

Bootstrap 是一个功能强大、功能丰富的前端工具包。从原型到生产，可以在几分钟内构建任何东西。

本页目录

快速开始

只需通过 CDN 引入 Bootstrap 的生产就绪 CSS 和 JavaScript 即可开始使用，无需任何构建步骤。


  1. 在项目根目录中创建一个新的 index.html 文件。 同时添加 <meta name="viewport"> 标记，以便在移动设备上获得正确的响应式行为。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. 引入 Bootstrap 的 CSS 和 JS。 将 CSS 的 <link> 标签放在 <head> 中，并将 JavaScript 包（包含用于定位下拉菜单、弹出框和工具提示的 Popper）的 <script> 标签放在 </body> 之前。更多信息请参阅 CDN 链接。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
  </body>
</html>

    你也可以单独引入 Popper 和 Bootstrap 的 JS。如果不需要使用下拉菜单、弹出框或工具提示，可以不引入 Popper，从而节省一些体积。

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous"></script>

  3. 你好，世界！ 在浏览器中打开页面，即可看到 Bootstrap 页面。现在你可以开始用 Bootstrap 构建项目：创建自己的布局、添加数十个组件，并参考官方示例。

作为参考，这里是我们的主要 CDN 链接。

描述链接
CSShttps://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css
JShttps://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js

你也可以通过 CDN 获取目录结构中列出的其他构建版本。

在使用 CDN 链接时，确保使用 integrity 属性来验证正确的文件和版本。这些哈希值对于每个 Bootstrap 文件和版本都是唯一的，因此当你更新到新版本时，也要确保 integrity 属性已更新。

我们还包括一个 crossorigin="anonymous" 属性以防止 CORS 错误。

下一步

JS 组件

想知道哪些组件明确需要 Bootstrap 的 JavaScript 和 Popper？如果你对整体页面结构还不熟悉，可以继续阅读示例页面模板。

  • 折叠面板：扩展折叠（Collapse）插件
  • 警告框：用于关闭
  • 按钮：切换状态，以及复选框/单选按钮功能
  • 轮播：所有滑动行为、控件和指示器
  • 折叠：切换内容可见性
  • 下拉菜单：显示与定位（也需要 Popper）
  • 模态框：显示、定位和滚动行为
  • 导航栏：扩展折叠与画布外插件，实现响应式行为
  • 导航与标签页：使用 Tab 插件切换内容面板
  • 画布外菜单：显示、定位和滚动行为
  • 滚动监听：滚动行为与导航更新
  • 消息提示：显示与关闭
  • 工具提示与弹出框：显示与定位（也需要 Popper）

重要的全局设置

Bootstrap 使用了一些重要的全局样式和设置，这些几乎完全是为了跨浏览器样式的规范化。让我们深入了解。

HTML5 文档类型

Bootstrap 需要使用 HTML5 文档类型。没有它，你会看到一些奇怪且不完整的样式。

<!doctype html>
<html lang="en">
  ...
</html>

视口元标签

Bootstrap 采用移动优先策略：先针对移动设备优化代码，再按需使用 CSS 媒体查询扩展组件。为确保在所有设备上正确渲染并支持触摸缩放，请在 <head> 中添加响应式视口 meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

你可以在快速入门中看到一个实际的例子。

盒模型

为了让 CSS 中的尺寸计算更直接，我们将全局 box-sizing 从 content-box 改为 border-box。这样 padding 不会影响元素的最终计算宽度，但可能会对 Google Maps、Google 自定义搜索引擎等第三方软件造成问题。

在极少数情况下你需要覆盖它时，可以使用如下内容：

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

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

在 CSS Tricks 上了解更多关于盒模型和大小调整的信息。

Reboot

为了改善跨浏览器的渲染，我们使用 Reboot 来纠正不同浏览器和设备之间的不一致，同时对常见的 HTML 元素提供略微更明确的重置。

社区

通过这些有用的资源，随时了解 Bootstrap 的开发动态并与社区互动。

  • 阅读并订阅 官方 Bootstrap 博客.
  • 提出问题并探索 我们的 GitHub 讨论区.
  • 讨论、提问，以及更多 社区Discord或者 Bootstrap 子版块.
  • 在 IRC 上与其他 Bootstrap 开发者交流：服务器 irc.libera.chat，频道 #bootstrap。
  • 可以在 Stack Overflow 的 bootstrap-5 标签下寻求实现帮助。
  • 开发者在通过 npm 或类似渠道分发扩展或修改 Bootstrap 功能的包时，应使用 bootstrap 关键词，以获得最大的可发现性。

你也可以在 X 上关注 @getbootstrap，获取最新动态和有趣的视频。