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

快速部署

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

1行 CSS

使用Bootstrap 非常方便,只要引用一行CSS即可!

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/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.jsbootstrap.bundle.min.js都包含在Popper中作为工具提示和弹出窗口。有关Bootstrap中包含的内容和更多信息,请查看内容部分。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/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-beta3/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.0-beta3/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.0-beta3/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-beta3/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,以获取最新的八卦和超赞的音乐视频。