这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

Bootstrap简介

Bootstrap 来自Twitter, 是目前最受欢迎的前端框架, 它是基于HTML/ CSS和JavaScript的, 它简单灵活, 使得web开发更加快捷.

框架

顾名思义就是一套架构, 它有一套比较完整的网页功能解决方案, 而且控制权在框架本身, 有预制样式库, 组件和插件. 使用者要按照框架所规定的某种规范进行开发.

中文官网: www.bootcss.com/
官网: getbootstrap.com/

优点

标准化的HTML+CSS编码规范提供了一套简洁, 直观, 强悍的组件有自己的生态圈, 不断的更新迭代让开发更简单, 提高了开发效率

Bootstrap版本

2.x.x : 停止维护, 兼容性好, 代码不够简洁, 功能不够完善
3.x.x : 目前使用最多, 稳定, 但是放弃了IE6-IE7. 对IE8支持但是界面效果不好, 偏向用于开发响应式布局或者移动设备优先的web项目
4.x.x : 最新版, 目前还不是很流行

Bootstrap的使用

以它的样式库为例, 使用Bootstrap分为四个步骤:

创建文件夹结构
创建HTML骨架结构
引入相关样式文件
书写内容

1. 创建文件夹结构

2. 创建HTML骨架结构

需要在生成的HTML上添加以下语句:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

要求网站在使用IE浏览器加载的时候, 使用最近的edge版本的内核加载, 为了保证在IE浏览器中能够加载成功

<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->

专门为IE9以下的浏览器设置的一些属性.

第一条用于解决IE9以下浏览器对HTML5新增标签的不识别, 并导致css不起作用的问题
第二条用于解决IE9以下浏览器对css3 Media Query的不识别

** Bootstrap不需要引入normalize.css文件了**

3. 引入相关样式文件

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >

引入Bootstrap压缩版本的文件

4. 书写内容

直接拿Bootstrap预先定义好的样式来使用修改Bootstrap原来的样式, 注意权重问题学好Bootstrap的关键在于它定义了哪些样式, 以及这些样式能实现什么样的效果

Bootstrap布局容器

Bootstrap需要为页面内容和栅格系统包裹一个.container容器, 将来我们想使用布局容器的时候, 只要给它添加一个.container的类就可以了

Bootstrap中提供了两个相似的类:

container类

响应式布局的容器固定宽度
大屏 (>=1200px) 宽度为1170px
中屏 (>=992px) 宽度为970px
小屏 (>=768px) 宽度为750px
超小屏 (100%)

container-fluid类

流式布局容器百分百宽度
占据全部视口 (viewpoint)的容器
适用于制作移动端页面开发

Bootstrap栅格系统 (grid systems)

它是只将页面布局划分成等宽的列, 然后通过列数的定义来模块化页面布局.

Bootstrap提供了一套响应式, 移动设备优先的流式栅格系统, 随着屏幕或视口 (viewpoint) 尺寸的增加, 系统最多自动分成12列.

官网上对于栅格系统的工作原理是这样描述的:

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

栅格系统的使用方法

栅格选项参数

栅格系统用于通过一系列的行与列的组合来创建页面布局, 我们的内容就可以放入这些创建好的布局中

xs - extra small 超小
sm - small 小
md - medium 中等
lg - large 大
行(row)这个类可以去除父容器作用15px的边距
每一列默认有左右15px的padding
如果一行的列数多于12, 会换行显示
如果不满12, 会空余
可以同时为一列指定多个设备的类名, 以便划分不同份数, 例如 class = "col-md-4 col-sm-6"

<!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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 内部添加四列元素 -->
            <div class="col-lg-3 col-md-6">1</div>
            <div class="col-lg-3 col-md-6">2</div>
            <div class="col-lg-3 col-md-6">3</div>
            <div class="col-lg-3 col-md-6">4</div>
        </div>

        <div class="row">
            <!-- 内部添加四列元素 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>

        <div class="row">
            <!-- 如果不满12列, 会空余 -->
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>

        <div class="row">
            <!-- 如果多于12列, 会换行显示 -->
            <div class="col-lg-6">1</div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-2">3</div>
            <div class="col-lg-1">4</div>
        </div>
    </div>
</body>
</html>

效果

大屏幕时:

屏幕缩小时:

再缩小时的部分截图:

栅格系统 - 列嵌套

栅格系统内置的栅格系统将内容再次嵌套, 将一个列内再分成若干列.

示例

在1中进行列嵌套:

首先为列1 添加一个row的类名, 后续步骤就与之前一样了.

<!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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
            background-color: skyblue;
        }
        p {
            border: 1px solid red;
            height: 20px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 列嵌套 -->
            <div class="col-lg-3 row">
                <p class="col-lg-6"></p>
                <p class="col-lg-6"></p>
            </div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>
    </div>
</body>
</html>

栅格系统 - 列偏移

使用 .cl-md-offset-* (md是可以换的) 类可以将列向右编译. 这些类实际上是通过使用 * 选择器为当前元素增加了左侧的边距 (margin)

示例

将2向右移动:

<!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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
            background-color: skyblue;
        }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 列偏移 -->
            <div class="col-lg-4">1</div>
            <div class="col-lg-4 col-lg-offset-4">2</div>
        </div>
    </div>
</body>
</html>

此外, 我们可以利用列偏移为布局提供更多的可能性, 比如可以模仿左浮动, 右浮动, 版心等.

在上面代码的基础上增加一条:

<div class="col-lg-8 col-lg-offset-2">3</div>

栅格系统 - 列排序

通过使用.col-md-push-*往右推和.col-md-pull-*往左拉两个类就可以很容易的改变列 (column) 的顺序.

示例

左右两边元素换位

<!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>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" >
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <style>
        .row div {
            border: 1px solid black;
            height: 50px;
            background-color: skyblue;
        }
       
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 列排序 -->
            <div class="col-lg-4 col-lg-push-8">1</div>
            <div class="col-lg-8 col-lg-pull-4">2</div>
        </div>
    </div>
</body>
</html>

此外, 列排序也可以实现居中的效果:

<div class="col-lg-8 col-lg-push-2">3</div>

Bootstrap - 安装与使用