Skip to main content Skip to docs navigation

开始使用 Bootstrap

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

目录

快速开始

🌐 Quick start

通过 CDN 引入 Bootstrap 的生产就绪 CSS 和 JavaScript 即可开始使用，无需任何构建步骤。在这个 Bootstrap CodePen 演示 中查看实际效果。

🌐 Get started by including Bootstrap’s production-ready CSS and JavaScript via CDN without the need for any build steps. See it in practice with this Bootstrap CodePen demo.


  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。 将 <link> 标签放在 <head> 中用于我们的 CSS，将 <script> 标签用于我们的 JavaScript 包（包括用于定位下拉菜单、弹出框和工具提示的 Popper），放在关闭的 </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 和我们的 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 链接

🌐 CDN links

作为参考，以下是我们的主要 CDN 链接。

🌐 As reference, here are our primary CDN links.

描述URL
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 来获取我们在目录页面中列出的任何其他版本。

🌐 You can also use the CDN to fetch any of our additional builds listed in the Contents page.

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

🌐 When using CDN links, be sure to use the integrity attribute to verify the correct files and versions. These hashes are unique to each file and version of Bootstrap, so when you update to a new version, be sure the integrity attribute is also updated.

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

🌐 We also include a crossorigin="anonymous" attribute to prevent CORS errors.

下一步

🌐 Next steps

JS 组件

🌐 JS components

好奇哪些组件明确需要我们的 JavaScript 和 Popper？如果你对整体页面结构有任何不确定，请继续阅读示例页面模板。

🌐 Curious which components explicitly require our JavaScript and Popper? If you’re at all unsure about the general page structure, keep reading for an example page template.

  • 用于扩展我们的 Collapse 插件的手风琴
  • 用于退出的警报
  • 用于切换状态和复选框/单选功能的按钮
  • 所有幻灯片行为、控件和指示器的轮播
  • 折叠以切换内容的可见性
  • 用于显示和定位的下拉菜单（也需要 Popper）
  • 用于显示、定位和滚动行为的模态
  • 用于扩展我们的 Collapse 和 Offcanvas 插件以实现响应式行为的导航栏
  • 用于切换内容窗格的具有选项卡插件的导航
  • 用于显示、定位和滚动行为的 Offcanvas
  • 用于滚动行为和导航更新的 Scrollspy
  • 用于显示和消除的 Toast
  • 用于显示和定位的工具提示和弹出框（也需要 Popper）

重要的全局变量

🌐 Important globals

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

🌐 Bootstrap employs a handful of important global styles and settings, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 文档类型

🌐 HTML5 doctype

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

🌐 Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.

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

Viewport 元数据

🌐 Viewport meta

Bootstrap 是以移动优先开发的，这是一种策略，我们首先为移动设备优化代码，然后根据需要使用 CSS 媒体查询扩大组件。为了确保所有设备的正确渲染和触摸缩放，请将响应式视口 meta 标签添加到你的 <head> 中。

🌐 Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

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

你可以在 快速入门 中看到这个操作示例。

🌐 You can see an example of this in action in the quick start.

盒子尺寸

🌐 Box-sizing

为了在 CSS 中更直接地进行尺寸设置，我们将全局 box-sizing 值从 content-box 切换为 border-box。这确保了 padding 不会影响元素的最终计算宽度，但它可能会对一些第三方软件（如 Google 地图和 Google 自定义搜索引擎）造成问题。

🌐 For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.

在极少数情况下，你需要覆盖它，请使用如下所示的内容：

🌐 On the rare occasion you need to override it, use something like the following:

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

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

🌐 With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

了解更多关于 CSS Tricks 上的盒模型和尺寸 的内容。

🌐 Learn more about box model and sizing at CSS Tricks.

重启

🌐 Reboot

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

🌐 For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

社区

🌐 Community

及时了解 Bootstrap 的开发动态，并利用这些有用的资源接触社区。

🌐 Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.

  • 阅读并订阅 官方 Bootstrap 博客。
  • 提出问题并探索 我们的 GitHub 讨论。
  • 在 社区 Discord 或 Bootstrap 子版块 上讨论、提问等。
  • 在 IRC 上与其他自力更生者聊天。在 irc.libera.chat 服务器的 #bootstrap 通道。
  • 可以在 Stack Overflow（标签 bootstrap-5）找到实现帮助。
  • 开发者在通过 npm 或类似的传输机制分发时，应在修改或添加 Bootstrap 功能的包上使用关键字 bootstrap，以实现最大程度的可发现性。

你也可以关注 @getbootstrap 在 X 获取最新的八卦和超棒的音乐视频。

🌐 You can also follow @getbootstrap on X for the latest gossip and awesome music videos.