bootstrap经典网页布局_移动开发-响应式布局-CSDN博客

好好学习，天天向上

主要内容为：了解响应式开发原理、了解Bootstrap ，抽风式更新

要多看 Bootstrap 官方文档：全局 CSS 样式 · Bootstrap v3 中文文档

1、了解响应式开发原理

①、响应式开发原理

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

设备划分	尺寸之间
超小屏幕（手机）	<768px
小屏设备（平板）	>=768px ~ 992px
中等屏幕（桌面显示器）	>=992px ~ <1200px
宽屏设备（大桌面显示器）	>=1200px

②、响应式布局容器

响应式需要一个父级做为布局容器，来配合自己元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面和样式变化

平时的响应式尺寸划分

超小屏幕（手机，<768px）: 设置宽度为 100%
小屏幕（平板，>=768px）: 设置宽度为 750px
中等屏幕（桌面显示器，>= 992px）: 宽度设置为 970ppx
大屏幕（大桌面显示器，>=1200px）: 宽度设置为 1170px

但是也可以根据实际情况自己定义划分

2、Bootstrap

中文官网：

Bootstrap中文网www.bootcss.com

官方文档：

全局 CSS 样式 · Bootstrap v3 中文文档v3.bootcss.com

①、Bootstrap 使用方法

Bootstrap 使用四部曲

创建文件夹结构
创建 html 骨架结构
引入相关样式文件
书写内容

创建 html 骨架结构

<!DOCTYPE html>

引入相关样式文件

<!-- bootstrap 核心样式 -->

书写内容

直接拿 Bootstrap 预先定义好的样式来使用
修改 Bootstrap 原来的样式，注意权重问题
学号 Bootstrap 的关键在于知道它定义了那些样式，以及这些样式能实现什么样的效果

示例图：

②、Bootstrap 布局容器

Bootstrap 需要为页面内容和栅(shan)格系统包裹一个 .container 容器，它提供了两个作此用处的类

container 类

响应式布局的容器固定宽度
大屏（ >=1200px ）宽度定为 1170px
中屏（ >=992px ）宽度定为 970px
小屏（ >=768px ）宽度定为 750px
超小屏（100%）

container-fluid 类

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

③、栅格系统

栅格系统，也叫做 “网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 ( viewport ) 尺寸的增加，系统会自动分为最多 12 列

栅格选项参数

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

	超小屏幕(手机) < 768px	小屏设备(平板) >= 768px	中等屏幕(桌面显示器) >= 992px	宽屏设备(大桌面显示器) >=1200px
.container 最大宽度	自动(100%)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	,col-lg-
列 ( column) 数	12	12	12	12

按照不同屏幕划分为 1~12 等份
行（row）可以去除父容器作用 15px 的边距
xs-extra samll：超小；sm-small：小；md-medium：中等；lg-large：大；
列（column）大于 12，多余的 " 列 ( column )" 所在的元素将作为一个整体另起一行排列
每一列默认有左右 15px 的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数，例如 class=“col-md-4 col-sm-6”

示例图：

列嵌套

栅格系统内置的栅格系统将内容再次嵌套，也就是一个列内在分成若干份小列，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内

示例图：

列偏移

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

示例图：

列排序

通过使用 .col-md-push-* 往右推和 .col-md-pull-* 往左拉两个类就可以容易的改变列 ( column ) 的顺序

示例图：

④、响应式工具

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

类名	超小屏幕(手机) < 768px	小屏设备(平板) >= 768px	中等屏幕(桌面显示器) >= 992px	宽屏设备(大桌面显示器) >=1200px
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

与之相反的，.visible-xs-* ，.visible-sm-* ，.visible-md-* ，.visible-lg-* 是针对不同设备显示某个内容
其他多看看官方文档

示例图：