Bootstrap初识
Bootstrap
一、响应式网页
1、响应式网页概述：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。
三个特征：（1）流式布局（2）可伸缩的图片和字体（3）CSS3 Media Query
2、编写响应式网页
（1）设置viewport元标签<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
（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
div*3+TAB+enter
ul>li*3>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：
<link media="screen and (min-width:768px) and (max-width:990px)" rel="stylesheet" href="xx.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）默认表单
（1）图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同字体
（2）glyphicon图标字体只能用于“空元素”——不包含任何内容或子元素！
如：
2、按钮组
.btn-group 水平按钮组
.btn-group-vertical 竖直按钮组
.btn-group.btn-group-justified 水平且两端对齐的按钮组
.btn-group-lg
.btn-group-sm
.btn-group-xs
3、下拉菜单
<div class="dropdown">
<a data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li></li>
<li class="divider"></li>
<li></li>
</ul>
</div>
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、Bootstrap提供的弹出框
（1）工具提示框（tooltip）
data-toggle=“tooltip”
（2）弹出框（popover）
data-toggle=“popover”
（3）警告框（alert）
模态框定义：在父窗体中弹出一个子窗体，子窗体若不关闭，父窗体就无法获得焦点，同时父子窗体间还可以传递数据。window.alert()就是典型例子。
模态框必需的结构:
<div class="modal"> <!--半透明的黑色遮罩层-->
<div class="modal-dialog"> <!--宽/定位-->
<div class="modal-content"> <!--边框/背景色/阴影-->
<div class="modal-header">头部</div>
<div class="modal-body">主体</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
显示一个模态框：
（1）触发一个折叠效果：
a、
b、
（2）折叠组件的两个扩展用途：
a、Accordion（手风琴）
b、响应式导航条在手机屏幕中的效果
4、轮播广告（carousel）
随着页面内容的滚动，某个导航中的项目，会自动的更改.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文件
上一篇： 三目运算符NPE