在GitHub上查看

简介

通过jsDelivr和模板启动器页面开始使用全球最流行的用于构建响应式，移动优先网站的框架Bootstrap。

本页导航↓

快速部署

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

1行 CSS

使用Bootstrap 非常方便，只要引用一行CSS即可！

复制下面的 <link> 样式表粘贴到网页 <head> 里面，并放在其它CSS文件之前：

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

JS引用

部份组件依赖于JavaScript，其中包括 Popper.js, 以及系统内置 JavaScript 插件. 建议将 <script> 的结束放在页面的 </body> 之前以符合新移动WEB规范，并遵循下面代码的先后顺序。

捆绑

在两个捆绑软件之一中包括每个Bootstrap JavaScript插件和依赖项。bootstrap.bundle.js和bootstrap.bundle.min.js都包含在Popper中作为工具提示和弹出窗口。有关Bootstrap中包含的内容和更多信息，请查看内容部分。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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.1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

模块

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

组件

想知道哪些组件需要JavaScript和Popper吗?点击下面的链接。如果你不确定页面的一般结构，可以继续阅读示例模板。

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

Hello, World!

使用H5标准构建一个最精简的模板，推荐规范如下（其中第2行在英文站点中使用<html lang="en">，中文版改为<html lang="zh-CN">以符合中文用户-译者注）: 

<!doctype html>
<html lang="zh-CN">
  <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.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a href="" class="btn btn-primary">您好，Bootstrap 5！</a>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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.1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

拷贝上面代码，然后按照本文档的 布局 、 示例 来构建你的组件和内容.

全局变量

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

HTML5 doctype头部规范

HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真（中国码农往往直接抄国外站点将lang写成en-正确中文站点应该用zh-CN，这些小细节也要注意，以免贻笑大方-译者注)。

<!doctype html>
<html lang="zh-CN">
...
</html>

响应式meta标签

Bootstrap是mobile first开发的，这种策略首先优化移动设备的代码，然后根据需要使用CSS媒体查询扩展组件。为确保所有设备都能正确渲染和触摸缩放，请将响应viewport meta标记添加到<head>中。

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

你可以在入门模板中看到一个实际的示例。

尺寸大小

为了在CSS中更直观地调整大小，我们将全局的box-sizing值从content-box切换到border-box。这确保了填充不会影响元素的最终计算宽度，但它可能会导致一些第三方软件的问题，如谷歌Maps和谷歌 Custom Search Engine。

对此你可以使用下面的方法来重置盒尺寸:

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

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

在CSS技巧中了解更多关于 框模型和大小调整的知识。

重新启动

为了改进跨浏览器的呈现，我们使用“重新启动”来纠正浏览器和设备之间的不一致，同时对常见的HTML元素提供稍微更明确的重置。

社区支持

这是一些官方推荐的社区支持(境外站点可能会出现无法访问）。

你还可以在Twitter上关注@getbootstrap，以获取最新的八卦和超赞的音乐视频。