前言：本文是自己在学习课程中的课程笔记，这里用来温故知新的，并非本人原创。
开发工具
1、记事本，Editplus,... ...
2、Sublime，Dreamweaver
3、Webstorm
========================================
一、什么是响应式网页
Responsive Web Page,响应式网页/自适应网页，即一个页面既可以在PC浏览器中浏览，也可以在手机/平板中浏览。并且配合不同设备有不同的响应结果
响应式网页的特点：
1、页面上的图片和文字要随着屏幕尺寸发生改变
屏幕分辨率：1211px ，图像 ：1200px
2、页面的布局随着屏幕尺寸而发生改变
二、如何测试响应式网页
1、使用真实的物理设备
优势：测试结果真实可靠
不足：设备太多，成本太大，测试任务量大
方式：
1、搭建本地服务器，部署项目
2、移动终端设备与服务接入相同网络
2、使用第三方模拟设备
优势：无须添加更多设备
不足：效率偏低
3、使用浏览器自带的设备模拟器(Emulator)
优势：功能丰富
不足：... ...
三、视口 - Viewport
IOS中的Safari 最早引入的概念
1、视口：
移动设备中，浏览器里显示网页的一块区域(PC端会忽略)
2、对于响应式网页，设置视口的信息：
1、视口的宽度 ：要与设备宽度一致
2、视口的缩放倍率 ：设置为1，即不缩放
3、视口的手动缩放 ：不允许缩放网页
3、在HTML中指定视口信息：
<meta name="viewport" content="">
1、视口的宽度 ：width
取值：
1、device-width
2、具体数值
2、视口的初始缩放倍率 : initial-scale
取值：缩放倍数
1 : 原始大小
3、是否允许视口手动缩放 : user-scalable
取值：
1/0/yes/no
<metaname="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
以上代码，移动端必备!!!
四、如何编写响应式网页 (重点)
1、必须声明视口(已解决)
2、文字使用相对尺寸(em,rem)，尽量不用绝对尺寸(px)
CSS中的1px 并不代表真实物理设备的 1px
比如：iPhone4以后，屏幕为 Retina 屏幕，屏幕大小没有变化，
但分辨率提升一倍，
iphone4 ：屏幕 320 * 480
分辨率：640 * 960
em : 父元素字体大小倍数
rem : 根元素(html)字体大小倍数
3、容器元素使用相对尺寸(%,auto)，尽量不用绝对尺寸(px)
4、图片使用相对尺寸(%,auto)，尽量不用绝对尺寸(px)
img{
50px;/*不推荐*/
50%;推荐使用，指定父容器的占比，可以无限缩放
max-50%;推荐使用，指定父容器的占比，最大不能超过图像原
始大小}
5、页面元素使用流式布局
流式布局特点：
1、元素默认靠向容器的左上方
2、横向排列，排列不下则换行
方法1：float
方法2：display:inline-block;
6、响应式网页都要使用CSS3 Media Query技术 - 最重要
ex:
1、浏览器宽度 w < 768，背景色 红色
2、浏览器宽度 768<= w <=991 背景色 绿色
3、浏览器宽度 w > 991 背景色 粉色
五、CSS3 Media Query
作用：可以根据不同的媒体类型以及特性执行不同的CSS
Media ：媒体，指浏览网页设备的类型 如：screen(PC/Pad/Phone),tv,tty
语法：
通过 @media 规则进行声明
@media MEDIA-TYPE and|not|only (MEDIA-FEATURE)
MEDIA-TYPE:媒体类型
取值：
1、all，默认值，所有设备
2、screen：电脑屏幕，智能手机，平板电脑
3、tv ：电视设备
MEDIA-FEATUER:媒体特性
取值：
1、width ：指定浏览器窗口宽度大小
2、min-width ：指定浏览器窗口宽度最小值
3、max-width ：指定浏览器窗口宽度最大值
ex：
1、在屏幕下，宽度在 767以内，执行操作
@media screen and (max-767px){}
2、在屏幕下，宽度在768~991之间，执行操作
@media screen and (min-768px) and (max-991px){}
@media的用法
1、有选择性的执行某个外部CSS文件
<link rel="" href="" media="screen">
<link rel="" href="" media="screen and (max-767px)">
不足：
即使不满足当前设备条件的CSS文件也会被请求，但不会生效
2、有选择性执行CSS片段中的内容
在样式表中
@media screen and (max-767px){
选择器{属性:值;}
}
常见屏幕尺寸：
1、超小屏幕(Extra Small : xs)
w <= 767
例如：手机屏幕
2、小型屏幕(Small : sm)
768 <= w <= 991
例如：pad
3、中型屏幕(Medium : md)
992 <= w <= 1199
例如：电脑屏幕
4、大型屏幕(Large : lg)
w >= 1200
例如：分辨率较大的电脑屏幕
一、Twitter Bootstrap
官网：http://getbootstrap.com
中文官网：http://www.bootcss.com
重点 bootstrap.css - 提供了上千个class
依赖于JS库 - jQuery
Bootstrap 分为 5 部分
1、起步
2、全局CSS样式
3、组件
4、JS插件
5、定制
二、Bootstrap 第一步 - 起步
基本模板：
1、<html lang="zh-cn">
指定当前文档的基础语言,zh-cn,zh-tw,jp,en
作用：
1、为浏览器的自动翻译功能指定语言基础
2、为读屏软件指定基础发音
2、<meta name="viewport"> 必须
3、<meta http-equiv="x-ua-compatible" content="IE=edge">
x-ua-compatible
Cross UserAgent Compatible
跨(IE)浏览器兼容性
作用:指定用 哪个 IE的内核进行页面渲染
IE=6 : 指定用IE6内核渲染页面
IE=7 : 指定用IE7内核渲染页面
IE=8 :
IE=9
...
IE=edge : 采用IE最新版内核渲染页面
4、两个JS
1、html5shiv.min.js
第三方的JS，自调函数，用于让老IE(IE8及以下)支持HTML5新
标记,header,footer,aside
2、respond.min.js
第三方的JS，自调函数，用于让老IE(IE8及以下)支持CSS3媒体
查询技术 - 响应式必备
通过头部引用Hack 判断是否为 IE8以及以下的浏览器
<!--[if lt IE 9]>
<script src="***.js"></script>
<script src="***.js"></script>
<![endif]-->
5、两个JS
1、jQuery.js 引入到页面中(先)
2、bootstrap.js 引入到页面中(后)
建议：尽量将以上两个文件放在页面最底端引入
三、Bootstrap 第二步 - 全局CSS样式
bootstrap.css 内容分为两部分
1、CSS Reset
*{box-sizing:border-box;}
html{font-size:10px;}
body{margin:0;font:... ...;}
h1{}...h6{}
p{}
2、上千个 class
.btn .btn-default .btn-danger
.container
.container-fluid
... ...
四、Bootstrap 默认将屏幕分成四大类
1、大型PC屏幕(lg) : w >= 1200px
2、中型PC屏幕(md) : 992px <= w <= 1199px
3、小型PAD屏幕(sm): 768px <= w <= 991px
4、超小型PHONE屏幕(xs):w <= 767px
五、Bootstrap 提供的两种容器
1、定宽容器
在不同大小的设备上提供不同的width固定值
类：.container
lg : 1170px
md : 970px
sm : 750px
xs : 100%
2、变宽容器
在任何设备中，宽度都是 100%
类：.container-fluid
100%;
六、Bootstrap 第二步 - 全局css样式-按钮
.btn
.btn-default 白底深色字
.btn-danger/success/warning/info/primary
.btn-lg/sm/xs
.btn-block 块级按钮
七、Bootstrap 第二步 - 全局css样式-列表
.list-unstyled 不带标识的列表
.list-inline 行内列表
.dl-horizontal 定义列表
八、Bootstrap 第二步 - 全局css样式-图片
.img-rounded ?
.img-circle ?
.img-thumbnail ?
.img-responsive ?
九、Bootstrap 第二步 - 全局css样式-表格
.table
.table-bordered 带边框表格
.table-striped 隔行变色表格
.table-hover 待悬停效果的表格
.table-responsive 响应式表格（为表格父元素添加）
十、Bootstrap 第二步 - 全局css样式-文本 & 排版
1、文本颜色相关
.text-danger/success/warning/info/primary
.bg-danger/success/warning/info/primary
2、文本大小写
.text-uppercase/lowercase/capitalize
3、文本对齐方式
.text-left/center/right/justify
十一、Bootstra 第二步 - 全局css样式 - 栅格布局
页面中可以实现布局的技术
1、table 布局
好处：简单，容易控制
不足：效率低
2、div + css
好处：效率高
不足：灵活，不易控制
3、栅格布局
好处：效率高，容易控制，实现响应式
不足：没有
栅格布局实际上就是由div组成的table样式的响应式结构
使用方法：
1、栅格布局系统的最外层，必须是bootstrap提供的容器
.container 或 .container-fluid
2、允许在容器中放置若干行 div.row
每行中最多等分为12列
3、行中放置 div.col 即列，每列都需要指定宽度 1/12,2/12
语法：
<div class="container">
<div class="row">
<div class="col-*-*"></div>
</div>
</div>
4、列 根据适用屏幕分成四中类型
.col-xs-*
.col-xs-1 : 在超小屏幕中，占一列的宽(8.33%)
.col-xs-2 : 在超小屏幕中，占两列的宽(16.66%)
... ...
.col-xs-12 : 在超小屏幕中，占12列的宽(100%)
.col-sm-*:
在 小型 屏幕中 所占列宽数
.col-md-*
在 中型 屏幕中 所占列宽数
.col-lg-*
在 大型 屏幕中 所占列宽数
5、列偏移数量
每个 列 都可以指定向右偏移几列位置
.col-xs-offset-n : 在 xs 下，当前列向右偏移 n列的距离
.col-sm-offset-n : sm 下，向右偏移n列
.col-md-offset-n :
.col-lg-offset-n :
6、栅格布局系统可以嵌套
.container>.row>.col-*-*>.row>.col-*-*
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-1">MD-1</div>
</div>
</div>
</div>
</div>
7、适用于不同屏幕的列的class(xs/sm/md/lg)可以兼容更大屏幕
<div class="container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-md-3"></div>
</div>
</div>
.col-xs-* : 适用于 xs/sm/md/lg
.col-sm-* : 适用于 sm/md/lg
.col-md-* : 适用于 md/lg
.col-lg-* : 适用于 lg
大屏幕class在小屏幕中，永远是垂直显示
8、可以在一个div中指定在不同屏幕下的宽度占比
<div class="col-xs-9 col-sm-6 col-md-3"></div>
在 xs 中 占9列宽
在 sm 中 占6列宽
在 md 中 占3列宽
9、指定列在特定屏幕下不显示
.hidden-lg : 在lg下隐藏
.hidden-md : 在md下隐藏
一、全局样式 - 表单
遵循HTML5的规范,共三种
1、默认表单(垂直排列)
.form-group : 定义表单控件组
.form-control ：定义表单控件
.control-label ：定义控件对应的label
.help-block ：定义提示文本
2、行内表单
为 <form> 添加 class="form-inline"
其他同上
3、水平表单
水平表单 = 表单 + 栅格布局系统
栅格 ：
最外层：.container / .container-fluid
行：div.row
列：div.col-*-*
水平表单栅格系统
最外层：form.form-horizontal / .container
行：div.form-group / div.row
列：div.col-*-*
<label class="col-md-3"></label>
<div class="col-md-6">
<input class="form-control">
</div>
<span class="col-md-3"></span>
或
<div class="col-md-3">
<label>
</div>
<div class="col-md-6">
<input class="form-control">
</div>
<div class="col-md-3">
<span class="help-block">
</div>
二、Bootstrap 第三部分 - 组件
1、下拉菜单
<select>
<option></option>
</select>
1、外层必须是 .dropdown/.dropup 或 position:relative;
2、内层：为 <button> 或 <a>
class="dropdown-toggle"
data-toggle="dropdown" ：切换内容的显示和隐藏
3、内层：
内容 <ul> 或 <div>
class="dropdown-menu"
li.divider : 分割线效果
li.disabled : 禁用菜单项
li.dropdown-header:标题
2、导航
1、标签页式导航
<ul class="nav nav-tabs">
<li class="active">
<a href="#" data-toggle="tab">....</a>
</li>
</ul>
li.active : 默认被激活
li.data-toggle="tab" ：允许切换并且指定切换方式
3、图标字体
在页面中，显示为图标，本质上是文字，可以设置字体，颜色，大小，阴影。。。。
Web程序中常用的图标字体：
1、Glyphicons 收费
2、FontAwesome 675个 免费
由于客户端不具备 bootstrap 中的图标字体，所以使用自定义的 图标字体，必须声明
在服务器端做以下操作：
***.css
/*声明字体*/
@font-face{
font-family:"名称";//自定义名称
src:url('地址 ');//图标字体文件所在路径
}
/*对使用字体图标的选择器进行声明*/
.glyphicon{
font-family:"名称";
}
使用方法：
必须保证是空元素
<span class="glyphicon glyphicon-*"></span>
练习：
创建多个按钮，在每个按钮上显示一个小图标
首页(房子),配置(齿轮),刷新,定位，购物车，放大镜，发邮件，照相机，播放相关(播放，暂停，上一曲，下一曲)
4、按钮组
将多个按钮放在一个组中(btn-group)
1、基本按钮组
<div class="btn-group">
<button class="btn btn-default">xx</button>
<button class="btn btn-default">xx</button>
</div>
2、将一组 .btn-group 组合进一个 .btn-toolbar(按钮工具栏)
<div class="btn-toolbar">
<div class="btn-group">
<button></button>
</div>
</div>
3、按钮组尺寸
为 .btn-group 增加 .btn-group-* 类 设置尺寸
<div class="btn-group btn-group-lg"></div>
<div class="btn-group btn-group-sm"></div>
<div class="btn-group btn-group-xs"></div>
4、按钮组的嵌套
在一个 btn-group 中嵌套另一个 btn-group
5、两端对齐按钮组
.btn-group .btn-group-justified
6、垂直放置的按钮组
.btn-group-vertical
5、警告框
允许将任意字符 与 可选的关闭按钮 组合在一起的结构
所有警告框 依赖于 .alert
.alert
.alert-success
.alert-danger
...
1、允许关闭的警告框
.alert-dismissible
<div class="alert alert-danger alert-dismissible">
lorem
<button class="close" data-dismiss="alert">×</button>
</div>
2、警告框中的链接
<a class="alert-link"></a>
6、面包屑导航/路径导航
.breadcrumb
<ul class="breadcrumb">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">产品大全</a>
</li>
</ul>
7、分页条
.pagination
.active : 被激活的页码
<ul class="pagination">
<li>
<a href="#">上一页</a>
</li>
<li>
<a href="#">1</a>
</li>
<li class="active">
<a href="#">2</a>
</li>
<li>
<a href="#">...</a>
</li>
<li>
<a href="#">下一页</a>
</li>
</ul>
8、分页器
.pager
<ul class="pager">
</ul>
9、标签
所有的标签都依赖于 .label
.label
.label-default
.label-danger
.label-success
...
<span class="label label-danger">标签内容</span>
10、徽章
.badge
<span class="badge">35</span>
11、巨幕
.jumbotron
12、页头
允许为 标题元素 增加适当的空间,与其他元素有一定的间隔
.page-header
13、Well (水井)
.well
14、进度条
外层：.progress
内层：
.progress-bar
.progress-bar-danger
.progress-bar-success
...
.progress-bar-striped
.active : 被激活的
通过 给内层元素 增加 style="50%" 增加宽度
15、缩略图
.thumbnail
.caption
<div class="thumbnail">
<img>
<div class="caption">
<p>文本1</p>
<p>文本2</p>
<p>按钮</p>
</div>
</div>
16、媒体对象
<div class="media">
<div class="media-left">
<img>
</div>
<div class="media-body">
<h2 class="media-heading">标题</h2>
形容的文本
</div>
<div class="media-right">
<img>
</div>
</div>
17、列表组
ul : class="list-group"
li : class="list-group-item"
18、面版
呈现头部 主体 尾部 结构的组件
<div class="panel panel-default panel-primary">
<div class="panel-heading">
<h2 class="panel-title">标题文本</h2>
</div>
<div class="panel-body">
主体内容
</div>
<div class="panel-footer">
脚注内容
</div>
</div>
一、组件 - 导航条
1、基本导航条
1、向 nav 元素添加 class.navbar .navbar-default
有需要的话，允许添加 div.container
2、向 nav 元素中添加 div.navbar-header ，内部允许包含 class 带
有 .navbar-brand <a>元素
3、允许向导航条中添加链接列表 ，只需要添加 class.nav .navbar-nav 的
列表即可
2、导航条中的表单
导航中的表单不适用bootstrap中默认class
使用的时 .navbar-form (具备垂直对齐效果),配合 .navbar-left
/ .navbar-right
3、导航条中的按钮
class.navbar-btn 允许向不在form中的button(a)增加样式(垂直居中)
4、导航条中的文本
普通文本的话，需要增加 class .navbar-text 属性来保证格式
5、组件的对齐方式
允许通过 .navbar-left 实现左浮动
允许通过 .navbar-right 实现右浮动
6、导航栏的固定
不会随着滚动条发生滚动，一直在可视化区域中
固定在页面顶端：.navbar-fixed-top
固定在页面底端：.navbar-fixed-bottom
注意：最好为body设置内边距至少 50 px
二、JS Plugin
Bootstrap 基于 jQuery ，在jQuery 基础上提供了 十几个 插件函数，每个
都是一个独立的JS文件,可以一次性引入全部的JS操作 - bootstrap.js
每个插件函数都有两种调用方式：
1、data-* 方式调用
<a data-toggle="dropdown"></a>
2、JS编程方式
手动编写JS代码完成行为的调用
<script>
$("选择器") : 在 Javascript(jQuery) 中获取页面指定选择器的元素
$("#id")
$(".class")
$("div p")
下拉列表：
$("选择器").dropdown();
</script>
三、警告框
父元素 class ="alert alert-danger alert-dismissible"
关闭：<button class="close" data-dismiss="alert"></button>
JS :
$("关闭选择器").click(function(){
$(this).alert("close");
});
四、按钮
1、设置按钮的操作文本
为 按钮元素 添加 data-loading-text="显示的文本"
<button class="btn btn-default" data-loading-text="请稍后....">文本
</button>
//点击按钮时，改变按钮的文字为 data-loading-text
$("按钮选择器").click(function(){
$(this).button("loading");
});
2、设置 单选按钮 / 复选框
1、将 若干 单选按钮 / 复选框 放到 btn-group中 ， 为btn-group增加属性 data-toggle="buttons"
五、工具提示
1、为元素增加
data-toggle="tooltip"
data-palcement="top/right/bottom/left"
title="提示的文本"
2、配合 JS 代码
$("选择器").tooltip();
六、弹出框
1、为元素增加
data-toggle="popover" //指定为弹出框方式
data-placement="top/right/bottom/left"//方向
data-content="弹出框内容区域的文本"
title="弹出框的标题";
2、配合 JS 代码如下:
$("选择器").popover();
七、标签页
1、为导航组件里面 a 增加：
1、data-toggle = "tab"
2、href="#对应元素内容的ID"
2、创建内容组
1、class 为 tab-content
2、在 内容组中 增加对应显示的内容模块
1、增加id属性
2、增加 class="tab-pane active"
ex:
<div class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab"></a>
</li>
</ul>
<div class="tab-content">
<!-- 内容1 -->
<div class="tab-pane" id="tab1">
....
</div>
</div>
</div>
八、模态对话框
模态对话框：父窗口中弹出一个子窗口，只要子窗口不关闭，父窗口就无法获得输入的焦点
模态对话框由两部分组成：
1、触发元素，通常 a / button 组成
<a href="#模态框ID" data-toggle="modal"></a>
<button data-toggle="model" data-target="#模态框ID"></button>
2、模态框元素
// 提供了半透明的遮罩层
<div class="modal" id="" data-backdrop="static">
// 提供了 宽度，高度，定位
<div class="modal-dialog">
//背景色，边框，倒角，阴影
<div class="model-content">
<div class="modal-header">
<h4></h4>
<button> ... </button>
</div>
<div class="modal-body">
显示主题内容
</div>
<div class="modal-footer">
脚注信息
</div>
</div>
</div>
</div>
九、折叠效果
1、触发元素
<a data-toggle="collapse" href="#id"></a>
<button data-toggle="collapse" data-target="#id"></button>
2、被折叠元素
<div class="collapse" id="id">
... ...
</div>
特殊效果：
1、手风琴(Accordion)
Accordion = 面板组(panel-group) + 折叠插件
一、组件 - 导航栏
1、基本导航栏
<nav class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">
Text Or Img
</a>
</div>
</nav>
2、导航栏中的表单
<form class="navbar-form"></form>
3、导航栏中的按钮
<button class="navbar-btn"></button>
4、导航栏中的独立文本
<p class="navbar-text">Text</p>
5、内容对齐方式
navbar-left / navbar-right
6、导航栏固定
顶部：.navbar-fixed-top(body给至少50px上内边距)
底部：.navbar-fixed-bottom
二、JS-插件(Plugin)
1、行为调用
1、data-*
2、$("选择器").dropdown();
2、警告框
<div class="alert-dismissible" >
<button data-dismiss="alert">×</button>
</div>
3、按钮
1、点击按钮 改变文本及状态
<button data-loading="Text"></button>
$("button").click(function(){
$(this).button("loading");
//业务逻辑处理
$(this).button("reset");
});
2、单选按钮和复选框
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-success">
<input type="radio">
</button>
</div>
4、工具提示
1、为元素增加
data-toggle = "tooltip"
data-placement="top/right/bottom/left"
title="提示的文本"
2、配合 JS 代码:
$("[data-toggle='tooltip']").tooltip();
5、弹出框
1、伪元素增加
data-toggle="popover"
data-placement="top/..."
title="弹出框的标题"
data-content="内容"
2、配合 JS 代码
$("[data-toggle='popover']").popover();
6、标签页
1、为 导航 组件 a 标记 增加
data-toggle="tab"
href="#对应的内容元素ID"
2、增加 内容组元素 <div class="tab-content">
3、为内容增加
ID :
class ：.tab-pane .active
7、模态对话框
弹出一个子窗口，如果不处理的话无法进行其他操作
1、触发元素
<a> / <button>
属性：
data-toggle="modal"
href="#对应打开的元素ID"
2、模态框元素
<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>
8、折叠(Collapse)
1、触发元素
<a href="#折叠元素的ID" data-toggle="collapse">
<button data-target="#折叠元素的ID"
data-toggle="collaps"></button>
2、折叠元素
<div id="" class="collapse">
内容
</div>
折叠组件的扩展应用：
1、Accordion
面版组(panel-group) + 折叠插件
<div class="panel-group" id="">
<div class="panel">
<div>
<a href="#展开元素的ID" data-parent="panel-group的
ID"></a>
</div>
</div>
</div>
*********************************************************************
一、折叠
1、响应式导航条
当屏幕尺寸大于 768px 时候，可以正常显示出所有的内容，当屏幕尺寸小于 768px 的时候，一部分内容就会隐藏，通过点击弹出
响应式导航条由 两部分 组成
1、class .navbar-header
用于显示 navbar-brand 和 折叠点击按钮
.navbar-brand : 定义brand内容
折叠按钮：
屏幕大于 768px 时不显示
屏幕小于 768px 时显示
class .navbar-toggle 完成以上操作
2、class .navbar-collapse
被折叠的内容，当屏幕大于 768px 正常显示
屏幕尺寸小于768px，隐藏通过 按钮 点击完成展开显示
二、广告轮播（Carousel）
1、基本
<div class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="item">
<img>
</div>
</div>
</div>
2、指定轮播时间
<div class="carousel" data-ride="carousel" data-interval="2000">
<div class="carousel-inner">
<div class="item">
<img>
</div>
</div>
</div>
3、带说明文本的轮播
<div class="carousel" data-ride="carousel" data-interval="2000">
<div class="carousel-inner">
<div class="item">
<img>
<div class="carousel-caption">
<h4>标题</h4>
<p>文本</p>
</div>
</div>
</div>
</div>
4、带方向按钮的轮播
<a href="#Carousel的ID" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#Carousel的ID" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
5、带圆点导航的轮播
<ul class="carousel-indicators">
<li class="active"
data-target="#Carousel的ID"
data-slide-to="0"></li>
</ul>
=====================================================================
Less 和 Bootstrap 定制
一、样式语言的分类
1、静态样式语言 ：CSS
可以被浏览器直接解析处理；但CSS并不是合格的语言，缺少了基本编程的要素，如：变量，运算符，函数。。。。 由于不是动态的，所以导致了CSS的可维护性差
2、动态样式语言 :
如：Less , Sass/SCSS , Stylus ...
不可以被浏览器直接解析处理；必须经过编译(Compile)得到CSS文件后，才能使用。会具备语言的基本要素 ：变量 。。。极大的提高的CSS代码的可维护性
二、Less语言
官网：http://lesscss.org
中文网：http://less.bootcss.com
Less是一本 CSS预处理语言，它扩充了CSS，在纯静态的CSS基础上增加了一部分内容 如：变量，混合(Mixin) ... 对静态CSS完全支持100%兼容
在Web项目中使用Less的两种方式：
1、在客户端浏览器中编译Less - 不推荐使用
1、编写 xx.less文件
2、编写 xx.html，引入 xx.less;再引入less.js
3、浏览器访问 xx.html 会自行下载 xx.less,less.js文件，并且在客户端进行编译转换成 xx.css
2、在服务器端编译less - 推荐使用
1、编写 xx.less
2、在服务器端搭建Less编译器，把xx.less 转换为 xx.css
3、再编写 xx.html 直接引入 xx.css 文件即可
三、搭建 Less 服务器端编译环境 - 重点&乱点
Less 编译器 实际上是由 Javascript 编写的
1、安装独立的JS解释器 - node.exe
命令行中：执行 node -v 显示 ：0.12.4 / 4.4.7
2、安装 Less 编译器程序 - less.js
确保： lessc.cmd 文件存在即可
3、在控制台中 测试 less 转换为 css
在 lessc.cmd 文件位置处 打开 控制台
输入 ：lessc.cmd D:\1.less > D:\1.css
4、在WebStrorm中 配置 FileWatchers(文件监视器)
由 WS 自动检测 less 文件的编写与更改，自动进行编译 得到 css 文件
配置 FileWatchers
WS --> File --> Settings --> Toos --> FileWatchers --> 添加 选择 Less --> 指定 lessc.cmd 文件地址即可
四、Less语法
1、Less 完全支持 CSS 语法
2、Less 支持多行注释和单行注释，只有多行注释能编译到css中
多行:/* */
单行：// 注释内容
3、Less 支持 变量(Variable)
变量：在 less 中可以变化的数据
语法：@变量名:值;
ex:
1、@jd_color:#e4393c; //颜色值
2、@border_5px; //数值
3、@base_font:"微软雅黑";//字符串
4、@border:1px solid #ddd;
使用变量：
变量是作为值，出现在css属性名称后的
@变量名;
ex:
#top{
color:@jd_color;
border-color:@jd_color;}
4、Less 变量可以 使用运算符
+,-,*,/,%
% : 取余数
5%2 结果：1
2%5 结果：2
5、Less 中支持 在一组样式中 混入 另一种样式(Mixin)
选择器1{ ... }
选择器2{ ... ;选择器1;...;}
最终：选择器2 中会包含该 选择器1定义好的样式
1、带参数的混合：
声明选择器的时候，允许使用 参数 来表示暂时不确定的数据，最
终在调用时，要将具体的数值传递进来
语法：
选择器1(@参数名1,@参数名2){
widht:@参数名1;
height:@参数名2;
}
2、使用带参的混合写法:
选择器2{
background:#fff;
选择器1(值1,值2);
}
6、嵌套规则
#top{}
#top p{}
#top p span{}
在less中，允许在一个选择器内再声明另一个选择器，以便完成 父子结
构 或 后代结构
语法：
选择器1{
...;
...;
选择器2{
...;
...;
}
}
最终编译成CSS的结果为：
选择器1{
...
...
}
选择器1 选择器2{
...
...
}
声明子代嵌套:
选择器1{
...
>选择器2{
....
}
}
7、Less中提供的 功能函数
1、lighten(@color,20%) 返回一个变亮的颜色值(颜色减淡)
ex:
color:lighten(#e4393c,20%);
2、darken(@color,30%) 返回一个变暗的颜色(颜色加深)
3、image-width("xx.jpg") 返回指定图片的宽度
4、image-height("xx.jpg")返回指定图片的高度
5、ceil(@num) 对数字向上取整
ceil(55.787865235) --> 结果为 ：56
6、floor(@num)对数字向下取整
floor(55.787865235) --> 结果为 ： 55
7、percentage(@num) 把小数转换为%数字
8、@import 功能
在 Less 中的@import ，在服务器端将多个less文件的内容整合到一个 less 文件中
语法：
xx.less
@import "xxx.less";
五、Bootstrap 定制