快速上手 · Bootstrap 6.0 中文文档

只需通过使用 CDN 引入我们已准备好用于生产环境的 CSS 和 JavaScript，无需任何构建步骤，几秒内即可开始使用 Bootstrap。CDN 提供 Bootstrap 代码库的副本，你只需做极少的代码修改，就能在任何环境中使用。

在线演示

已经熟悉如何搭建 HTML 页面？可以先照着下面的步骤做完，或直接查看安装 Bootstrap与本地示例库。

步骤

在项目根目录新建 index.html 文件。同时加入 <meta name="viewport"> 标签，以确保在移动设备上具有正确的响应式行为。

HTML

          <!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>

引入 Bootstrap 的 CSS 和 JS。把 <link> 标签放在 <head> 中引入 CSS，把 JavaScript 包（包含用于定位菜单、弹出框和工具提示的 Floating UI，以及用于日期选择器的 Vanilla Calendar Pro）的 <script> 标签放在 </body> 结束标签之前。详细了解我们的 CDN 链接。

HTML

          <!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/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>

你也可以通过 import map 单独引入 Floating UI、Vanilla Calendar Pro和我们的 JS。如果不打算使用菜单、弹出框或工具提示，可以不引入 Floating UI 以节省一些字节。如果不打算使用日期选择器，可以省略 Vanilla Calendar Pro。

HTML

          <script type="importmap">
{
  "imports": {
    "@floating-ui/dom": "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.6/dist/floating-ui.dom.esm.min.js",
    "vanilla-calendar-pro": "https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@3.4.0/index.mjs"
  }
}
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.min.js" integrity="sha384-BJf/nQgxZJU68GxBse97Vdlc8Rh+z9PzzXiS3/BjV+1nQPR7IKn+iJnD3DJvCMaU" crossorigin="anonymous"></script>

Hello, world! 用你惯用的浏览器打开页面，看看 Bootstrap 页面的效果。现在你可以创建自己的布局、添加数十个组件，并使用官方示例，开始用 Bootstrap 构建项目了。

可选字体

Bootstrap 源码默认使用本机字体栈，但我们在托管文档中使用自定义字体，以便在各平台上获得更一致的样式。我们使用 Geist 和 Geist Mono，并建议你在项目中使用相同或类似的字体。

从 Google Fonts 添加 Geist 网络字体。在 Bootstrap 的 CSS 之前，把以下内容添加到 <head> 中：

HTML

          <!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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-B/GM4XqrwHnWXNOWMbloTmrYXZg10cakYGmpfsR/bbzQ6JAJI4ihuyADKLnBgrCe" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-1a/pXj49ZQ1aHEmrJ+gMw1otqoVsYwlEnlD8mIfY2TV03r20Y0CN7uqx1tQogjPL" crossorigin="anonymous"></script>
  </body>
</html>

通过覆盖 Bootstrap 的 CSS 变量应用字体。你可以在 <head> 里的 <style> 标签中设置，也可以在自定义 CSS 文件中设置。
HTML
```
          <style>
  :root {
    --bs-body-font-family: "Geist", system-ui, sans-serif;
    --bs-font-mono: "Geist Mono", ui-monospace, monospace;
  }
</style>
        
```
如果你从 CDN 方式升级为通过包管理器引入 Bootstrap，也可以在自定义 Sass 文件中做同样的设置。

在排版和重置样式中进一步了解 Bootstrap 的排版默认值。