Bootstrap简介

最新推荐文章于 2022-08-18 21:39:46 发布

原创最新推荐文章于 2022-08-18 21:39:46 发布 · 620 阅读

0 ·

CC 4.0 BY-SA版权

Bootstrap中文网：https://www.bootcss.com/

Bootstrap下载

选择Bootstrap4中文文档

点击下图的“下载Bootstrap”

此处，选择下载预编译的css和js文件

Bootstrap简单使用

选择左侧快速入门中的“简介”

CSS 文件

将 Bootstrap 的 CSS 文件以 <link> 标签的形式添加到 <head> 标签中，并放置在所有其它样式表之前就行了。

<link rel="stylesheet" type="text/css"  href="js/bootstrap-4.4.1-dist/css/bootstrap.min.css">

JS文件

Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下 <script> 标签放到页面尾部且在 </body> 标签之前即可起作用。他们之间的顺序是： jQuery 必须排在第一位，然后是 Popper.js，最后是Bootstrap的 JavaScript 插件。

       <script src="js/bootstrap-4.4.1-dist/js/bootstrap.min.js" ></script>
  </body>

Bootstrap 所提供的 bootstrap.bundle.js 和 bootstrap.bundle.min.js 文件中包含了 Popper，但不包含 jQuery。

哪些组件明确的依赖 jQuery、自己的 JS 插件以及 Popper.js？

最基本的模板

请确保你的页面遵循了最新的设计和开发标准。也就是说，使用 HTML5 doctype 并包含 viewport meta 标签以实现正确的响应式行为。

<!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.4.1/dist/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://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.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://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

上面代码是从指定的CDN获取相关的css、js，我们可以根据自己的项目实际需要将下载并解压的bootstrap-4.4.1-dist放到项目里面，然后根据实际情况修改css、js的引入路径。

Bootstrap使用注意事项

HTML5 doctype

Bootstrap 要求使用 HTML5 doctype。如果不使用，你会看到一些奇怪的不完整的样式，但使用之后就不会导致任何错误了。

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

响应式 meta 标签

Bootstrap 天生就是 移动设备优先 的，依照这一策略，我们首先为移动设备优化代码，然后根据需要，基于 CSS 媒体查询来对组件进行缩小或放大。为了确保所有设备能够正确渲染和触摸缩放，请将响应式 viewport meta 标签 添加到 <head> 标签中。

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

Box-sizing

为了能够在 CSS 中直接调整尺寸，我们将全局的 box-sizing 从 content-box 切换为 border-box。这就确保了 padding 不会影响元素最终的宽度计算，但是这可能会导致第三方软件出现问题，例如 Google 地图和 Google 自定义搜索引擎。

虽然需要覆盖这一设置的情况极少，但是需要重置时，请使用以下代码：

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

Popper

Popper.js 官网 https://popper.js.org/

如下图，选择DOCUMENTATION