Get started with Bootstrap

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

On this page

快速开始

无需任何构建步骤，即可通过CDN包含Bootstrap的生产就绪CSS和JavaScript。你可以通过这个Bootstrap CodePen demo在实践中看到它。

在项目根目录中创建一个新的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>

包括Bootstrap的CSS和JS。 将CSS的＜link＞标记放在＜head＞中，将JavaScript包的＜script＞标记（包括用于定位下拉菜单、弹出和工具提示的Popper）放在关闭的</body>之前。了解有关我们的 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.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

你还可以包括Popper以及我们的JS。如果你不打算使用下拉菜单、弹出菜单或工具提示，请通过不包括Popper来节省一些KB。

<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.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>

Hello, world! 在你选择的浏览器中打开页面，查看你的引导页面。现在，你可以通过创建自己的layout、添加数十个组件和利用我们的官方示例。

CDN links

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

Description	URL
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js`

你还可以使用CDN获取我们的任何内容页面中列出的其他构建。

下一步

阅读更多关于Bootstrap使用的一些重要的全局环境设置的信息。
在我们的内容部分和下面的需要JavaScript的组件中阅读Bootstrap中包含的内容。
想要获得更多能力吗？考虑通过通过包管理器包括源文件使用Bootstrap进行构建。
要将引导程序用作带有<script type=“module”>的模块吗？请参阅我们的使用Bootstrap作为模块一节。

JS组件

想知道哪些组件明确需要我们的JavaScript和Popper吗？如果你对一般页面结构完全不确定，请继续阅读示例页面模板。

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 and Offcanvas plugins to implement responsive behaviors
Navs with the Tab plugin for toggling content panes
Offcanvases for displaying, positioning, and scroll behavior
Scrollspy for scroll behavior and navigation updates
Toasts for displaying and dismissing
Tooltips and popovers for displaying and positioning (also requires Popper)

重要的全局变量

Bootstrap采用了一些重要的全局样式和设置，所有这些样式和设置几乎都专门针对跨浏览器样式的 规范化。让我们深入了解。

HTML5文档类型

引导程序需要使用HTML5 doctype。没有它，你会看到一些怪异和不完整的样式。

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

Viewport meta

Bootstrap是 以移动端优先 开发的，我们首先优化移动设备的代码，然后根据需要使用CSS媒体查询来扩展组件。为了确保所有设备都能进行正确的渲染和触摸缩放，请将响应视口元标记添加到“＜head＞”中。

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

你可以在[quick-start]（#quick-start）中看到一个例子。

Box-sizing

为了在CSS中更直接地调整大小，我们将全局 box-sizing 值从 content-box 切换到border-box。这确保了 padding 不会影响元素的最终计算宽度，但它可能会导致谷歌地图和谷歌自定义搜索引擎等第三方软件出现问题。

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

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

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

了解更多关于在CSS技巧框模型和大小。

Reboot

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

社区

随时了解Bootstrap的最新发展，并通过这些有用的资源与社区联系。

Read and subscribe to The Official Bootstrap Blog.
Ask questions and explore our GitHub Discussions.
Discuss, ask questions, and more on the community Discord or Bootstrap subreddit.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
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 on Twitter 获取最新的八卦和精彩的音乐视频。