BootStrap

一、响应式网页
1、响应式网页概述：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

三个特征：（1）流式布局（2）可伸缩的图片和字体（3）CSS3 Media Query

2、编写响应式网页

（1）设置viewport元标签

（2）避免使用绝对单位(px),用相对单位代替(%,auto,em等)

（3）使用流式定位：float

（4）图片大小实现自适应：img(max-width:100%)会随着容器的改变而改变，且不会超过图片自身原始大小，防止失真

（5）根据浏览器屏幕的特征，有选择性的执行某些css样式——css3媒体查询技术(Media Query)

3、测试响应式网页

（1）使用真实物理设备——效果可靠但任务量太大（只要手机/平板/PC在同一个局域网即可测试）

（2）使用第三方测试/模拟软件——效果有待进一步的验证

（3）使用Chrome自带的浏览器模拟器测试

优势：可以模拟常见的设备、网速、经纬度、加速度…；不足：效果有待进一步的验证。

4、WebStorm的常用操作：

常用快捷键(Eclipse)：

复制当前行：Ctrl+Alt+↓
向上/下移动当前行：Alt+↑/↓
删除当前行：Ctrl+D
注释当前行：Ctrl+/
ZenCoding（代码补全）：

div+TAB+enter
div.box+TAB+enter
div#mybox+TAB+enter
div3+TAB+enter
ul>li3>a+TAB+enter
假文生成：

lorem+TAB+enter
多行编辑：

Alt+左键点击 开始多行同时编辑
ESC 退出多行编辑模式
5、CSS3提供的Media Query技术

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

Media：指浏览网页的设备，如screen（pc/pad/phone）、print、tv、projection、屏幕阅读器…

Query：查询出当前浏览设备的特性，如类型、宽度、高度、分辨率、色深位深、方向，根据这些特性，执行特定的CSS样式。

CSS3MediaQuery有两种用法：

（1）根据媒体的特征，加载不同的外部CSS：

不足：客户端会不管媒体特性，请求所有的CSS文件。

（2）根据媒体的特性，执行某段CSS中的 部分内容：

@media “screen and (min-width:768px) and (max-width:990px)”{
h1{…}
.box{…}
}
6、Twitter Bootstrap

Bootstrap(bootcss.com)是一个框架HTML/CSS/JS框架，适用于移动设备优先的响应式网页。

Bootstrap分为五部分：

（1）起步(Startup)；（2）全局CSS样式(Global CSS)；（3）组件(Component)；（4）插件(plugin)；（5）定制(Customize)

二、Bootstrap起步
1、下载Bootstrap

2、安装Bootstrap

3、网页基本模板

(1)lang属性的两个作用：A、告诉浏览器翻译时如何确定当前网页的基础语言B、告诉读屏软件当前页面的基础发音

(2)IE浏览器的兼容性问题：X-UA-Compitable:Cross-UserAgent-Compitable，该元标签只有IE浏览器支持

设置IE的兼容模式为edge——最新版，尽可能向行业标准看齐。

(3)Bootlint工具：是一个js，由Bootstrap官方提供，用于检测使用Bootstrap的页面中常见的HTML错误、class使用方面的错误——默认情况下浏览器是检查不出来的。

三、Bootstrap全局CSS样式
1、CSS Reset

*{box-sizing:border-box;}

box-sizing:content-box;/默认值/=margin+border+padding+width

box-sizing:border-box;/推荐使用/=margin+width

2、按钮

.btn{padding: ;border: ;}

.btn-default{color: ;background: ;border-color: ;}

（1）五种带有预定义样式的按钮：

.btn-danger（危险） .btn-success（成功） .btn-warning（警告） .btn-info（一般信息） .btn-primary（首选项）

（2）四种常用尺寸的按钮：

.btn-lg（大按钮） .btn-default（默认尺寸） .btn-sm（小按钮） .btn-xs（超小尺寸）

（3）按钮可变为块级（block）元素：

.btn-block（块级元素）

（4）调整按钮的位置：

.pull-left{float:left;}

.pull-right{float:right;}

3、图片

.img-rounded(圆角图片)

.img-circle(圆形图片)

.img-thumbnail(缩略图片)

.img-responsive(响应式图片)

4、排版和代码

.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

5、表格
.table

.table-bordered 带边框的表格

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

.table-striped 隔行变色的表格

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

6、栅格布局系统

（1）Web开发中页面布局可以采用的方式：

a、使用TABLE做布局

优势：简单不易出错 不足：加载效率

b、使用DIV+CSS做布局

优势：加载速度快、灵活 不足：不易控制

c、使用Bootstrap提供的栅格布局系统

