Bootstrap 安装使用

Bootstrap CDN

如果您不想自己下载并托管 Bootstrap，则可以从 CDN（内容交付网络）中添加它。

Staticfile 为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。您还必须包括 jQuery：

// 新 Bootstrap 核心 CSS 文件 
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
// jQuery文件。务必在bootstrap.min.js 之前引入
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
// bootstrap 的弹窗、提示、下拉菜单，需要 popper.min.js 才完美定位
<script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
// 最新的 Bootstrap 核心 JavaScript 文件 
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

注意：Bootstrap 将 jQuery 和 Popper.js 用于 JavaScript 组件（如模式，工具提示，弹出窗口等）。但是，如果仅使用 Bootstrap 的 CSS 部分，则不需要它们。

Bootstrap 下载

如果要自己下载并托管 Bootstrap，请访问 https://getbootstrap.com/，然后按照其中的说明进行操作。

使用 Bootstrap 创建第一个网页

1. 添加HTML5文档类型

Bootstrap 使用需要 HTML5 文档类型的 HTML 元素和 CSS 属性。

始终在页面开头添加 HTML5 文档类型，以及 lang 属性和正确的字符集：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
   </head>
</html>

2. Bootstrap 是移动优先的

Bootstrap 旨在响应移动设备。移动优先样式是核心框架的一部分。

为了确保正确渲染和触摸缩放，请在 <head> 元素内添加以下 >meta> 标签：

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

width = device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

initial-scale = 1 部分设置浏览器首次加载页面时的初始缩放级别。

3. 容器选择

Bootstrap 还需要包含元素来包装站点内容。

有两种容器类可供选择：

.container 类提供了一个响应式固定宽度容器
.container-fluid 类提供了一个全宽度的容器，横跨视口的整个宽度

.container

.container-fluid

两个基本的 Bootstrap 页面

以下示例显示了基本 Bootstrap 页面的代码（带有响应的固定宽度容器）：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>蝴蝶教程(jc2182.com)</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container">
      <h1>我是带有响应的固定宽度容器的bootstrap页面</h1>
      <p>这个是一个段落</p>
   </div>
</body>
</html>

尝试一下

以下示例显示基本 Bootstrap 页面（带有全角容器）的代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <title>蝴蝶教程(jc2182.com)</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
   <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/popper.js/1.16.0/umd/popper.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
   <div class="container-fluid">
      <h1>我是带有全角容器bootstrap页面</h1>
      <p>这个是一个段落</p>
   </div>
</body>
</html>