响应式网页-bootstrap-02.16

一 、响应式网页

1.什么是响应式网页：

一个页面，可以根据浏览器设备的不同，以及特性的不同，而自动改变布局、大小等

2.响应式网页的个特征

1）流式布局
2）可伸缩的图片和字体
3）CSS3 Media Query

二、响应式布局必须清楚的两个概念

1.viewport - 视口

1）2010年之前，html网页基本都是为pc设计的，宽度比较大,在手机上的显示内容会挤压到一块，后来iOSiOS引入了viewport(视口)的概念，用于显示网页内容的一个逻辑概念，其高度和宽度都可以任意制定，网页不是显示在物理窗口，而是显示在视口中-就可以实现大网页不经缩放，直接显示手机中，但需要用户来回滑动。
2）用法：

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >

width: 视口的宽度，可以取值为数值，或device-width
height：视口的高度，一般不指定
initial-scale：初始时的缩放倍率
minimum-scale : 允许的最小缩放倍率
maximum-scale : 允许的最大缩放倍率
user-scalable : 是否允许用户手动缩放，可取值1/0/yes/no

2. CSS3 media query

1. 作用：根据客户端浏览设备的特性，有选择的执行部分css

2. media: 指浏览网页的设备，如screen，print

3. Query: 查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色彩、方向(landscape/portrait)

4. css3MediaQuery有两种用法

   <link media="screen and (min-width:990px) and (max-width:1000px)" rel="stylesheet" type="text/css" href="css/pc.css"/>
   不足：客户端会不管媒体特性，请求所有的css文件

   @media screen and (min-width: 990px) {}

三、bootstrap

www.bootcss.com

1.什么是bootstrap：

是一个html/css/js框架，适用于移动设备优先的响应式网页

1） 面向PC进行了样式设定，同时兼顾pad和phone

2）面向Phone进行样式设定，同时兼顾了PC

主要涉及：

1）HTML: 为H5扩展了一些自定义属性

2）CSS: CSS Reset + 几千个class

3）JS: 基于JQ提供了十几个插件函数

2. bootstrap分为五部分

1）起步startup

2）全局css样式 global css

• 按钮

bootstrap中常用的五种颜色

  红色->危险
  绿色->成功
  黄色->警告
  浅蓝色->信息
  深蓝色->基础的

bootstrap中常用的四个大小

  btn-lg ->大
  btn-md ->中
  btn-sm ->小
  btn-xs ->最小

块级按钮

  btn-block

调整按钮的位置

  pull-right ->右浮动
  pull-left  ->左浮动

• 图片

  img-rounded 圆角
  img-circle 圆形
  img-thumbnail 缩略图
  img-responsive 图片支持响应式布局

• 排版和代码，仅作了解

文本颜色

text-danger
text-success
text-warning
text-info
text-primary

背景颜色

bg-danger
bg-success
bg-warning
bg-info
bg-primary

文本对齐方式

text-left
text-right
text-center
text-justify

文本对齐方式

text-lowercase
text-uppercase
text-capitalize

• 列表

  list-unstyled 去掉列表项样式
  list-inline 将所有元素放在同一行

• 表格

  bootlint是一个js，由bootstrap官方提供，用于检测使用bootstrap的页面中场景的html错误，class使用方面的错误-默认请求下浏览器检查不出来的
  table

table-bordered 带边框的

table-responsive 响应式表格，注意，使用在table的父元素上，而不是table上

table-striped 隔行变色的表格
table-hover 带悬停效果的表格

• 栅格布局系统

• 表单

3. 组件commponent
4. 插件plugin
5. 定制customize