06.移动web-bootstrap

Bootstrapj简介

目前最受欢迎的前端框架，基于HTML，CSS和JAVASCRIPT，简洁灵活，使得web开发更加快捷

``` Bootstrap 使用四部曲： 1.创建文件夹结构 2.创建html骨架结构 https://v3.bootcss.com/getting-started/#template 3.引入相关样式文件 4.书写内容 ```

布局容器

Bootstrop 需要为页面内容和栅格系统包裹一个.container容器，Bootstarp预先定义好了这个类，叫.container 它提供了两个作此用处的类

``` //.container类 媒体查询 //.container-fluid类 流式布局容器百分百宽度 占据全部视口（viewport）的容器 适合单独的移动开发 ```

Bootstrap栅格系统

指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

Bootstrap提供了一套响应式，移动设备有限的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列

Bootstrap里面container宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把container划分为12等分

栅格选项参数

栅格系统用于通过一系列的行（row）与列（column)的组合来创建页面布局，内容就可以放入这些创建好的布局中

``` 超小屏幕（手机） <768px .container最大宽度为：自动（100%） 类前缀： .col-xs 小屏设备（平板） >=768px .container最大宽度为：750px 类前缀： .col-sm 中等屏幕（桌面显示器）>=992px .container最大宽度为：970px 类前缀： .col-md 宽屏设备（大桌面显示器）>1200px .container最大宽度为：1170px 类前缀： .col-lg

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

<h3>列偏移</h3>
<p>使用.col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过*选择器为当前元素增加了左侧的边距（margin)</p>

左侧

//偏移的份数 就是12-两个盒子的份数 = 6

右侧

//偏移的份数 就是（12-8）/2 =2

右侧

```

列排序

通过使用.col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column) 的顺序

```

左侧

右侧

```

响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容

``` .hidden-xs 超小屏 ：隐藏 其他 ：可见 .hidden-sm 小屏：隐藏 其他：可见 .hidden-md 中屏：隐藏 其他：可见 .hidden-lg 大屏：隐藏 其他：可见

//与之相反，是visible-xs visible-sm visible-md visible-lg是显示某个页面内容