复习：
Bootstrap是一个HTML+CSS+JS功能框架，简化了移动设备优先的响应式页面的编写。
1.轮播广告(Carousel)
必需的基本结构：
<div class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"></div>
<div class="item"></div>
</div>
</div>
此外，还可以在.carousel中添加引导器：
<ul class="carousel-indicators">
<li data-target="#myad1" data-slide-to="0"></li>
</ul>
此外，还可以在.carousel中添加下一个/上一个控件:
<a href="#myad1" data-slide="prev|next" class="carousel-control">
<span class="glyphicon glyphicon-chervron-left|right"></span>
</a>
练习：定制：把.carousel-control默认提供的半透明的渐变遮罩层去掉。 向左/右图标改为60px;
img{
max-width: 100%;
width: 100%;
}
2.附加导航(Affix)
提示：.affix 没有为导航中的项提供任何特殊样式！需要开发者自定义导航项样式！
3.使用jQuery实现页面的滚动
$(触发元素).click(function(){
$('body').animate({
scrollTop: '300px'
}, 500);
});
4.Bootstrap 提供的jQuery插件 —— 滚动监听
滚动监听插件：将body的滚动事件与一个.nav关联起来，实现当页面内容滚动时(判断滚动距离与页面中的某个元素的offsetTop相等)，指定的.nav中的某一项会处于.active状态
<body data-spy="scroll" data-target="#mynav-parent">
...
<div id="mynav-parent">
<ul class="nav">
<li ><a href="#a1">Home</a></li>
<li><a href="#a2">Contact</a></li>
</u>
</div>
...
<xx id="a1">
...
<xx id="a2">
5.CSS动态样式语言
h1 {
border-color: #eee;
border-width: 1px;
border-style: solid;
}
.box {
border-color: #eee;
border-width: 1px;
border-style: solid;
border-radius: 5px;
}
动态样式语言：为CSS提供扩展功能的语言，如变量、函数、参数、判断等。
常见动态样式语言： Sass/Scss、less、Stylus等
less：可以看做Sass的继任者，语法更趋向于传统的CSS。可以让CSS的编写工作量极大的减少，尤其适用于大型项目大量CSS样式的编写。
@danger: #e00;
.text-danger {
color: @danger;
}
.bg-danger {
}
.alert-danger{
}
注意：一般的浏览器只能处理HTML+CSS+JS，无法理解动态样式语言！必须要安装动态样式语言的解释器/编译程序，把动态样式语句转换/编译为传统的CSS。
6.搭建LESS语言的运行环境
LESS语言有两种运行方式：
(1)服务器端运行：在服务器端安装less编译器，把.less=>.css，在页面中使用转换出来的.css，客户端下载并处理的是传统的CSS！
(2)客户端运行：直接把.less文件嵌入在网页中！客户端下载.less文件，最新的浏览器中若内嵌了less解释器，就可以在渲染页面时实时把less语句转换为css样式——不推荐使用！
在服务器端使用less的步骤：
(1)安装NodeJS及附带npm(Node Package Manager)
(2)使用npm在线下载并安装node的扩展程序——lessc
npm install -g less
(3)安装完成后，lessc编译器会自动保存在:
C:\Users\Administrator\AppData\Roaming\npm
(4)lessc.cmd编译器有两种使用方法：
1)直接在命令行中调用 lessc src.less > dest.css
2)把lessc.cmd指定给WebStorm编辑器中的FileWatcher，让WebStorm自动调用lessc.cmd实现.less => .css
node / npm -> lessc
LESS官网： lesscss.net 、 lesscss.cn
LESS语法：
(1)变量： @变量名: 值 ;
(2)混合/混入：
.class1 {
}
.class2 {
}
.class3{
.class1;
.class2;
}
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
