移动端bootstrap响应式布局 grid布局

目标

1.能够说出响应式布局的基本原理
2.能够使用媒体查询完成响应式导航
3.能够使用Bootstrap的栅格系统
4.能够使用Bootstrap的响应式工具
5.能独立完成阿里百秀案例

目录：
响应式开发
bootstrap前端开发框架
bootstrap栅格系统
阿里百秀首页

1响应式开发
1.1
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的
设备划分 超小屏幕（手机） 小屏设备（平板） 中等屏幕（桌面显示器） 宽屏设备（大桌面显示器）
<768px 768px~992px 992px~1200px =>1200px

1.2响应式布局容器

        响应式需要一个父级为布局容器，来配合子元素实现变换效果
        原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面效果
        平时响应尺寸划分
        768px 宽度100%
        大于768px 宽度750px
        大于992px 宽度970px
        大于1200px 宽度1170px

一般来说我们主要考虑5种类型的设备屏幕，各自对应的分辨率通常为：

mobile portrait：竖屏移动设备，< 640px
mobile landscape：横屏移动设备，> 640px
tablet portrait：竖屏平板设备，> 768px
tablet landscape：横屏平板设备，> 1024px
laptop：PC电脑，> 1280px

@media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
            li {
                width: 33.33%;
            }
        }
        /* 小屏幕下 */
        
        @media screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }
        /* 中等屏幕 */
        
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }
        /* 大屏幕 */
        
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }

2.1bootstrap简介

bootstrap来自Twitter，是目前最受欢迎的前端框架，bootstrap是基于html、css、JavaScript的，它简洁灵活，使得web开发更加快捷
中文官网：http：//www.bootcss.com/
官网：http：//getbootstrap.com/
推荐使用：https://bootstrap.css88.com/
目前使用版本3

2.2bootsrtrap使用
bootstrap使用四部曲：1.先创建文件夹结构，2.创建html骨架结构，3.引入相关样式文件，4.书写内容
1.先创建文件夹结构
多建一个bootstrap

利用我们自己的样式覆盖原先的样式

2.3 布局容器
bootstrap需要为页面内容和栅格系统包裹一个.container容器，Bootstrap预先定义好了这个类，叫.container它提供两个作此用处的类
1.container类
响应式布局的容器，固定宽度
大屏 大于等于1200px 宽度固定为1170px
中屏 大于等于992px 宽度固定为970px
小屏 大于等于768px 宽度固定为750px
超小屏 100%
2.container-fluid类
流式布局容器 百分百宽度
占据全部视口viewport的容器
适合于单独做移动端开发

3栅格系统

3.1栅格系统
栅格系统英文为“grid systems”，也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数来定义模块化页面布局
bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口的尺寸的增加，系统会自动分为，最多12列
bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等分

3.2栅格系统使用
栅格系统用于通过一些列的行row和列colum的组合来创建页面布局，你的内容就可以放到这些创建好的布局中
超小屏幕<768px 小屏设备大于等于768px 中等屏幕 大于等于992px 宽屏设备 大于等于1200px

.container最大宽度              100%                       750px                            970px                              1170px
类前缀                          .col-xs-                  .col-sm-                         .col-md-                           .col-lg-
列数                                                                12

行必须放到container容器里面
我们实现列的平均划分 需要给列添加类前缀
xs-extra small:超小  sm-small：小     md-medium：中等  lg-large：大
列column大于12 多余的列所在的元素将被作为一个整体另起一行排列
每一列默认15px左右的padding
看呀同时为一列指定多个设备的类名，以便群不同分数 例如 class="col-md-4 col-sm-6"

如果孩子份数相加等于十二，则孩子能占满整个container宽度
小于十二会有空白
大于十二多余的那一列会另起一行

3.3列嵌套

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

 <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row ree">
                    <div class="col-md-6">a</div>
                    <div class="col-md-6">b</div>
                </div>
            </div>
            <div class="col-md-4">2</div>
            <div class="col-md-4">3</div>
        </div>
    </div>

3.4列偏移
使用.col-md-offset-类可以将列向右偏移，这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）

   <div class="container">
        <div class="row">
            <div class="col-md-4 ">zuo</div>
            <div class="col-md-4 col-md-offset-4">you</div>
        </div>
    </div>
    <div class="row">
            <div class="col-md-8 col-md-offset-2">中间</div>
        </div>

3.5列排序
通过使用.col-md-push-和使用.col-md-pull类可以很容易做到改变列的顺序

div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">左</div>
        <div class="col-md-8 col-md-pull-4">右</div>
    </div>
</div>

3.6响应式工具
为了加快对移动设备友好的页面开发工作、利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容
类名 超小屏 小屏 中屏 大屏
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏
与之相反的是visible

4.gird布局

什么是grid
flex是轴线布局，只能指定项目针对轴线位置，可以看做一维布局，grid则是把容器划分为行和列，产生单元格，然后指定项目所在的单元格，frid比flex强大。
每个gird布局都有隐藏的网格线
间距gap
区域area 划分自己的区域
容器container
项目item
行row
列column
内容content

容器属性
1.grid-template-colums
2.grid-template-row
3.grid-row-gap  间距
4.grid-column-gap
5.grid-gap 34缩写
6.grid-template-areas 区域不需要则用点.表示  'a . c'
7.grid-auto-flow   排放方式 行和列
8.justify-items设置单元格内容的水平和垂直的对齐方式 start/end/center/stretch
9.align-items 设置单元格内容的水平和垂直的对齐方式
10place-items 89缩写
11.justify-content
12align-content
13place-content  11 12缩写
14grid-auto-columns
15.grid-auto-rows

grid-template
想要多少行或者列，就填写相应属性值得个数，不填写自动分配

项目属性
 1.grid-column-start
 2.grid-column-end
 3.grid-row-start
 4.grid-row-end
 5.简写 gird-cloum:1 / 3;不是除法
 gird-cloumn-start:span 3;
 align-self
 justify-self

 nav {
            width: 600px;
            height: 600px;
            border: 10px solid blue;
            display: grid;
            /* 剩余空间填充分配 */
            /* grid-template-columns: repeat(auto-fill, 100px); */
            /* grid-template-columns: repeat(3, 1fr);
            grid-template-columns: 1fr minmax(150px 1fr); */
            grid-template-columns: 100px 100px 100px;
            grid-template-rows: 100px 100px 100px 100px;
            /* row-gap: 20px;
            column-gap: 20px; */
            /* gap: ; */
            grid-template-areas: 'a a c' 'd e f' 'g h i' 'j';
            /* grid-auto-flow: row; */
            /* justify-items: center;
            align-items: center; */
            /* place-items: center center; */
            /* align-content: center;
            justify-content: space-around; */
        }
        /* style="grid-column-start: 1;grid-column-end: 3;" */
        
        nav>div {
            border: 1px solid red;
        }