1. 什么是响应式网页
Responsive Web Page，响应式网页/自适应网页，即一个页面既可以在 PC 浏览器中浏览，也可以在手机、平板中浏览，并且配合不同设备有不同的响应结果，响应式网页的特点：
(1). 页面上的图片和文字要随着屏幕尺寸发生改变
(2). 页面的布局随着屏幕尺寸而发生改变
2. 视口 － viewport
IOS 中的 Safari 最早引入的概念
视口：移动设备中，浏览器里显示网页的一块区域(PC 端会忽略)
对于响应式网页，设置视口的信息：
(1). 视口的宽度：要与设备宽度一致
(2). 视口的缩放倍率：设置为 1，即不缩放
(3). 视口的手动缩放：不允许缩放网页
在 HTML 中指定视口信息：(移动端必备)
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
①. width：视口的宽度
A. device-width
设备的宽度
B. 具体数值
②. initial-scale
视口的初始缩放倍率
A. 缩放倍数
B. 原始大小
③. user-scalable
是否允许视口手动缩放
A. 1 /yes
B. 0 / no
3. 如何编写响应式网页 (重点)
(1). 必须声明视口(已解决)
(2). 文字使用相对尺寸(em,rem)，尽量不用绝对尺寸(px)
CSS 中的 1px 并不代表真实物理设备的 1px，如：iPhone4 以后，屏幕为 Retina 屏幕，屏幕大小没有变化，但分辨率提升一倍，屏幕 320 * 480，分辨率：640 * 960
em : 父元素字体大小倍数
rem : 根元素(html)字体大小倍数
(3). 容器元素使用相对尺寸(%,auto)，尽量不用绝对尺寸(px)
(4). 图片使用相对尺寸(%,auto)，尽量不用绝对尺寸(px)
(5). 页面元素使用流式布局，流式布局特点：
①. 元素默认靠向容器的左上方
②. 横向排列，排列不下则换行
方法：
①：float
②：display:inline-block
(6). 响应式网页都要使用 CSS3 Media Query 技术 - 最重要，如下所示：
①. 浏览器宽度 w < 768，背景色 红色
②. 浏览器宽度 768<= w <=991 背景色 绿色
③. 浏览器宽度 w > 991 背景色 粉色
4. CSS3 Media Query 可以根据不同的媒体类型以及特性执行不同的 CSS
@media MEDIA-TYPE and | not | only (MEDIA-FEATURE)
(1). Media ：媒体，指浏览网页设备的类型
如：screen(PC/Pad/Phone)、tv、tty
@media 的用法的用法如下：
①. 有选择性的执行某个外部 CSS 文件
<link el="" href="" media="screen">
<link rel="" href="" media="screen and (max-width:767px)">
不足：即使不满足当前设备条件的 CSS 文件也会被请求，但不会生效
②. 有选择性执行 CSS 片段中的内容
在样式表中，加针对屏幕的判定条件
@media screen and (max-width:767px){
选择器{属性:值;}
}
(2). MEDIA-TYPE：媒体类型
①. all：默认值，所有设备
②. screen：电脑屏幕，智能手机，平板电脑
③. tv：电视设备
(3). MEDIA-FEATUER:媒体特性
①. width ：指定浏览器窗口宽度大小
②. min-width ：指定浏览器窗口宽度最小值
③. max-width ：指定浏览器窗口宽度最大值
A. 在屏幕下，宽度在 767 以内，执行操作
@media screen and (max-width:767px){}
B. 在屏幕下，宽度在 768~991 之间，执行操作
@media screen and (min-width:768px) and (max-width:991px){}
C. 在横屏模式下执行的操作
@media all and(orientation :landspace){}
D. 在竖屏模式下执行的操作
@media all and(orientation :portrait){}
(4). 常见屏幕尺寸：
①. 超小屏幕(Extra Small : xs)， w <= 767，例如：手机屏幕
②. 小型屏幕(Small : sm)，768 <= w <= 991，例如：pad
③. 中型屏幕(Medium : md)，992 <= w <= 1199，例如：电脑屏幕
④. 大型屏幕(Large : lg)，w >= 1200，例如：分辨率较大的电脑屏幕
5. Twitter Bootstrap
官网：http://getbootstrap.com
中文官网：http://www.bootcss.com
bootstrap.css - 提供了上千个 class，依赖于 JS 库 - jQuery，Bootstrap 分为 5 部分
(1). 起步
(2). 全局样式
(3). 组件
(4). JS 插件
(5). 定制
６. Bootstrap 起步声明
(1). <html lang="zh-cn">
指定当前文档的基础语言 zh-cn、zh-tw、jp、en，作用：
①. 为浏览器的自动翻译功能指定语言基础
②. 为读屏软件指定基础发音
(2). <meta name="viewport"> 必须
(3). <meta http-equiv="x-ua-compatible" content="IE=edge">
①. x-ua-compatible：Cross UserAgent Compatible，跨(IE)浏览器兼容性
②. content：指定用 哪个 IE 的内核进行页面渲染
IE=6 ：指定用 IE6 内核渲染页面
IE=7 ：指定用 IE7 内核渲染页面
IE=8 ：指定用 IE8 内核渲染页面
IE=9 ：指定用 IE9内核渲染页面
IE=edge ：采用 IE 最新版内核渲染页面
(4). 两个 JS
①. html5shiv.min.js，第三方的 JS，自调函数，用于让老 IE(IE8 及以下)支持 HTML5 新标记 header、footer、aside
②. respond.min.js，第三方的 JS，自调函数，用于让老 IE(IE8 及以下)支持 CSS3 媒体查询技术 - 响应式必备
通过头部引用 Hack 判断是否为 IE8 以及以下的浏览器
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<script src="respond.min.js"></script>
<![endif]-->
(5). 两个 JS
①. jQuery.js 引入到页面中(先)
②. bootstrap.js 引入到页面中(后)
建议：尽量将以上两个文件放在页面最底端引入
７.Bootstrap 全局 CSS 样式，bootstrap.css 内容分为两部分
(1). CSS Reset(很多依赖于normalize.css,可以屏蔽浏览器兼容性)
(2). 上千个 class
.btn .btn-default .btn-danger
８. Bootstrap 默认将屏幕分成四大类
(1). 大型 PC 屏幕(lg) : w >= 1200px
(2). 中型 PC 屏幕(md) : 992px <= w <= 1199px
(3). 小型 PAD 屏幕(sm): 768px <= w <= 991px
(4). 超小型 PHONE 屏幕(xs): w <= 767px
9. Bootstrap 提供的两种容器
(1). 定宽容器，在不同大小的设备上提供不同的 width 固定值
①. class: .container
②. lg : width:1170px
③. md : width:970px
④. sm : width:750px
⑤. xs : width:100%
(2). 变宽容器，在任何设备中，宽度都是 100%
class: .container-fluid
width: 100%
10. Bootstrap 全局 CSS 样式 － 按钮.btn
(1). .btn
默认按钮
(2). .btn-default
白底深色字
(3). .btn-danger/success/warning/info/primary
按钮危险/成功/警告/信息/首选
(4). .btn-lg/sm/xs
按钮大 中 小
(5). .btn-block
块级按钮
11. Bootstrap 全局 css 样式 － 列表.list
(1). .list-unstyled
不带标识的列表
(2). .list-inline
行内列表
(3). .dl-horizontal
定义列表
12. Bootstrap 全局 css 样式－ 图片.img
(1). .img-rounded
倒圆角
(2). .img-circle
圆形
(3). .img-thumbnail
缩略图
(4). .img-responsive
响应式(改为块级，独立成行了)
13. Bootstrap 全局 css 样式-表格.table
(1). .table
普通表格
(2). .table-bordered
带边框表格
(3). .table-striped
隔行变色表格
(4). .table-hover
待悬停效果的表格
(5). .table-responsive
响应式表格（为表格父元素添加）
14. Bootstrap 全局 css 样式 － 文本 & 排版.text
(1). 文本颜色相关
①. .text-danger/success/warning/info/primary
文本 危险/成功/警告/信息/首选
②. .bg-danger/success/warning/info/primary
背景 危险/成功/警告/信息/首选
(2). 文本大小写
①. .text-uppercase/lowercase/capitalize
全部大写/全部小写/单词首字母大写
(3). 文本对齐方式
①. .text-left/center/right/justify
(4). 引用样式
①. <blockquote>
15. Bootstrap 全局 css 样式 － 栅格布局，在页面中可以实现布局的技术：
(1). table 布局
好处：简单，容易控制
不足：效率低
(2). div css
好处：效率高
不足：灵活，不易控制
(3). 栅格布局
好处：效率高，容易控制，实现响应式
不足：没有
栅格布局实际上就是由 div 组成的 table 样式的响应式结构
使用方法：
①. 栅格布局系统的最外层，必须是 bootstrap 提供的容器
.container 或 .container-fluid
②. 允许在容器中放置若干行 div.row
每行中最多等分为 12 列
③. 行中放置 div.col 即列，每列都需要指定宽度 1/12、2/12
④. 列 根据适用屏幕分成四种类型
A. .col-xs-*
a. .col-xs-1 : 在超小屏幕中，占一列的宽(8.33%)
b. .col-xs-2 : 在超小屏幕中，占两列的宽(16.66%)
c. .col-xs-12 : 在超小屏幕中，占 12 列的宽(100%)
B. .col-sm-*：在小型屏幕中 所占列宽数
C. .col-md-*：在中型屏幕中 所占列宽数
D. .col-lg-*： 在大型屏幕中 所占列宽数
⑤. 列偏移数量，每个列都可以指定向右偏移几列位置（不能用float）,偏移的列会影响后续的列,主要作用是列左右留白，列右对齐，列居中
A. .col-xs-offset-n :在 xs 下，当前列向右偏移 n 列的距离
B. .col-sm-offset-n :在 sm 下，当前列向右偏移 n 列的距离
C. .col-md-offset-n :在 md 下，当前列向右偏移 n 列的距离
D. .col-lg-offset-n :在 lg 下，当前列向右偏移 n 列的距离
⑥. 列排序数量,控制某列向右或向左移动，并不影响其它的列,主要作用是在特定的屏幕下临时调整列的出现位置
A、col-lg-push-n: 在 lg下，当前列向右移动n 列的距离
B、col-lg-pull-n: 在 lg下，当前列向左移动n 列的距离
⑦. 栅格布局系统可以嵌套
⑧. 适用于不同屏幕的列的 class(xs/sm/md/lg)，可以兼容更大的屏幕
大屏幕 class 在小屏幕中，永远是垂直显示
A. .col-xs-* : 适用于 xs/sm/md/lg
B. .col-sm-* : 适用于 sm/md/lg
D. .col-md-* : 适用于 md/lg
E. .col-lg-* : 适用于 lg
⑨. 可以在一个 div 中指定在不同屏幕下的宽度占比，相同的占比可简写为一个
语法：<div class="col-xs-9 col-sm-6 col-md-3"></div>
释义：在 xs 中 占 9 列宽、在 sm 中 占 6 列宽、在 md 中 占 3 列宽
⑩. 指定列在特定屏幕下不显示
A. .hidden-lg : 在 lg 下隐藏
B. .hidden-md : 在 md 下隐藏
C. .hidden-sm : 在 sm 下隐藏
D. .hidden-xs : 在 xs 下隐藏
16. Bootstrap 全局 CSS 样式 - 表单.form-group，遵循 HTML5 的规范，共三种
(1). 默认表单(垂直排列)
①. .form-group
定义表单控件组
②. .form-control
定义表单控件
③. .control-label
定义控件对应的 label
④. .help-block
定义提示文本
(2). 行内表单，为 <form> 添加 class="form-inline"，注意label要写成class=“sr-only”，help-block不要了，写placeholder
(3). 水平表单， 水平表单 = 表单 栅格布局系统
①. 栅格
A. 最外层：.container / .container-fluid
B. 行：div.row
C. 列：div.col-*-*
②. 水平表单栅格系统
A. 最外层：form.form-horizontal (正常情况 .container)
B. 行：div.form-group /(正常情况div.row)
C. 列：div.col-*-*
(4). checkbox及radio表单的特殊写法(H5规范)
17. Bootstrap 组件 －下拉菜单.dropdown
(1). 外层必须是 .dropdown/.dropup 或 position:relative；
(2). 内层：为 <button> 或 <a>
data-toggle="dropdown" ：切换内容的显示和隐藏
(3). 内层 <ul> 或 <div>
class="dropdown-menu"
①. li.divider : 分割线效果
②. li.disabled : 禁用菜单项
③. li.dropdown-header: 标题
18. Bootstrap 组件 － 导航.nav
标签页式导航，语法如下:
(1). li.active ： 默认被激活
(2). li.data-toggle="tab" ：允许切换并且指定切换方式
19. Bootstrap 组件 － 图标字体.glyphicons
在页面中，显示为图标，本质上是文字，可以设置字体，颜色，大小，阴影等，Web程序中常用的图标字体：
(1). Glyphicons 收费
(2). FontAwesome 675 个 免费
由于客户端不具备 bootstrap 中的图标字体，所以使用自定义的图标字体必须声明，需要在服务器端做以下操作：
(1). 声明字体
(2). 对使用字体图标的选择器进行声明
(3). 使用方法：必须保证是空元素
20. Bootstrap 组件 － 按钮组.btn-group
(1). 基本按钮
(2). 将一组 .btn-group 组合进一个 .btn-toolbar(按钮工具栏)
(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
21. Bootstrap 组件 －警告框.alert，允许将任意字符与可选的关闭按钮组合在一起的结构
(1). .alert-success/danger/info/warning
成功/危险/信息/警告
(2). .alert-dismissible
允许关闭的警告框
(3). alert-link 警告框中的连接
<a href="#" class="alert-link"></a>
22. Bootstrap 组件－面包屑导航.breadcrumb
23. Bootstrap 组件－分页条.pagination
(1). .active 被激活的页码
24. Bootstrap 组件－分页器 .pager
25. Bootstrap 组件－标签.label
<span class="label label-danger">标签内容</span>
(1). .label-default
默认
(2). .label-primary/success/info/warning /danger
标签首选/成功/信息/警告/危险
26. Bootstrap 组件－徽章.badge
语法：<span class="badge">35</span>
27. Bootstrap 组件－巨幕.jumbotron，如果想让巨幕组件的宽度与浏览器宽度一致并且没 有 圆 角 ， 请 把 此 组 件 放 在 所 有 .container 元 素 的 外 面 ， 并 在 组 件 内 部 添 加 一个 .container 元素.
28. Bootstrap 组件－页头.page-header，允许为标题元素增加适当的空间，与其他元素有一定的间隔
29. Bootstrap 组件－水井.well
30. Bootstrap 组件－进度条.progress
(1). .progress-bar
进度条类名，必须
(2). .progress-bar-danger/success/info/warning/
危险/成功/信息/警告
(3). .progress-bar-striped
动画效果
(4). .active
被激活的
(5). .aria-valuemin/valuenow/valuemax
最小值/当前值/最大值
(6). style="width:50%"
增加宽度
31. Bootstrap 组件－缩略图.thumbnail
(1). .caption 标题
32. Bootstrap 组件－媒体对象.media
(1). .media-left：左部分
(2). .media-body：主体
(3). .media-right：右部分
(4). 语法
33. Bootstrap 组件－列表组.list-group
(1). ul：class="list-group"
(2). li：class="list-group-item"
34. Bootstrap 组件－面板.panel，呈现头部主体尾部结构的组件
(1). .panel-default
默认面板
(2). .panel-heading
面板头部（标题容器）
(3). .panel-body
面板主体
(4). .panel-footer
面板脚注
(5). .panel-title
面板标题
(6). .panel-primary/success /info/warning/danger
面板首选/成功/信息/警告/危险
(7). 示例
35. Bootstrap 组件－导航条.navbar
(1). 基本导航条
①. 向 nav 元素添加 class.navbar .navbar-default，有需要的话，允许添加 div.container
②. 向 nav 元素中添加 div.navbar-header，内部允许包含 class 带有 .navbar-brand <a>元素
③. 允许向导航条中添加链接列表，只需要添加 class.nav .navbar-nav 的列表即可
(2). 导航条中的表单，不适用 bootstrap 中默认 class，使用的时 .navbar-form (具备垂直对齐效果)，配合 .navbar-left / .navbar-right
语法: <form class="navbar-form"></form>
(3). 导航条中的按钮，class.navbar-btn 允许向不在 form 中的 button(a)增加样式(垂直居中)
语法：<button class="navbar-btn"></button>
(4). 导航条中的文本，普通文本需要增加 class .navbar-text 属性来保证格式
语法：<p class="navbar-text">Text</p>
(5). 组件的对齐方式，允许通过 .navbar-left 实现左浮， .navbar-right 实现右浮动
(6). 导航栏的固定，不会随着滚动条发生滚动，一直在可视化区域中
①. 固定在页面顶端：.navbar-fixed-top
②. 固定在页面底端：.navbar-fixed-bottom
注意：最好为 body 设置内边距至少 50 px
36. JS 插件.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>
37. JS 插件－警告框 alert.js
(1). 父元素
class ="alert alert-danger alert-dismissible"
(2). 关闭按钮，位于父元素的第一个子元素.
<button class="close" data-dismiss="alert"></button>
(3). 示例
38. JS 插件－按钮 botton.js
(1). 设置按钮的操作文本，为 按钮元素 添加 data-loading-text="显示的文本"
(2). 设置单选按钮 /复选框，将若干单选按钮 / 复选框放到 btn-group 中，为 btn-group增加属性 data-toggle="buttons"
39. JS 插件－工具提示 tooltip.js
(1). data-toggle="tooltip" 定义提示工具条
(2). data-palcement="top/right/bottom/left" 提示的方向
(3). title="提示的文本"
JS :$("[data-toggle='tooltip']").tooltip();
40. JS 插件－弹出框 popover.js，为伪元素增加下列 class
(1). data-toggle="popover" //指定为弹出框方式
(2). data-placement="top/right/bottom/left"//方向
(3). data-content="弹出框内容区域的文本"
(4). title="弹出框的标题"
JS : ("[data-toggle='popover']").popover();
41. JS 插件－标签页 tab.js
(1). 为导航组件里面 a 增加
①. data-toggle = "tab"
②. href="#对应元素内容的 ID"
(2). 创建内容组
①. class 为 tab-content
②. 在 内容组中 增加对应显示的内容模块
A. 增加 id 属性
B. 增加 class="tab-pane active"
42. JS 插件－模态对话框 modal.js ，父窗口中弹出一个子窗口，只要子窗口不关闭，父窗口就无法操作，模态对话框由两部分组成：
(1). 触发元素，通常 a / button 组成
①. <a href="#模态框 ID" data-toggle="modal"></a>
②. <button data-toggle="model" data-target="#模态框 ID"></button>
(2). 模态框示例
43. JS 插件－折叠效果 collapse.js
(1). 触发元素
①. <a data-toggle="collapse" href="#id"></a>
②. <button data-toggle="collapse" data-target="#id"></button>
(2). 被折叠元素
<div class="collapse in" id="id"></div>
(3). 特殊效果：手风琴(Accordion)，此效果分为面板组(panel-group)和折叠插件两部分
(4). 响应式导航条
当屏幕尺寸大于 768px 时候，可以正常显示出所有的内容，当屏幕尺寸小于 768px时候，一部分内容就会隐藏，通过点击弹出，响应式导航条由两部分组成.
①. class .navbar-header
用于显示 navbar-brand 和折叠点击按钮
②. class.navbar-brand
定义 brand 内容
③. class.navbar-togglte
定义折叠按钮
④. class .navbar-collapse
折叠按钮，当屏幕大于 768px 正常显示，屏幕尺寸小于 768px隐藏，通过按钮点击完成展开显示
注意：响应式导航条的结构——只有从手机屏幕才能看出来
(5). 导航条的种类
①. 按颜色
A. 浅色底深色字
.navbar.navbar-default
B. 深色底浅色字
.navbar.navbar-inverse
②. 按定位
A. 相对定位(占空间)
.navbar
B. 固定定位(不占空间)
.navbar.navbar-fixed-*
③. 按位置
A. 固定在顶部
.navbar.navbar-fixed-top
B. 固定在底部
.navbar.navbar-fixed-bottom
44. JS 插件－广告轮播 Carousel
45. Less 和 Bootstrap 定制
样式语言的分类有分两种
(1). 静态样式语言：CSS
可以被浏览器直接解析处理，但 CSS 并不是合格的语言，缺少了基本编程的要素，如：变量，运算符，函数...... 由于不是动态的，所以导致了 CSS 的可维护性差
(2). 动态样式语言:
如：Less , Sass, Stylus
不可以被浏览器直接解析处理；必须经过编译(Compile)得到 CSS 文件后，才能使用,具备语言的基本要素：变量...... 极大的提高的 CSS 代码的可维护性
46. Less 语言
Less 是一本 CSS 预处理语言，它扩充了 CSS，在纯静态的 CSS 基础上增加了一部内容 如：变量，混合(Mixin) ... 对静态 CSS 完全支持 100%兼容
官网：http://lesscss.org
中文网：http://less.bootcss.com
在 Web 项目中使用 Less 的两种方式：
(1). 在客户端浏览器中编译 Less - 不推荐使用
①. 编写 xx.less 文件
②. 编写 xx.html，引入 xx.less;再引入 less.js
③. 浏览器访问 xx.html 会自行下载 xx.less，less.js 文件，并且在客户端进行编译转换成 xx.css
(2). 在服务器端编译 less - 推荐使用
①. 编写 xx.less
②. 在服务器端搭建 Less 编译器，把 xx.less 转换为 xx.css
③. 再编写 xx.html 直接引入 xx.css 文件即可
47. 搭建 Less 服务器端编译环境 - 重点&乱点
Less 编译器实际上是由 Javascript 编写的
(1). 安装独立的 JS 解释器 - node.exe
查看是否安装成功在命令行中执行 node -v 显示其安装版本如: 4.4.7
(2). 安装 Less 编译器程序 (npm安装包解压即可)
确保C:npmnode_moduleslessbinlessc文件存在即可
(3). 将less文件转为css文件(必须要是UTF-8格式,WS里面要设置)
①. 第一种方法：在控制台中 测试 less 转换为 css
输入 ：node C:npmnode_moduleslessbinlessc E:xx.less =>E:xx.css
以上命令行的路径可更改，必须与文件路径一致即可，执行成功后，E盘会多出一个xx.css文件
②. 第二种方法：在 WebStrorm 中 配置 FileWatchers(文件监视器)，由 WS 自动检测 less 文件的编写与更改，自动进行编译得到 css 文件
配置 FileWatchers
WS =>File => Settings => Toos => FileWatchers => 添加 选择 Less =>在”program”里面 指定lessc.cmd 文件地址即可
在编译好的文件里敲两个空格，保存，编译好的css文件就会在less文件目录下
48. Less 语法
(1). Less 完全支持 CSS 语法
(2). Less 支持多行注释和单行注释，只有多行注释能被编译到 css 中
多行: /* 注释内容 */
单行: // 注释内容
(3). Less 支持变量(Variable)，变量就是在 less 中可以变化的数据
①. 声明变量(变量可以是任意合法的值)
语法: @变量名:值；
A. @jd_color:#e4393c;
B. @border_width:5px;
C. @base_font:"微软雅黑";
D. @border:1px solid #ddd;
②. 使用变量(声明变量必须使用后less文件才能自动转换成css文件)
语法: 属性:@变量名;
#top{
color:@jd_color;
border:@std_width @nomal_border @jd_color;
}
(4). Less 变量可以使用运算符( 、－、*、/、%)
49. Less 中支持在一组样式中混入另一种样式(Mixin)
(1). 样式嵌套
选择器 1{ ... }
选择器 2{ ... ;选择器 1;...;}
最终：选择器 2 中会包含该 选择器 1 定义好的样式,可以实现样式无限的嵌套
(2). 带参数的混合
声明选择器的时候，允许使用参数来表示暂时不确定的数据，最终在调用时，要将具体的数值传递进来
选择器 1(@参数名 1,@参数名 2){
width:@参数名 1;
height:@参数名 2;
}
(3). 使用带参的混合写法
选择器 2{
background:#fff;
选择器 1(值 1,值 2);
}
50. 嵌套规则
#top{}
#top p{}
#top p span{}
在 less 中，允许在一个选择器内再声明另一个选择器，以便完成父子结构或后代结构
选择器 1{...
选择器 2{...}
}
最终编译成 CSS 的结果为
选择器 1{...}
选择器 1 选择器 2{...}
51. Less 中提供的功能函数
(1). lighten(@color,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). & 相当于this的作用 a:hover=a{&:hover}
52. @import 功能
在 Less 中的@import ，在服务器端将多个 less 文件的内容整合到一个 less 文件中
@import "xxx.less";
在CSS中使用@import功能将多个CSS文件导入一个文件后再引入该文件，会增加服务器的请求次数，而在Less中使用@import它会将引入的多个css或是less文件编译后成为一个css文件，不会增加服务器的请求次数
53. Bootstrap的订制流程
(1). 删除工程目录下的bootstrap.css或是bootstrap.min.css文件，删除html文件里面的引入文件语句
(2). 在工程目录下新建“less”文件夹,将bootstrap源代码拷贝到文件夹下，webstrom会自动编译所有的less文件
(3). 将自定义的css文件后辍名改为less,在此文件开头输入:@import "../less/bootstrap.less"; 系统会生成新的css文件
(4). 自定义css文件时，所有的变量都存在variables.less文件夹里面,修改里面声明的变量值，bootstrap.less会随着更改，而自定义的less文件引入了bootstrap.less文件也会随着更改，所以在自定义的less文件里面相关属性值可以引用variables.less里面的变量名
54. 通过修改Bootstrap的less源文件实现定制
(1). Bootstrap瘦身，删除不必要的样式
用“//”注释掉bootstrap.less中不需要的@import即可
(2). 修改Bootstrap默认的样式值，实现粗粒度定制
修改variable.less中的变量值即要
(3). 修改Bootstrap组件的细节样式，实现细粒度定制
修改特定的组件对应的less文件,如dropdown.less
55. 项目不允使用Bottstrap时，提取以下css样式文件
(1). @import "variables.less";
变量文件
(2). @import "mixins.less";
混合文件
(3). @import "normalize.less";
样式重置文件
(4). @import "scaffolding.less";
脚手架，基础设置文件
(5). @import "grid.less";
栅格布局文件
