bootstrap4简介

Bootstrap4是一套用于HTML、CSS、JavaScript的开源工具集，它简洁灵活，使得web开发更加的便捷。Bootstrap4是Bootstrap最新版本，与Bootstrap3相比拥有更多具体的类并且把一些有关部分变成相关组件。需要注意的是，Bootstrap4放弃了IE8以及iOS6的支持，现在只支持IE9以上以及iOS7以上版本的浏览器。

我们可以在bootstrap官网上下载相关资源：

Bootstrap · The most popular HTML, CSS, and JS library in the world.

创建页面

首先我们需要安装bootstrap4，可以使用bootstrap4 CDN或者从官网下载bootstrap4。如果是使用bootstrap4 CDN，我们一般需要引入四个文件：1.bootstrap4核心css文件 2.jQuery文件(必须在bootstrap4核心js文件之前引入) 3.bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了popper.min.js 4.bootstrap4核心JavaScript文件。

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

当然，上述语句我们是基于连网条件下进行的。如果我们希望在非连网条件下也能使用，就可以进入bootstrap官网下载相关文件包然后按照上述顺序引入文件就可以了。

做好这些之后我们就可以正式创建一个bootstrap4页面

添加html5 doctype声明

bootstrap要求使用html5文件类型，故需要添加html5 doctype声明。

基本声明格式：

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

bootstrap有一个特点是移动设备优先，故为了确保适当的绘制和触屏缩放，需要在网页的head中添加viewport meta标签

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

上述标签中，各个语句含义如下：

width=device-width：宽度设置为设备屏幕宽度

initial-scale=1.0：初始的缩放比例为1.0

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

使用容器元素包裹网站内容

在bootstrap中我们可以使用如下两个容器类来包裹网站内容：

.container：用于固定宽度并支持响应式布局的容器

.container-fluid：用于100%宽度，占据全部视口的容器

我们可以看看二者的区别，下面我们展示了一个完整的bootstrap4页面撰写步骤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap4页面创建</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile/popper.js/1.15.0/umd/popper.min.js"></script>
    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
    div{
        background-color: pink;
    }
</style>
<body>
    <!-- .container类:用于固定宽度并支持响应式布局的容器 -->
    <div class="container">  
        <h1>.container类</h1>
    </div>

    <!-- .container-fluid类:用于100% 宽度,占据全部视口的容器 -->
    <div class="container-fluid">
        <h1>.container-fluid类</h1>
    </div>
</body>
</html>

其实一个简单的基本网页只需要引入bootstrap4核心css文件就可以了，因为没有其他的特殊效果和动作需要实现。如果还需要实现更多效果和动作，我们就需要引入四个文件。

网页渲染效果：

更多推荐

bootstrap4--概述与页面创建