Bootstrap 4 入门

Bootstrap 是什么?

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。它支持 Sass 变量和 mixins、响应式网格系统、大量的预建组件和强大的 JavaScript 插件，助你快速设计和自定义响应式、移动设备优先的站点。
Bootstrap 使您能够轻松创建响应式网页设计

什么是响应式网页设计

响应式网页设计是指创建网页可以自动调整，使其在所有设备上看起来都很好，从小型手机到大型台式机。

Bootstrap 4 实例

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
<p>调整这个响应页面的大小，看看效果！</p>
</div>

<div class="container">
<div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
</div>
</div>

亲自试一试 »

Bootstrap 3 与 Bootstrap 4

Bootstrap 4 是 Bootstrap 的最新版本，与 Bootstrap 3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。

Bootstrap 4 支持所有主要浏览器和平台的最新稳定版本。但是不支持 Internet Explorer 9 及以下版本。

如果您需要IE8-9支持，请使用 Bootstrap 3. 它是 Bootstrap 最稳定的版本，对于关键的错误修复和文档更改，团队仍然支持它。然而，不会向 Bootstrap 3 添加新功能。

图标支持: Bootstrap 4 不支持 BS3 图标。请改用 Font-Awesome 或其他图标库。

为什么使用 Bootstrap?

Bootstrap 的优点:

容易上手:只要对 HTML 和 CSS 有基本了解的人都可以很快速的使用 Bootstrap。
响应式设计:Bootstrap 可以根据不同平台（手机、平板电脑和台式机）进行调整。
移动优先:在 Bootstrap 中，自适应移动端是框架的核心部分。
浏览器兼容性:Bootstrap 4 兼容所有主流浏览器（Chrome、Firefox、Internet Explorer 10+,Edge、Safari 和 Opera）。如果您需要支持 IE9 及以下版本，请使用 Bootstrap3。

创建第一个 Bootstrap 4 页面

1. 添加 HTML5 doctype

Bootstrap 4 要求使用 HTML5 文件类型，所以需要添加 HTML5 doctype 声明。

HTML5 doctype 在文档头部声明，并设置对应编码:

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

2. Bootstrap 4 移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 <head> 之中添加 <viewport meta> 标签，如下所示:

width=device-width 表示宽度是设备屏幕的宽度。

initial-scale=1 表示初始的缩放比例。

shrink-to-fit=no 自动适应手机屏幕的宽度。

3. 容器类

Bootstrap 4 需要一个容器元素来包裹网站的内容。

我们可以使用以下两个容器类:

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

.container

.container-fluid

两个 Bootstrap 4 页面实例

.container 实例 (带有响应固定宽度容器)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3ccoo.com/lib/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://www.w3ccoo.com/lib/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h1>我的第一个 Bootstrap 页面</h1>
<p>This is some text.</p>
</div>

</body>
</html>

亲自试一试 »

.container-fluid 实例（带有全宽度容器）

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3ccoo.com/lib/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://www.w3ccoo.com/lib/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<h1>我的第一个 Bootstrap 页面</h1>
<p>This is some text.</p>
</div>

</body>
</html>

亲自试一试 »