跳至主要内容 跳至文档导航
在 GitHub 上查看

开始使用 Bootstrap

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

当前页

快速入门

首先通过CDN包含Bootstrap的生产就绪CSS和JavaScript，而无需任何构建步骤。通过此 Bootstrap CodePen 演示 在实践中看到它。


  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> 标签和JavaScript捆绑包 （包括用于定位下拉列表、popper 和工具提示的 Popper）的<script>标签放在 <head> 标签之后 </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.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
  </body>
</html>

    你也可以分别包含[Popper]（https://popper.js.org/）和我们的JS。如果您不打算使用下拉列表、弹出框或工具提示，请通过不包括 Popper 来节省一些千字节。

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.min.js" integrity="sha384-heAjqF+bCxXpCWLa6Zhcp4fu20XoNIA98ecBC1YkdXhszjoejr5y9Q77hIrv8R9i" crossorigin="anonymous"></script>

  3. Hello, world! 在您选择的浏览器中打开页面以查看您的 Bootstrapped 页面。现在你可以通过创建自己的layout，添加几十个组件，并使用我们的官方示例来开始使用Bootstrap进行构建。

CDN 链接

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

Description URL
CSS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js

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

后续步骤

JS组件

好奇哪些组件明确需要我们的JavaScript和Popper？单击下面的显示组件链接。如果您不确定一般页面结构，请继续阅读示例页面模板。

显示需要 JavaScript 的组件
  • 关闭警报
  • 用于切换状态和复选框/单选功能的按钮
  • 所有幻灯片行为、控件和指示器的轮播
  • 折叠以切换内容的可见性
  • 用于显示和定位的下拉列表（还需要 Popper）
  • 用于显示、定位和滚动行为的模态
  • 导航栏，用于扩展我们的折叠和画布外插件以实现响应行为
  • 使用选项卡插件进行导航，用于切换内容窗格
  • 用于显示、定位和滚动行为的画布外
  • 用于滚动行为和导航更新的Scrollspy
  • 用于显示和关闭Toasts
  • 用于显示和定位的工具提示和弹出框（还需要 Popper）

重要全局变量

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

HTML5 doctype

Bootstrap 需要使用 HTML5 doctype。没有它，你会看到一些时髦和不完整的造型。

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

Viewport meta

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

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

您可以在 快速入门 中看到此操作的示例。

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 and explore our GitHub Discussions.
  • 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.

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