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"> 标签以及 适当的响应式行为。

    ¥Create a new index.html file in your project root. Include the <meta name="viewport"> tag as well for proper responsive behavior in mobile devices.

    <!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 链接 的更多信息。

    ¥Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle (including Popper for positioning dropdowns, popovers, and tooltips) before the closing </body>. Learn more about our CDN links.

    <!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.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>

    你也可以分别包含 Popper 和我们的 JS。如果你不打算使用下拉菜单、弹出窗口或工具提示，请通过不包含 Popper 来节省几千字节。

    ¥You can also include Popper and our JS separately. If you don’t plan to use dropdowns, popovers, or tooltips, save some kilobytes by not including 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.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>

  3. 你好世界！在你选择的浏览器中打开页面以查看你的 Bootstrapped 页面。现在，你可以通过创建自己的布局、添加数十个组件并利用我们的官方示例来开始使用 Bootstrap 进行构建。

    ¥Hello, world! Open the page in your browser of choice to see your Bootstrapped page. Now you can start building with Bootstrap by creating your own layout, adding dozens of components, and utilizing our official examples.

¥CDN links

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

¥As reference, here are our primary CDN links.

Description URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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.

下一步

¥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 插件的手风琴

    ¥Accordions for extending our Collapse plugin

  • 用于退出的警报

    ¥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

  • 用于显示和定位的下拉菜单（也需要 Popper）

    ¥Dropdowns for displaying and positioning (also requires Popper)

  • 用于显示、定位和滚动行为的模态

    ¥Modals for displaying, positioning, and scroll behavior

  • 用于扩展我们的 Collapse 和 Offcanvas 插件以实现响应式行为的导航栏

    ¥Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors

  • 用于切换内容窗格的具有选项卡插件的导航

    ¥Navs with the Tab plugin for toggling content panes

  • 用于显示、定位和滚动行为的 Offcanvas

    ¥Offcanvases for displaying, positioning, and scroll behavior

  • 用于滚动行为和导航更新的 Scrollspy

    ¥Scrollspy for scroll behavior and navigation updates

  • 用于显示和消除的 Toast

    ¥Toasts for displaying and dismissing

  • 用于显示和定位的工具提示和弹出窗口（也需要 Popper）

    ¥Tooltips and popovers for displaying and positioning (also requires 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 媒体查询扩展组件。为了确保所有设备都能正确渲染和触摸缩放，请将响应式 viewport 元数据标记添加到你的 <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 Maps 和 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

为了改进跨浏览器渲染，我们使用 重新启动 来纠正浏览器和设备之间的不一致，同时对常见 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 官方博客】(https://blog.getbootstrap.com/)。

    ¥Read and subscribe to The Official Bootstrap Blog.

  • 提出问题并探索 我们的 GitHub 讨论。

    ¥Ask questions and explore our GitHub Discussions.

  • 就 社区 Discord 或 Bootstrap 子版块 进行讨论、提问等。

    ¥Discuss, ask questions, and more on the community Discord or Bootstrap subreddit.

  • 在 IRC 中与其他 Bootstrapper 聊天。在 irc.libera.chat 服务器上，在 #bootstrap 通道中。

    ¥Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.

  • 可以在 Stack Overflow（标记为 bootstrap-5）中找到实现帮助。

    ¥Implementation help may be found at Stack Overflow (tagged bootstrap-5).

  • 当通过 npm 或类似的交付机制分发时，开发者应在修改或添加 Bootstrap 功能的包上使用关键字 bootstrap，以实现最大程度的可发现性。

    ¥Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

你还可以在 Twitter 上关注 [@getbootstrap](https://twitter.com/{{< param twitter >}}) 以获取最新的八卦和精彩的音乐视频。

¥You can also follow [@getbootstrap on Twitter](https://twitter.com/{{< param twitter >}}) for the latest gossip and awesome music videos.