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’s CSS 和 JS。 在 <head> 中放置 <link> 标签，用于 CSS；在 <script> 标签中放置 <script> 标签，用于 JavaScript 包（包括用于定位下拉菜单、弹出窗口和工具提示的 Popper）。进一步了解我们的 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.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Y3IQOsa3niuvpqakr8NIT3EETRv0G6tFumi3detLTSYuXBc6XxbPEt9sOg6OcLgO" crossorigin="anonymous">
     </head>
     <body>
       <h1>Hello, world!</h1>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-r5kRSTMtRNVfwqCvIzNkemSRRqsQB3BJN5m7GjomHUT+81f70U37lfRUk9tJSSQO" crossorigin="anonymous"></script>
     </body>
   </html>
   

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

   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-BRzTbsDillcZ9cJS3keZSZIggjuMr6yO0NydiQOk5xguSoFlRpj4FALnfgmFMjai" crossorigin="anonymous"></script>
   

3. Hello, world! 在您选择的浏览器中打开该页面，即可看到您的 Bootstrapped 页面。现在，您可以开始使用 Bootstrap 创建自己的layout，添加数十个组件，并使用我们的官方示例。

CDN 链接

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

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

Next steps

• Read a bit more about some important global environment settings that Bootstrap utilizes.
• Read about what’s included in Bootstrap in our contents section and the list of components that require JavaScript below.
• Need a little more power? Consider building with Bootstrap by including the source files via package manager.
• Looking to use Bootstrap as a module with <script type="module">? Please refer to our using Bootstrap as a module section.

JS components

Curious which components explicitly require our JavaScript and Popper? If you’re at all unsure about the general page structure, keep reading for an example page template.

• 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)
• Modals for displaying, positioning, and scroll behavior
• Navbar for extending our Collapse and Offcanvas plugins to implement responsive behaviors
• Navs with the Tab plugin for toggling content panes
• Offcanvases for displaying, positioning, and scroll behavior
• Scrollspy for scroll behavior and navigation updates
• Toasts for displaying and dismissing
• Tooltips and popovers for displaying and positioning (also requires Popper)

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 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky and incomplete styling.

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

Viewport meta

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. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

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

You can see an example of this in action in the quick start.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to 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.

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.

Learn more about box model and sizing at CSS Tricks.

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.

Community

Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.

• Read and subscribe to The Official Bootstrap Blog.
• Ask questions and explore our GitHub Discussions.
• Discuss, ask questions, and more on the community Discord or Bootstrap subreddit.
• 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.