Bootstrap介绍

Bootstrap是一个功能强大、功能丰富的前端工具包。在几分钟内构建从原型到生产环境的任何东西。

On this page

快速开始

通过CDN包括Bootstrap的生产就绪的CSS和JavaScript，而无需任何构建步骤。通过Bootstrap CodePen演示查看效果。

在你项目根目录创建一个新文件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>

引用Bootstrap’s CSS and JS。 在头部<head>标签里引用 <link> css样式, 同时在在 </body>结束前引用JavaScript<script> 标签。(包含定位，下拉，提示弹窗口等组件) . 可以使用 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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
  </body>
</html>

您还可以单独包含Popper和JS。如果您不打算使用下拉菜单、弹出窗口或工具提示，请通过不包括Popper来节省大小。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>

Hello, world! 在您选择的浏览器中打开页面以查看引导页面。现在，您可以通过创建自己的布局、添加数十个组件并利用我们的官方示例，开始使用Bootstrap进行构建。

引用CDN

作为参考，以下是我们的主要CDN链接。

Description	URL
CSS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js`

您还可以使用CDN获取目录页面中列出的其他版本链接。

下一步

阅读更多有关Bootstrap使用的一些全局环境设置的信息。
阅读Bootstrap中包含的内容，以及下面需要JavaScript组件列表。
需要多的功能吗？考虑通过包管理器包含源文件来使用Bootstrap进行构建。
是否希望将Bootstrap用作<script type="module">模块？请参考使用Bootstrap模块化使用部分。

JS 组件

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

显示需要的JavaScript组件

Alerts警告提醒
用于切换状态和复选框/单选功能的按钮
Carousel轮播，用于所有幻灯片效果，控件和指示器
折叠以切换内容的可见性
用于显示和定位的下拉菜单（也需要Popper）
显示，定位和滚动行为的模式
为响应式而生的导航展开侧边栏插件
为不同的内容导航切换插件
侧边栏显示定位及滚动
Scrollspy用于滚动监听和导航更新
Toasts显示提示
Tooltips and popovers显示文本提示

Important globals

Bootstrap employs a handful of important global styles and settings, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 文档类型

Bootstrap要求使用HTML5文档类型。推荐规范如下，<html lang="en">，中文版改为<html lang="zh-CN">

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

响应式meta标签

Bootstrap是移动优先适配开发的，这种策略首先优化移动设备的代码，然后根据需要使用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元素提供稍微更明确的重置。

社区

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

Read and subscribe to The Official Bootstrap Blog.
Ask and explore our GitHub Discussions.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.