优势：加载速度快、灵活、支持响应式功能、容易控制（有行/列的概念，但使用DIV+CSS实现）

（2）栅格布局系统的特点：

a、所有的行必须放在容器中：.container或.container-fluid

b、分为多行（row），一行中平均分为12列（col）

c、网页内容只能放在列（col）中，不能直接放在行（row）

d、可以在col中再嵌套row

e、col分为四大类：col-xs col-sm col-md col-lg

f、col-md-* 值可为1~12，值就为某个列的宽度（/12）

g、可以为一个列指定不同屏幕下的不同宽度

h、col-lg-* 只对大PC屏幕有效；

col-md-* 对普通PC和大PC屏幕都有效；

col-sm-* 对平板、PC、大PC屏幕都有效；

col-xs-* 对手机、平板、PC、大PC屏幕都有效；

i、hidden-lg 当前列只在大PC屏幕下隐藏

hidden-md 当前列只在PC屏幕下隐藏

hidden-sm 当前列只在平板屏幕下隐藏

hidden-xs 当前列只在手机屏幕下隐藏

j、列偏移（offset）

col-xs-offset-1~col-xs-offset-12 在lg/md/sm/xs屏幕下偏移

col-sm-offset-1~col-sm-offset-12 在lg/md/sm屏幕下偏移

col-md-offset-1~col-md-offset-12 在lg/md屏幕下偏移

col-lg-offset-1~col-lg-offset-12 在lg屏幕下偏移

k、列排序 （pull/push）

用途：在一行中调整某列的位置，且不影响其他列

col-xs/sm/md/lg-pull/push-*

（3）.container的 宽度问题：

当屏幕宽度>1200px（超大PC显示器-lg）：容器宽1170px

当屏幕宽度>992px（普通PC显示器-md）：容器宽970px

当屏幕宽度>768px（平板显示器-sm）：容器宽750px

当屏幕宽度<768px（手机显示器-xs）：容器宽auto

.container-fluid的宽度：width：auto；+before+after

（4）Bootstrap布局系统中容器的特点？

a、宽度做了媒体查询

b、添加了前置和后置内容生成，可以防止子元素的越界、浮动造成的影响。

（5）如何解决父元素的第一个子元素的margin-top越界问题（常用）

a、为父元素加border-top：1px；——有副作用

b、为父元素指定padding-top：1px；——有副作用

c、为父元素指定overflow：hidden；——有副作用

d、为父元素添加前置内容生成——推荐使用

.parent:before{

content:’ ';

display:table;

}

（6）如何解决所有的子元素浮动后父元素高度变为0，且影响后续元素（常用）

a、为父元素指定overflow：hidden；——有副作用

b、为父元素指定高度：height：1px；——有局限性

c、为父元素添加后置内容生成——推荐使用

.parent:after{

content:’ ';

display:table;

clear:both;

}

7、表单

Bootstrap中的表单分为三种：

（1）默认表单

（2）行内表单

（3）水平表单

四、组件 1、图标字体

（1）图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同字体

（2）glyphicon图标字体只能用于“空元素”——不包含任何内容或子元素！

如：
2、按钮组

.btn-group 水平按钮组

.btn-group-vertical 竖直按钮组

.btn-group.btn-group-justified 水平且两端对齐的按钮组

.btn-group-lg

.btn-group-sm

.btn-group-xs

3、下拉菜单

4、导航

(1)标签页式导航

(2)胶囊式导航

5、导航条

响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只能单击折叠按钮后才显示所有的菜单项。

基础class：navbar

（1）Bootstrap中导航条的位置：

a、顶部导航条；b、底部导航条

（2）Bootstrap中导航条的颜色：

a、浅色底深色的字 navbar-default

b、深色底浅色的字 navbar-inverse

（3）Bootstrap中导航条的定位：

a、相对定位position：relative 默认值

b、固定定位position：fixed navbar-fixed-top/bottom

（4）导航条的结构：

五、插件 Bootstrap基于jQuery提供了十几个插件函数，每个插件对应一个.js文件，可以单独引用，也可以整体引用（bootstrap.js）。

1、调用上述十几个插件可以用两种格式：

（1）传统的js方式调用：$(…).dropdown(); $(…).tab(…);

（2）使用data-*扩展属性方式调用：

2、Bootstrap提供的弹出框

（1）工具提示框（tooltip）

data-toggle=“tooltip”
（2）弹出框（popover）

data-toggle=“popover”
（3）警告框（alert）

× XXXX

（4）模态对话框（modal）

模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体间还可以传递数据。window.alert()就是典型例子。

模态框必需的结构:

头部

主体

尾部

显示一个模态框：

（1）
（2）
3、折叠效果（collapse）

（1）触发一个折叠效果：

