跳到主要内容 跳到文档导航
Check
in English

开始使用 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。<link>标签放在<head>我们的 CSS 中,并将<script>我们的 JavaScript 包的标签(包括用于定位下拉菜单、弹出器和工具提示的 Popper)放在关闭之前</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
      </head>
      <body>
        <h1>Hello, world!</h1>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
      </body>
    </html>
    

    您也可以分别包含Popper和我们的 JS。如果您不打算使用下拉菜单、弹出框或工具提示,请通过不包括 Popper 来节省一些 KB。

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    
  3. 你好世界!在您选择的浏览器中打开该页面以查看您的 Bootstrapped 页面。现在您可以通过创建自己的布局、添加数十个组件并利用我们的官方示例来开始使用 Bootstrap 进行构建。

作为参考,这里是我们的主要 CDN 链接。

描述 网址
CSS https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
JS https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

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

下一步

JS 组件

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

显示需要 JavaScript 的组件
  • 解雇提醒
  • 用于切换状态和复选框/收音机功能的按钮
  • 所有幻灯片行为、控件和指示器的轮播
  • 折叠以切换内容的可见性
  • 用于显示和定位的下拉菜单(也需要Popper
  • 用于显示、定位和滚动行为的模式
  • 用于扩展我们的 Collapse 和 Offcanvas 插件以实现响应行为的导航栏
  • 带有用于切换内容窗格的 Tab 插件的导航
  • 用于显示、定位和滚动行为的画布
  • 用于滚动行为和导航更新的 Scrollspy
  • 用于显示和关闭的祝酒词
  • 用于显示和定位的工具提示和弹出框(也需要Popper

重要的全局变量

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

HTML5 文档类型

Bootstrap 需要使用 HTML5 文档类型。没有它,您会看到一些时髦且不完整的样式。

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

响应式元标记

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

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

您可以在快速入门中看到一个这样的例子。

盒子尺寸

为了在 CSS 中更直接地调整大小,我们将全局box-sizing值从切换content-boxborder-box. 这确保padding不会影响元素的最终计算宽度,但可能会导致某些第三方软件出现问题,例如 Google Maps 和 Google Custom Search Engine。

在极少数情况下您需要覆盖它,请使用以下内容:

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

使用上面的代码片段,嵌套元素——包括通过::beforeand生成的内容::after——都将继承box-sizing为 that指定的内容.selector-for-some-widget

在 CSS Tricks了解更多关于盒子模型和大小的信息。

重启

为了改进跨浏览器呈现,我们使用Reboot来纠正跨浏览器和设备的不一致,同时对常见的 HTML 元素提供稍微更自以为是的重置。

社区

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

  • 阅读并订阅官方 Bootstrap 博客
  • 询问并探索我们的 GitHub 讨论
  • 与 IRC 中的 Bootstrapper 同事聊天。在irc.libera.chat服务器上,在#bootstrap频道中。
  • 可以在 Stack Overflow 上找到实现帮助(标记为bootstrap-5)。
  • 当通过npm或类似的交付机制bootstrap分发时,开发人员应在修改或添加到 Bootstrap 功能的包上使用关键字,以获得最大的可发现性。

您还可以在 Twitter 上关注 @getbootstrap 以获取最新的八卦和精彩的音乐视频。