Bootstrap 4.6 快速使用方法

开始使用 Bootstrap,它是世界上最流行的框架,用于构建响应式、移动优先的网站,带有 jsDelivr 和模板起始页。

1. 快速开始

想要快速将 Bootstrap 添加到您的项目中?使用 jsDelivr,一个免费的开源 CDN。使用包管理器还是需要下载源文件?前往下载页面

2. 添加css

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

3. 添加js

我们的许多组件都需要使用 JavaScript 才能运行。具体来说,它们需要jQueryPopper和我们自己的 JavaScript 插件。我们使用jQuery 的 slim build,但也支持完整版。

以下js之一放置在页面末尾附近,就在结束</body>标记之前,以启用它们。jQuery 必须先出现,然后是 Popper,然后是我们的 JavaScript 插件。

添加js可以使用下面两种方法:

方法1:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

方法2 :

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

4. Starter template 一个完整基本模板内容

基本模板组成

<!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://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
    -->
  </body>
</html>

这就是整体页面要求所需的全部内容。访问布局文档我们的官方示例,开始布局您网站的内容和组件。

5. Important globals 重要的全局变量

Bootstrap 采用了一些重要的全局样式和设置,您在使用它时需要注意它们,所有这些几乎都专门用于跨浏览器样式的规范化。让我们潜入水中。

6. HTML5 doctype HTML5 文档类型

Bootstrap 需要使用 HTML5 文档类型。没有它,您会看到一些时髦的不完整样式,但包括它不应该引起任何严重的问题。

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

7. Responsive meta tag 响应式元标记

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

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

8. Box-sizing 盒子尺寸

为了在 CSS 中更直接地调整大小,我们将全局box-sizing值从切换content-boxborder-box. 这确保padding不会影响元素的最终计算宽度,但可能会导致某些第三方软件出现问题,例如谷歌地图和谷歌自定义搜索引擎。

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

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

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

9. Reboot

为了改进跨浏览器呈现,我们使用Reboot来纠正跨浏览器和设备的不一致,同时对常见的 HTML 元素提供稍微更自以为是的重置。