Skip to main content Skip to docs navigation

引言

开始使用Bootstrap，它是构建响应式、移动优先网站的世界上最流行的框架。

On this page

入门

想要快速将Bootstrap添加到您的项目中？可以使用jsDelivr（一个免费的CDN），使用包管理器，或者需要下载源文件？ 前往下载页面。

CSS

复制粘贴样式表<link>到您的<head>中所有其它样式表之前。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JS

我们的许多组件都需要使用 JavaScript 才能运行。 具体来说，它们需要我们自己的 JavaScript插件和Popper。 将以下<script>标签之一放置在页面末尾附近，在</body>关闭标签之前。

Bundle

我们的两个包：bootstrap.bundle.js和bootstrap.bundle.min.js，其中的任何一个都包含Bootstrap的JavaScript插件和依赖项。它们包含了tooltips和popovers需要使用的Popper。 更多Bootstrap包含的内容，请查看内容章节。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

分开引入

如果您想分开引入，您需要先引入Popper(如果您使用了tooltips或者popovers)，然后再引入Bootstrap插件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

模块Modules

如果您使用了<script type="module">, 请参数将Bootsrap作为一个模块使用章节

组件

如果您不确定那些Bootstrap组件明确需要引入JavaScript和Popper？ 单击下面的显示组件链接。 如果您完全不知道页面结构，请继续阅读示例页面模板。

显示需要JavaScript的组件
  • Alerts组件的关闭功能
  • Buttons切换状态功能和复选框/单选框(checkbox/radio)功能
  • Carousel组件的滑动行为，控件，和提示器
  • Collapse组件切换内容显示
  • Dropdowns组件的显示和定位(同样也需要Popper)
  • Modals组件的显示、定位、和滚动行为
  • Navbar组件扩展了Collapse插件实现响应式行为
  • Offcanvases的显示、定位、和滚动行为
  • Toasts的显示和关闭
  • Tooltips和Popovers组件的显示和定位(同样也需要Popper)
  • Scrollspy组件的滚动行为和导航更新

入门模板

请务必使用最新的设计和开发标准设置您的页面。 应使用HTML5文档类型；并包含一个name属性为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.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 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.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

下一步, 您可以查看布局或者官方模板以开始制作您的网站。

重要的全局样式和设置

Bootstrap采用了一些重要的全局样式和设置，它们是规范的跨浏览器样式，下面我们将深入了解它们。

HTML5文档类型

Bootstrap需要使用HTML5文档类型，没有它，一些时髦的样式将不会生效。 

<!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的值不会影响元素的最终计算宽度，但它可能会导致某些第三方软件出现问题，例如谷歌地图和谷歌自定义搜索引擎。

在极少数情况下您需要覆盖它，请使用以下样式：

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

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

学习更多CSS盒子模型和大小设置技巧。

样式重置(Reboot)

为了改进跨浏览器呈现，我们使用样式重置来纠正跨浏览器和设备的不一致，同时对常见的HTML元素提供重置。 For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

社区

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

  • 订阅Bootstrap官方博客。
  • 加入官方休闲室。
  • 与IRC上的Bootstrapper聊天，在irc.libera.chat服务器上，的#bootstrap频道。
  • 可以在Stack Overflow上获得帮助(标签bootstrap-5)。
  • 当通过npm或类似的机制分发时，开发人员应在修改或添加到Bootstrap上的包使用关键字bootstrap以获得最大的可发现性。

您也要以关注@getbootstrap on Twitter获取最新的资讯和精彩的视频。