QQ图片20200707101652.png
首先使用BootStrap后映入眼帘的应该是这样的代码！

1、分析总体布局，选用对应的栅格系统容器

假设我们借鉴黑马旅游网的布局：
QQ图片20200707102908.png

代码如下：

  1.     <!--页眉-->
  2.     <div class="container-fluid">
  4.     </div>
  6.     <!--主体-->
  7.     <div class="container">
  9.     </div>
  11.     <!--页脚-->
  12.     <div class="container-fluid">
  14.     </div>

2、分析每个容器里需要几行栅格系统！一行栅格系统里有几个元素！

我们这里就演示页眉部分，假设页眉部分需求如下：

QQ图片20200707103731.png

分析：

页眉部分需要有三行栅格系统

第一行有一个元素

第二行有4个元素

第三行有2个元素，其中第二个元素继续分为两行栅格系统，每一行栅格系统再分为3个元素

QQ图片20200707104348.png

3、知道 行和元素的布局 以及 响应式布局对应的代码

//我们利用第二行来解释行和元素的布局
<div class="row">  //一行用一个div括起来，一行代表1个栅格系统，一个栅格系统有12个格子
----------------------------------------------------------------------------------    
    <div class="col-md-4">  //一个元素用一个div括起来，4代表占栅格系统的4个格子
        <img>  //元素里面啥都行！
    </div>
----------------------------------------------------------------------------------     
    <div class="col-md-4">  //一个元素用一个div括起来，4代表占栅格系统的4个格子

    </div>
----------------------------------------------------------------------------------     
    <div class="col-md-4">  //一个元素用一个div括起来，4代表占栅格系统的4个格子

    </div>
----------------------------------------------------------------------------------     
</div>

//响应式布局的代码，以图片为例
<img src="……" class="img-responsive">
//class="img-responsive" 就是设定图片为响应式布局

4、开始写敲代码

1、创建出三行：class=”row”

        <!--第一行-->
        <div class="row">

        </div>

        <!--第二行-->
        <div class="row">

        </div>

        <!--第三行-->
        <div class="row">

        </div>

2.1、第一行代码：

            <div>
                <img src="img/img01.jpg" class="img-responsive"> 
            </div>

2.2、第二行代码：

            <div class="col-md-4">
                <img src="img/img02.jpg" class="img-responsive">
            </div>
            <div class="col-md-4">
                <img src="img/img02.jpg" class="img-responsive">
            </div>
            <div class="col-md-4">
                <img src="img/img02.jpg" class="img-responsive">
            </div>

2.3、第三行代码：

            <div class="col-md-4">
                <img src="img/img01.jpg" class="img-responsive">
            </div>
--------------------------------------------------------------------------------------
            <div class="col-md-8">
                ----------------------------------------------------------------------
                <div class="row">
                    <div class="col-md-4">
                        <img src="img/img01.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-4">
                        <img src="img/img01.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-4">
                        <img src="img/img01.jpg" class="img-responsive">
                    </div>
                </div>
                ----------------------------------------------------------------------
                <div class="row">
                    <div class="col-md-4">
                        <img src="img/img01.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-4">
                        <img src="img/img01.jpg" class="img-responsive">
                    </div>
                    <div class="col-md-4">
                        <img src="img/img01.jpg" class="img-responsive">
                    </div>
                </div>
            </div>
        </div>

效果如下：全屏看的话有一些细节不行，但随便了，就这样了!
QQ图片20200707110745.png

5、需要重点知道的部分CSS和html代码的含义

HTML

<input type="……" placehoder="……"> //placehoder在输入框的底部有灰色的提示信息，光标移入后就没了

<a href="">文字</a>  //超链接

CSS

//一个class可以取多个名字！用空格隔开，相当于为一个div取多个名字！！并且如果是导入了BootStrap，那么class中有的名字还具有特殊功能！并且这些class名字都可以作为CSS的选择器！！！
<style>
    .name{

    }
    .row{             //不管是.name还是.row都可以作为下面img的选择器！

    }
</style>
<body>
    <div class="row name">
        <img src="……">
    </div>
</body>
**************************************************************************************
//内边距：padding
padding            简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom    设置元素的下内边距。
padding-left    设置元素的左内边距。
padding-right    设置元素的右内边距。
padding-top        设置元素的上内边距。
如:
padding-top:10px;  //设置元素的上内边距为10像素
**************************************************************************************
//外边距margin
margin
margin            简写属性。作用是在一个声明中设置元素的所内边距属性。
margin-bottom    设置元素的下外边距。
margin-left        设置元素的左外边距。
margin-right    设置元素的右外边距。
margin-top        设置元素的上外边距。
如：
margin-top:10px;  //设置元素的上外边距为10像素
**************************************************************************************
//浮动：float
float:left    元素向左浮动。
float:right    元素向右浮动。
**************************************************************************************
//边框：border
border:2px solid #ffc900;  //四周边框厚度为2像素，边框为实线，颜色为#ffc900
**************************************************************************************
//宽度，高度
width:50px
height:50px
**************************************************************************************
//背景色
background-color:red;  
**************************************************************************************
//文本对齐方式
text-align:left    把文本排列到左边。默认值：由浏览器决定。
text-align:right    把文本排列到右边。
text-align:center    把文本排列到中间。
**************************************************************************************
//垂直居中
line-height:和边框高度一样的px值;  //这样就会垂直居中了！原理不知道！
**************************************************************************************