Skip to main content Skip to docs navigation
View on GitHub

Introduction介绍

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.使用Bootstrap开始吧，它是世界上最流行的用于构建响应性、移动优先站点的框架，带有JSDeliver和模板起始页。

On this page本页内容

Quick start快速启动

Looking to quickly add Bootstrap to your project? 希望快速将Bootstrap添加到您的项目中吗？Use jsDelivr, a free open source CDN. 使用JSDeliver，一个免费的开源CDN。Using a package manager or need to download the source files? 使用软件包管理器或需要下载源文件？Head to the downloads page.转到下载页面。

CSS

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.将样式表<link>复制粘贴到你的<head>中，在所有其它样式表的前面，以加载我们的CSS。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

JS

Many of our components require the use of JavaScript to function. 我们的许多组件都需要使用JavaScript才能正常工作。Specifically, they require our own JavaScript plugins and Popper. 具体来说，它们需要我们自己的JavaScript插件和Popper。Place one of the following <script>s near the end of your pages, right before the closing </body> tag, to enable them.将以下<script>之一放到页面末尾附近，就在结束</body>标记之前，以启用它们。

Bundle捆绑版

Include every Bootstrap JavaScript plugin and dependency with one of our two bundles. 将每个BootstrapJavaScript插件和依赖项包含在我们的两个捆绑包中。Both bootstrap.bundle.js and bootstrap.bundle.min.js include Popper for our tooltips and popovers. bootstrap.bundle.js和bootstrap.bundle.min.js都包含用于工具提示和弹出窗口的Popper。For more information about what’s included in Bootstrap, please see our contents section.有关Bootstrap中包含的内容的更多信息，请参阅我们的内容部分。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

Separate独立版

If you decide to go with the separate scripts solution, Popper must come first (if you’re using tooltips or popovers), and then our JavaScript plugins.如果您决定使用单独的脚本解决方案，Popper必须首先出现（如果您使用的是工具提示或弹出窗口），然后是我们的JavaScript插件。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>

Modules模块

If you use <script type="module">, please refer to our using Bootstrap as a module section.如果你使用了<script type="module">，请参阅我们的以模块的形式使用Bootstrap。

Components组件

Curious which components explicitly require our JavaScript and Popper? 好奇哪些组件明确需要我们的JavaScript和Popper？Click the show components link below. 单击下面的“显示组件”链接。If you’re at all unsure about the general page structure, keep reading for an example page template.如果您对一般页面结构没有把握，请继续阅读示例页面模板。

Show components requiring JavaScript显示需要JavaScript的组件
  • Alerts for dismissing用于撤销的通知
  • Buttons for toggling states and checkbox/radio functionality用于切换状态和复选框/单选功能的按钮
  • Carousel for all slide behaviors, controls, and indicators所有幻灯片行为、控件和指示器的旋转木马
  • Collapse for toggling visibility of content折叠以切换内容的可见性
  • Dropdowns for displaying and positioning (also requires Popper)用于显示和定位的下拉列表（也需要Popper）
  • Modals for displaying, positioning, and scroll behavior用于显示、定位和滚动行为的模态
  • Navbar for extending our Collapse plugin to implement responsive behaviorNavbar用于扩展折叠插件以实现响应行为
  • Toasts for displaying and dismissing用于展示和撤销的提示
  • Tooltips and popovers for displaying and positioning (also requires Popper)用于显示和定位的工具提示和弹出框（也需要Popper）
  • Scrollspy for scroll behavior and navigation updatesScrollspy用于滚动行为和导航更新

Starter template初学者模板

Be sure to have your pages set up with the latest design and development standards. 确保您的页面设置了最新的设计和开发标准。That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. 这意味着使用HTML5 doctype并包含一个viewport元标记，以实现正确的响应行为。Put it all together and your pages should look like this:将所有内容放在一起，您的页面应如下所示：

<!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.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" 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.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
    -->
</body>
</html>

For next steps, visit the Layout docs or our official examples to start laying out your site’s content and components.对于下一步，请访问布局文档或我们的官方示例，以开始布局站点的内容和组件。

Important globals重要全局

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Bootstrap采用了一些重要的全局样式和设置，您在使用它时需要注意这些样式和设置，所有这些几乎都专门用于跨浏览器样式的规范化。Let’s dive in.让我们深入探索吧。

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Bootstrap需要使用HTML5 doctype。Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.没有它，你会看到一些时髦的不完整的样式，但包括它应该不会引起任何明显的打嗝。

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

Responsive meta tag响应视口元标记

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. Bootstrap是移动端优先开发的，在这一策略中，我们首先优化移动设备的代码，然后根据需要使用CSS媒体查询扩展组件。To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.为确保所有设备的正确渲染和触摸缩放，请将响应视口元标记添加到<head>。

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

You can see an example of this in action in the starter template.您可以在初学者模板中看到这方面的一个示例。

Box-sizing盒尺寸

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. 为了在CSS中更直观地调整大小，我们将全局box-sizing值从content-box切换到border-box。This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.这确保了padding不会影响元素的最终计算宽度，但它可能会导致某些第三方软件（如谷歌地图和谷歌自定义搜索引擎）出现问题。

On the rare occasion you need to override it, use something like the following:在极少数情况下，您需要覆盖它，请使用以下内容：

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.在上面的代码段中，嵌套元素（包括通过::before和::after生成的内容）都将继承某些小部件的指定框大小。

Learn more about box model and sizing at CSS Tricks.了解更多关于盒模型和大小的CSS技巧。

Reboot重启动

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.为了改进跨浏览器呈现，我们使用重启动来纠正浏览器和设备之间的不一致，同时对常见HTML元素进行稍微有点自以为是的重置。

Community社区

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.了解Bootstrap的最新发展，并利用这些有用的资源与社区联系。

  • Read and subscribe to The Official Bootstrap Blog.阅读并订阅官方的Bootstrap博客。
  • Join the official Slack room.加入官方休闲室。
  • Chat with fellow Bootstrappers in IRC. 与IRC中的其他Bootstrap开发员们聊天。On the irc.libera.chat server, in the #bootstrap channel.在irc.libera.chat服务器上，#bootstrap频道中。
  • Implementation help may be found at Stack Overflow (tagged bootstrap-5).可以在栈溢出（标记为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.开发人员应在通过npm或类似交付机制分发时修改或添加bootstrap功能的包上使用关键字bootstrap，以实现最大的可发现性。

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.您还可以在Twitter上关注@getbootstrap，获取最新的八卦和精彩的音乐视频。