教程复习三阶段day02.pdfVIP

复习：

响应式网页：

概念：

如何编写：六条原则

如何测试：三种方法

Bootstrap框架：

是一个HTML/CSS/JS框架，适用于创建响应式Web页面。主要内容分为五部分：

(1)起步

、模板、实例、Bootlint、兼容性

(2)全局CSS样式

按钮、、文本、辅助类

(3)组件

(4)JS插件

(5)定制

今日目标：

(1)全局CSS样式

表格

栅格系统——重点

表单——难点

(2)组件

Boostrap指定的四种屏幕尺寸：

(1)超大PC屏幕——lg(large)：

w=1200px

(2)中等PC屏幕——md(medium):

1200pxw=992px

(3)PAD屏幕——sm(small)

992pxw=768px

(4)PHONE屏幕——xtrasmall)

768pxw

1.Boostrap中的两种容器

定宽容器：

.container:

1170px//lg

970px//md

750px//sm

100%//xs

变宽容器：

.container-fluid

100%

此外，两种容器都有:before和:after，可以清除子元素margin和float造成的影响。

2.全局CSS样式——表格——小重点

.table基础表格

.table-bordered带边框的表格

.table-striped隔行变色的表格

.table-hover带鼠标悬停效果的表格

.table-responsive响应式表格，必须使用在TABLE的父元素DIV上!

练习：如何给某个td或者tr变为红色/绿色...背景？.table-responsive的正确使用方法？

3.Bootlint

Bootlint是Bootstrap所提供的HTML/CS检测工具。在使用了Bootstrap的页面上，

它能自动检查某些常见的HTML和class的使用错误——浏览器本身不具备这样的检查功能。

4.全局CSS样式——栅格布局系统——重点

前端页面可用的布局方法：

(1)使用TABLE实现页面布局

优势：简单，容易控制

问题：语义表达错误，渲染呈现的效果不友好

(2)使用DIV+CSS实现页面布局

优势：语义正确，渲染效果好

问题：不容易控制，尤其是响应式页面中

(3)使用Bootstrap提供栅格布局系统(GridLayout)

优势：简单，容易控制，语义正确，支持响应式

问题：没有！

特点：类似于表格，有行(.row)和列(.col)的概念，底层实现却是DIV+CSS。

栅格布局系统使用方法：

(1)最外层必须是容器类：.container或.container-fluid

(2)容器中放置行：.row

(3)行中放置列：.col

(4)针对不同的屏幕有不同的列：

.col-lg-*适用于超大PC屏幕

.col-md-*适用于中等PC屏幕

.col-sm-*适用于PAD屏幕

.col-xs-*适用于PHONE屏幕

一个div可以同时多个不同屏幕下的列宽

divclass=col-lg-*