1.BootStrap介绍

        Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

​2.BootStrap安装与使用

2.1 安装

        安装请去BootStrap中文网：Bootstrap中文网

 2.2 使用

        BootStrap在html中引用：

        <!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="css/bootstrap.min.css">

		<!-- 可选的Bootstrap主题文件 -->
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery-3.4.1.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>

3.布局容器和栅格网格系统

3.1布局容器——.container 类

        .container与.container_fluid是bootstrap中的两种不同类型的外层容器。官方对二者的描述为：

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

　　        .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

        所谓固定宽度并不是允许开发者自己设置容器的宽度，而是bootstrap内部根据屏幕宽度利用媒体查询，帮我们设置了固定宽度，并且是能够自适应的。无论何种情况下，请不要手动为响应式布局中的外层布局容器设置固定宽度值。.container-fluid自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局。

<!--  固定宽度，两侧会有留白 -->
<div class="container">
    <p>...</p>
</div>

<!--  占据全部视口（viewport），不会有留白 -->
<div class="container-fluid">
   <p>...</p>
</div>

3.2栅格网格系统

注意：网格系统必须使用到CSS

        BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，BootStrap系统会自动分为最多12列。栅格系统用于通过一系列的行（row）或列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

        网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。

         container、row、xs（xsmall phones）{超小屏（自动)}，sm（small tablets）{小屏（750px）}，md（middle desktops）{中屏（970px）}，lg（laege desktops）{大屏（1170px）}，

        行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和padding（内边距）。在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容器(.row)的直接子元素，但列数之和不能超过平分的总列数12。如果大于12,则自动换到下一行。

具体内容应当放置在列容器之内。

3.2.1 列组合：

        列数加起来不能超过12，超过12则会换到下一行

3.2.2 列偏移：

        在列元素上添加类名"col-md-offset-X"(其中X代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。但是总数不超过12

<div class="container">
     <div class="row">
         <div class="col-md-1">1列</div>
         <div class="col-md-1">2列</div>
         <div class="col-md-1 col-md-offset-8">11列</div>
         <div class="col-md-1">12列</div>
     </div>
</div>

3.2.3 列排序：

        列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在BootStrap框架的网格系统中是通过添加类名 col-md-push-X 和 col-md-pull-X (其中X代表移动的列组合数)。往前pull，往后push。如果目的地有其他的东西，就会被覆盖

3.2.4 列嵌套：

        栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内