1.下拉菜单
<div class="dropdown">
<a href="" data-toggle="dropdown">触发元素</a>
<div class="dropdown-menu">隐藏元素</div>
</div>
2.bootstrap---字体(图标)组件
服务器端的字体
(1)web服务器中的项目目录中必须有相应的字体
(2)css中声明一个新的字体文件,并且指定下载的地址
@font-face{
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
}
(3)声明一个基础的class来使用字体
.glyphicon {
font-family: 'Glyphicons Halflings';
}
3.bootstap-进度条
4.面包屑,徽章,巨幕,水井
5.bootstrap---js插件
下拉菜单,手风琴,响应式导航,轮播广告,
6.bootstrap---less
样式语言分类
(1)静态样式语言
css可以被浏览器解析,但是作为一门语言,不完整,缺少编程语言里基础必须的概念,如变量,数据类型,运算符,函数..导致样式可维护性差
(2)动态样式语言/样式的预处理语言
有三种:less/stylus/Sass,在css语言的基础上添加了编程语言的特性,数据类型,变量,函数,运算符,继承提高了可维护性
注意:浏览器只解析css语言,不能解析动态样式语言,所以所有的动态样式语言必须编译成css样式语言,才能使用。
less语法
less的使用方式:2种
(1)客户端使用less---学习
编写一个x.less文件,在html中引入less文件,同时在html文件中引入一个less.js的文件,客户端请求html,客户端允许js文件,将x.less文件编译成x.css文件
缺点:会减慢客户端对样式的呈现速度
(2)在服务器端使用less
编写less文件,在开发的电脑上安装less编译程序,执行编译程序,将less文件编译成css文件,在html中直接引入css文件
(2.1)在开发电脑上安装编译程序
1.下载并安装js解析器----node
在命令窗口输入node -v 查看node版本号
2.下载并安装less编译环境 lessc
3.启动js解析器,执行less编译程序,把指定的x.less编译成x.css
lessc e:/x.less e:/x.css
1.less语法
(1)less支持所有的css语法
(2)less支持单行和多行注释,只有多行注释被编译到css文件中
(3)less中支持变量“varible”的概念
定义:@变量名:值;
使用:color:@变量名
(4)less支持变量和常量的算术运算
+ - * /
(5)less支持在一个选择器中"混入Mixin",在另一个选择器中定义样式
选择器1{}
选择器2{选择器1}
(6)less在样式混入时可以指定参数
选择器1(@参数1,@参数2,@参数3:solid...){
}
选择器2{选择器1(19px,"#fff")}
(7)less支持嵌套
选择1{
选择器2{}
}
选择器1{}
选择器1 选择器2{}
(8)less提供了几个样式操作函数
Ceil()
Floor()
Percentage(num) 将小数转换为百分比函数
Darken(color,percentage)将指定的颜色变暗
lighten(color,percentage) 将指定的颜色变淡
Image-width(url) 返回图片的宽度
Image-height(url) 返回图片的高度
(9)less可以使用@import实现文件的包含
可以把一个大型项目所需的less分开保存在不同的源文件,有利 于实现分工协作
(10)通过bottstrap中的less文件实现订制
bootstrap中的订制实现了三个目标
(1)瘦身:删除不需要的样式
只需要注释掉bootstrap中不需要的@import
(2)粗粒度订制
只需要修改varible.less中的变量就可以
(3)细粒度订制