响应式布局

1.响应式开发

1.1原理:

使用媒体查询针对不同的设备进行布局和样式设置从而适配不同设备的目的

1.2划分

设备划分                             尺寸区间                                 宽度

超小屏幕(手机)                     <768px                               100%

小屏设备(平板)                  >=768px-992px                     750px

中等屏幕(桌面显示器)           >=992px-1200px               970px

宽屏设备(大桌面显示器)          >=1200px                      1170px

1.3 响应式布局容器

响应式需要一个父级作为布局容器,来配合子级元素实现变化效果

2.Bootstrap前端开发框架

2.1Bootstrap简介

Bootstrap来自twiter(推特),是目前最受欢迎的前端开发框架,Bootstrap是基于html,css和javscript的,它简洁灵活,使得web开发更加简洁

2.2网址

中文官网:

http://www.bootcss.com/

官网:

http://getbootstrap.com/

2.3框架

一套架构,有一套比较完整的网页功能解决方案,而且控制权在于框架本身,有预制式样式,组件和插件,使用时按照框架规定的某种规范进行开发

2.4Bootstrap框架的优点

1.标准化的html+css编码规范

2.提供了一套简介,直观,强悍的组件

3.有自己的生态圈,不断地更新迭代

4.让开发变得更加简单,提高开发效率

2.4布局容器

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

1.container类

响应式布局的容器                                                                固定宽度

大屏(>=1200px)                                                                   width:1170px

中屏(>=992px)                                                                     width:970px

小屛(>=768px)                                                                     width:750px

超小屏(100%)                                                                      width:100%

 2.container-fluid类

流式布局容器,百分百页面宽度.占据全部视口(viewport)的容器.适合于单独移动端制作开发

3.Bootstrap栅格系统

1.说明

栅格系统英文为gindsystems,也有人翻译为"网格系统",它是指将页面布局划分成等宽的列,然后通过列数来定义模块化布局

2.参数

超小屏幕                 .col-xs-

小屏幕                     .col-sm-

中等屏幕                 .col-md-

大屏                       .col-lg-                

3.使用说明

栅格系统通过行(row)和列(column)的组合来进行布局,默认划分成为12等分

可以使用多类名来划分不同的份

每一列都有默认左右15像素的padding

4.列偏移

使用:  .col-md-offset   向右偏移

5.列排序

通过使用 .col-md-push和 .col-md-pull类就可以改变列(column)的顺序   (push    推)   (pull    拉)

4.响应式工具

1.说明

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

2.类名

类名                         超小屏              小屛              中屏              大屏

.hidden-xs                隐藏                  可见              可见              可见

.hidden-sm               可见                  隐藏              可见              可见

.hidden-md               可见                  可见               隐藏             可见

.hidden-lg                  可见                 可见               可见             隐藏

.visible-xs                  可见                 隐藏               隐藏             隐藏

.visible-sm                 隐藏                 可见              隐藏              隐藏

.visible-md                 隐藏                 隐藏              可见              隐藏

.visible-lg                   隐藏                 隐藏              隐藏              可见