跳到主题内容 跳到文档导航栏

简介

利用jsDelivr和一个最简模板快速上手 Bootstrap。Bootstrap 是全球最流行的前端框架，用于构建响应式、移动设备优先的 WEB站点。

在本页面

快速入门

想快速将Bootstrap添加到您的项目中？使用免费开放源CDN jsDelivr？或使用包管理器还是需要下载源文件？前往下载页面 。

CSS

将 Bootstrap 的 CSS 文件以 <link> 标签的形式添加到 <head>标签中，并放置在所有其它样式表之前。 

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

JS

Bootstrap5的许多组件都需要使用JavaScript才能起作用。具体来说，它们需要我们自己的JavaScript插件和Popper。 将以下 <script> 标签放到页面尾部且在 <body> 标签之前即可起作用。

捆绑

Bootstrap5将JavaScript插件和依赖项包含在一个包中。 bootstrap.bundle.js 和 bootstrap.bundle.min.js 都包含了为我们提供工具提示和弹出窗口的Popper。 有关Bootstrap中包含了哪些内容，请参见我们的内容部分。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

拆分

如果您决定使用单独的脚本解决方案，则必须首先使用Popper（如果使用的是工具提示或弹出窗口），然后是我们的JavaScript插件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

模块

如果您使用<script type="module">，请参阅使用Bootstrap作为模块部分。

组件

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

显示依赖 JavaScript 的组件列表
  • 解除警告
  • 用于切换状态和复选框/单选功能的按钮
  • 轮播，用于所有幻灯片行为，控件和指示器
  • 折叠以切换内容的可见性
  • 用于显示和定位的下拉菜单 (也需要 Popper)
  • 显示，定位和滚动行为的模式
  • 导航栏，用于扩展我们的Collapse插件以实现响应行为
  • Toasts 的显示和解除
  • 用于显示和定位的工具提示和弹出窗口(也需要 Popper)
  • Scrollspy用于滚动行为和导航更新

入门模板

确保您的页面遵循最新的设计和开发标准。这意味着使用HTML5文档类型，并包含viewport meta 标签以实现正确的响应行为。放在一起，您的页面应如下所示：

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

以上就是一个完整的页面所需要的全部内容。请参阅 布局章节或官方示例 ，并尝试自己动手添加组件和内容构建一个网站

重要的全局样式

Bootstrap使用了一些重要的全局样式和设置，使用它们时您需要了解它们，几乎所有这些都专门针对跨浏览器样式的标准化。

HTML5 doctype

Bootstrap 要求使用 HTML5 doctype。如果不使用，你会看到一些奇怪的不完整的样式，但使用之后就不会导致任何错误了。

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

响应式 meta 标签

Bootstrap 天生就是 移动设备优先 的，依照这一策略，我们首先为移动设备优化代码，然后根据需要，基于 CSS 媒体查询来对组件进行缩小或放大。为了确保所有设备能够正确渲染和触摸缩放，请将响应式 viewport meta 标签 添加到 <head>标签中。 

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

你可以在 入门模板中看到这个标签的使用示例。.

Box-sizing

为了更简单地调整CSS大小，我们将全局box-sizing值从切换content-box为border-box。这样可以确保padding不会影响元素的最终计算宽度，但是会导致某些第三方软件（例如Google Maps和Google Custom Search Engine）出现问题。

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

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

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

在CSS Tricks上了解有关 盒模型和 box-sizing的更多信息。

Reboot

为了提升跨浏览的渲染效果，我们使用了 Reboot 用以修正跨浏览器和设备的不一致性，并且对常用 HTML元素设置了我们认为最合适的预设样式。

Community

通过一下的资源，掌握最新的Bootstrap开发信息，并与社区联系。

  • 在Twitter上关注 @getbootstrap.
  • 阅读并订阅The Official Bootstrap Blog.
  • Join the official Slack room.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-5).
  • Developers should use the keyword bootstrap on packages which 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.