a、
b、

（2）折叠组件的两个扩展用途：

a、Accordion（手风琴）
b、响应式导航条在手机屏幕中的效果
4、轮播广告（carousel）

5、附加导航（Affix）

6、滚动监听（scrollspy）

随着页面内容的滚动，某个导航中的项目，会自动的更改.active位置。

实现思路：

（1）页面中必须首先有一个导航菜单（.nav）——其中可以定义一个菜单项为.active

（2）导航菜单中的超链接的href属性值必须和页面中的某个锚点名一样

（3）为页面添加滚动事件的监听函数

body.οnscrοll=function(){
if(body滚动的距离===某个锚点距离顶端的距离){
此锚点对应的超链接的父元素li添加.active；
}
}
六、Bootstrap样式定制
1、Bootstrap如何样式定制

（1）编写自定义的CSS，覆盖bootstrap.css中提供的样式；不足：产生大量的冗余/无用代码

（2）直接修改bootstrap.css文件；不足：任务量太大!——CSS通病

（3）修改Bootstrap开发者编写的Bootstrap源代码——bootstrap.less；不足：没有

2、动态样式语言

CSS:静态样式语言，作为一门语言并不称职！缺少一般语言必需的基本要素：变量、运算、循环/选择、函数等，导致了CSS代码的修改和维护非常麻烦。

动态样式语言：在CSS的基础上，添加了动态语言所必需的元素，如变量、运算、循环/选择、函数等，方便样式文件的修改和维护。

注意：浏览器默认只能处理静态样式语言，所有的动态样式语言必需设法转换为CSS才能被浏览器所理解！这个转换操作称为“编译”。

常见的动态样式语言：（1）Sass/SCSS （2）Stylus （3）Less

3、Less的使用

是一种动态样式语言.

LESS 为 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

（1）运行方式1：在客户端运行Less转换程序——了解

在HTML中引入xx.less，同时再引入一个less.js，就是一个可以运行在客户端浏览器中的less编译程序——效率太低，不推荐使用。

（2）运行方式2：在服务器端运行Less转换程序——推荐

步骤：

A、下载并安装一款服务器端的js解释器——NodeJS或者Rhino

B、下载less文件的转换程序(less-Compiler）——一个js脚本

C、在服务器端JS解释器中运行Lessc转换器，把自己编写的.less文件转换为.css文件（可以在命令行中使用转换程序，可以在WebStorm中使用转换程序）

D、继续编写HTML文件，引用编译得到的.css文件即可。

4、Less语法学习

（1）Less完全支持CSS的所有语法

（2）Less支持单行和多行注释，但只有多行注释会被转换到css文件中

（3）Less支持变量（variable）

语法：@变量名:值;
使用：.class{样式：@变量名;}
（4）Less支持样式混合（Mixin）——在一个样式中应用另一个样式

语法：.class1{…}
.class2{
…
.class1;
…
}
（5）带参混合

语法：.class1(@参数1,@参数2,…){…}
.class2{
…
.class1{值1，值2，…}
…
}
（6）嵌套规则

语法：.class1{
…
.class2{…}
}
转换的结果：.class1{…}
.class1 .class2{…}
（7）Less可以对变量、常量进行算术运算

语法：变量/值 ±*/ 变量/值
（8）Less为样式提供了几十个应用函数

lighten（颜色，亮度值）：将指定的颜色变亮指定的百分比

darken（颜色，亮度值）：将指定的颜色变暗指定的百分比

floor（数字）：对数值进行下取整

ceil（数字）：对数值进行上取整

（9）页面导入

尽量避免使用CSS文件中的@import指令——会增加HTTP请求次数；

为了可以将一个样式文件拆分为多个小的样式文件，由多人同时编写，可以使用LESS中的@import——less中导入其他的less文件，转换时会拼接为一个大的完整的CSS样式文件，故推荐在less中@import其他的less文件。

语法：@import “xx.less”;
@import"yy";
大型项目中的less文件结构

variable.less 放置所有的变量
mixin.less 放置所有的混合
reset.less 放置HTML元素重置样式
navbar.less 导航条相关样式
footer.less 页脚相关样式
…
jd.less =>jd.css总样式文件 一大堆@import
5、通过修改Bootstrap的less源文件实现样式定制

定制的目标：

（1）去除不需要的样式，如轮播广告、模态框…

在bootstrap.less文件中，注释掉不需要的@import即可

（2）定制需要的组件的默认样式，如修改导航条的默认背景色

修改variables.less文件中的变量即可

（3）在Bootstrap提供的默认样式基础上创建新样式，如定制dropdown中的divider的样式——组件的深度定制

修改某个组件所对应的.less文件