介绍

通过BootstrapCDN和模板启动页面开始使用Bootstrap(全球最流行的用于构建响应式,移动优先网站的框架)的入门。

快速开始

想要快速将Bootstrap添加到您的项目中? 使用BootstrapCDN(由StackPath的人们免费提供)。 使用包管理器还是需要下载源文件? [转到下载页面]Head to the downloads page.

CSS

在将所有其他样式表加载到CSS之前,将样式表复制粘贴到您的<head>中。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

JS

我们的许多组件都需要使用JavaScript才能起作用。 具体来说,它们需要jQuery, Popper.js和我们自己的JavaScript插件。 将以下<script>s放在页面末尾,紧接在</ body>标记之前,以启用它们。 jQuery必须首先出现,然后是Popper.js,然后是我们的JavaScript插件。

我们使用jQuery’s slim build,但也支持完整版本。

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

好奇哪些组件明确需要jQuery,我们的JS和Popper.js? 单击下面的显示组件链接。 如果您不确定总体页面结构,请继续阅读示例页面模板。

我们的bootstrap.bundle.jsbootstrap.bundle.min.js包含 Popper,但不包含jQuery 。 有关Bootstrap中包含的内容的更多信息,请参见我们的contents 部分。

Show components requiring 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.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

入门模板

确保您的页面设置了最新的设计和开发标准。 这意味着使用HTML5文档类型,并包括视口元标记以实现适当的响应行为。 放在一起,您的页面应如下所示:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

这就是您总体页面要求所需要的。 访问Layout docsour official examples 开始布置您网站的内容和组件。

重要的全局设置(Important globals)

Bootstrap使用了一些重要的全局样式和设置,使用它们时您需要了解它们,而所有这些几乎都专门针对跨浏览器样式的* normalization *。 让我们潜入进去。

HTML5文档类型

Bootstrap需要使用HTML5文档类型。 没有它,您会看到一些时髦的不完整样式,但是包括它不会引起任何可观的困扰。

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

响应式元标记

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

您可以在starter template中看到此示例的实际应用。

装箱尺寸(Box-sizing)

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

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

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

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

了解更多有关信息box model and sizing at CSS Tricks.

重启

为了改善跨浏览器的呈现,我们使用Reboot 来纠正浏览器和设备之间的不一致,同时提供一些更合理的重置常见的HTML元素。

社区

掌握最新的Bootstrap开发信息,并通过这些有用的资源与社区联系。

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Join the official Slack room.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-4).
  • Developers should use the keyword bootstrap on packages which modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

您也可以关注@getbootstrap on Twitter,以获取最新的八卦和超赞的音乐视频。