flex布局,响应式布局,bootstrap简要

弹性布局 flex(伸缩布局)

CSS3在布局方面做了非常大的改进，使得对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

当给一个盒子设置了display：flex之后，这个盒子就有了主轴和侧轴的概念。
主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右 ，默认侧轴从上到下

flex-direction

flex-diretion主要是用来调整主轴的方向的，默认是水平方向
一般来说，很少调整主轴的方向。

可选值

row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。

justify-content(重点)

justify-content主要用来设置主轴方向的对齐方式 ，可选的值有：

可选值：

flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。

align-items(重点)

align-items用于调整侧轴的对齐方式 ，可选的值有：

flex-start： 元素在侧轴的起始位置对齐。 
flex-end： 元素在侧轴的结束位置对齐。
center： 元素在侧轴上居中对齐。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。

flex-wrap

flex-wrap属性控制flex容器是单行或者多行,默认不换行

1 2	nowrap：不换行（默认），会压缩子盒子的宽度。 wrap：当宽度不够的时候，会换行。

align-content

align-content用来设置多行的flex容器的排列方式。

flex-start： 各行向侧轴的起始位置堆叠。 
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-around： 各行在侧轴中平均分布。 
space-between： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 
stretch：拉伸，不设置高度的情况下。

align-items与align-content的区别

1 2	align-items调整的是侧轴单行的对齐方式，不换行一般用align-items align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。

flex属性

上述属性都是给父盒子设置的，接下来的几个属性是给子盒子设置的。

flex属性用来设置子盒子如何分配主轴空间

flex:1

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order:1;

align-self

align-self也是用于设置在侧轴的位置，但是align-self给子元素设置，优先级比align-items的优先级高。

1	取值与align-items的取值一样。

flex-grammar

响应式

什么是响应式布局

响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

为什么要有响应式布局？

在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。
通常的做法是针对移动端单独做一套特定的版本。
如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）
响应式布局 ：一个网站能够兼容多个终端（节约开发成本）

优点：

面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

**缺点： **

兼容各种设备工作量大，效率低下

代码累赘，会出现隐藏无用的元素，加载时间加长

响应式开发现状：

如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）
在新建站点采用响应式开发的较多

响应式开发与移动web开发的比较

开发方式	移动web开发+pc开发	响应式开发
引用场景	一般已经有了PC端网站，只需要端独开发移动端网站即可	针对一些新建网站，并且要求适配移动端
开发	针对性强，开发效率高	兼容各种终端，效率低
适配	只能适配移动端或者PC端，pad上体验比较差	可以适配各种终端
效率	代码简介，加载快	代码相对复杂，加载慢

媒体查询

媒体查询（Media Query）是CSS3提出来的一个新的属性，通过媒体查询可以查询到screen的宽度，从而指定某个宽度区间的网页布局。

设备分类

分类	宽度范围
大屏设备	>1200px
中屏设备	992px~1200px
小屏设备	768px~992px
超小屏设备	< 768px

媒体查询的使用

响应式开发的原理：使用媒体查询实现不同终端的布局和样式的切换。

媒体查询语法：

/*查询屏幕*/
@media screen and (条件) {
}

/*条件的写法*/
/*min-width:只要屏幕宽度超过这个值的设备样式就能生效*/
/*max-width:只要屏幕宽度小于这个值的设备样式就能生效*/
@media screen and (min-width: 1200px) {
  .container {
    width: 1170px;
    background-color: red;
  }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
  .container {
    width: 970px;
    background-color: blue;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
    background-color: yellow;
  }
}

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    background-color: green;
  }
}

弊端：只有一个div，要做一套响应式布局，就需要如此多的代码，非常的麻烦，因此开发会更多的借助一些响应式的框架，比如bootstrap。

bootstrap框架

Bootstrap，来自 Twitter，是很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap中文网

特点：

组件简洁大方、代码规范精简、界面自定义性强。
Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。

优点：

有自己的生态圈，不断的更新迭代
提供了一套简洁、直观、强悍的组件
标准化的HTML+CSS编码规范
让开发更简单，提高了开发效率。
扩展性强，虽然界面组件样式已经定义好了，但还是可以自定义，修改默认样式。

版本：

2.x.x 停止维护
- 优点：兼容性好
- 缺点：代码不够简洁、功能不够完善
3.x.x 目前使用最多
- 优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目
- 缺点：放弃了IE67，对IE8支持但是界面效果不友好
4.x.x 阶段

基本模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>bootstrap基本模板</title>
  
  <!--引入bootstrap的核心样式文件-->
  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    
  <h1>你好，世界！</h1>
    
</body>
</html>

全局样式

container容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。

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

1
2
3

<div class="container">
  ...
</div>

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

1
2
3

<div class="container-fluid">
  ...
</div>

这两种容器类不能互相嵌套。

栅格系统

栅格系统，也叫网格系统

.row用于抵消.container容器的15px的padding值
可以在.row中嵌套column

栅格系统常用类（总共12列）

类名	例子	解释
.col-xs-xx	.col-xs-6	在超小屏幕（及以上）生效
.col-sm-xx	.col-sm-6	在小屏幕（及以上）生效
.col-md-xx	.col-md-6	在中屏幕（及以上）生效
.col-lg-xx	.col-lg-3	在大屏幕及生效，占1/4
.col-lg-xx	.col-lg-4	在大屏幕及生效，占1/3
.col-lg-xx	.col-lg-5	在大屏幕及生效，占1/2

【列嵌套】

<div class="col-lg-4">
    <!--栅格系统无处不在，只要父盒子有宽度，就可以使用栅格系统-->
    <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
    </div>
</div>

【列偏移】

<!-- 使用 .col-md-offset-* 类可以将列向右侧偏移。-->
<div class="row">
  <div class="col-lg-3"></div>
  <!--col-lg-offset-3:在大屏下，这个div将向右侧偏移3个单位-->
  <div class="col-lg-6 col-lg-offset-3"></div>
</div>

推荐使用hidden相关的属性