bootstrap
2016-10-21 20:42:04 0 举报AI智能生成
Bootstrap 知识体系
作者其他创作
大纲/内容
响应式及起步
响应式原理
什么是响应式布局
介绍
特点
优缺点
优点
1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
3.相比app，无需安装成本，迭代更新容易
缺点
1.兼容各种设备工作量大，效率底下
2.代码累赘，会出现隐藏无用的元素，加载时间加长
网站案例
http://www.ghostchina.com/
http://www.golaravel.com/
http://expo.bootcss.com/
媒体查询 Media Query
代码演示
<!--<link media="all and (min-width:990px)" rel="stylesheet" href="css/pc.css">-->
<!--<link rel="stylesheet" href="css/pad.css">-->
<!--<link rel="stylesheet" href="css/phone.css">-->
@media screen and (min-width:990px){
div{
border:1px solid #3c763d;
background-color:#67b168;
color:#3c763d;
}
}
@media screen and (min-width:780px) and (max-width:989px){
div{
border:1px solid #2b669a;
background-color:#46b8da;
color:#2b669a;
}
}
@media screen and (max-width:779px){
div{
border:1px solid #ac2925;
background-color:#ce8483;
color:#ac2925;
}
}
练习
作用
根据客户端浏览器设备的特性，有选择的执行部分CSS功能
Media
指浏览网页的设备，如 screen、print、 tv 等
Query
查询出当前浏览器设备的特性，如类型，宽度，高度，分辨率，色彩位深，方向 Orientation( Landscape / Portrait)
测试响应式网页
使用真实物理设备
效果可靠但任务量大
模拟测试软件
chrome 浏览器
下载与安装
官网
http://getbootstrap.com/
中文技术网站
CDN
Content Delivery Network 内容分发网络
新浪：http://lib.sinaapp.com/
基本模板
视口 viewport 概念
bootstrap引入
代码演示
开发工具
editplus
webMatrix
webstorm
注意
避免使用绝对单位px
用相对单位代替 ( %, auto, em 等）
使用流式布局
float
图片大小实现自适应
img{ max-width:100% }
bootlint
全局CSS样式
移动设备优先
html 样式审查
10px
box-sizing: content-box border-box 区别
content-box: 一个盒子的总宽度 = margin + padding + border + width
border-box: 一个盒子的总宽度 = margin + width ( padding 和 border 都算入 width )
Normalize.css 和 reset.css
功能
差异
布局容器
container
container-fluid
代码演示
*如何解决父元素的第一个子元素的margin-top越界问题
问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent1{
width:400px;
height:200px;
background-color:#faa;
}
.parent2{
width:400px;
height:200px;
background-color:#afa;
}
.child2{
width:200px;
height:100px;
background-color:#aaf;
margin-top:10px;
}
</style>
</head>
<body>
<div class="parent1"></div>
<div class="parent2">
<div class="child2"></div>
</div>
</body>
</html>
解决方案
给父元素加border-top
有副作用
多了一个边框
给父元素家padding-top
有副作用，导致距离变大
给父元素加 overflow:hidden
副作用，内容必须隐藏
*如何解决所有子元素浮动后父元素高度变为0,且影响后面的元素 问题
问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.parent{
width:800px;
/*height:500px;*/
background:#faa;
}
.child1{
width:400px;
height:100px;
float:left;
background:#afa;
}
.child2{
width:400px;
height:100px;
float:left;
background:#aaf;
}
</style>
</head>
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
<hr>
</body>
</html>
解决方案
1.为父元素指定 overflow:hidden; 有副作用
2.为元素指定高度
有局限性
子元素内容不确定
3.后面元素加上样式 clear:both
4.后置内容生成
.parent:after{
content:"";
display:table;
clear:both;
}
栅格系统
原理
排版布局
表格
优势：简单，结构清晰
不足：加载效率
div+css
优势：加载效率高，速度快，灵活
不足：不易控制
栅格(Grid Layout) 布局系统
优势：加载速度快，灵活，支持响应式功能，容易控制（有行/列的概念，但使用DIV + CSS 实现）
参数
设置
列设置
嵌套
列偏移
.col-md-offset-*
http://v3.bootcss.com/css/#grid-offsetting
列排序
.col-md-push-*
.col-md-pull-*
跨设备组合
清除浮动
.clearfix
visible
http://v3.bootcss.com/css/#grid-responsive-resets
示例代码
注意
1.row必须包含在container 或者 container-fluid 之中
2.每行只能包含12列等份，超过将另起一行。
3.列必须包含在row之中
4.列设置小分辨率 向 大分辨率兼容
代码示例
特点
1）分为多行（row）,一行中平均分为12列
2）内容只能放在col中，不能直接放在row中
3）所有的row必须放在容器中： .container 或 .container-fluid 之中
图片
响应式图片
.img-reponsive
图片形状
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
IE8不支持
代码演示
排版和链接
body
background-color: #fff;
Normalize.css
标题
H1-H6
标题样式
.h1 - .h6
副标题
标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。
p
中心内容 .lead
对齐方式
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
强调文本
small
strong
em
cite
缩略语
<abbr title="">
子主题
地址元素
<address>
代码标签
<code>
<kbd>
<pre>
<var>
列表
无样式列表 .list-unstyled
内联列表 .list-inline
dl .dl-horizontal
表格
基本表格
class=table
条纹表格
table-striped
带边框
.table-border
紧凑型表格
.table-condensed
表格更加紧凑，单元格中的内补（padding）均会减半。
响应式表格
.table-responsive
将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格
响应式表格在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。
鼠标悬停
.table-hover
行 状态类
.active
.success
.info
.warning
.danger
表单
基本表单
.form-group
使每组控件之间保持一定间距 15px
不要将表单组直接和输入框组( .input-group )混合使用。建议将输入框组嵌套到表单组中使用。
.form-control
内联表单
.form-inline
.sr-only
水平排列表单
.form-horizontal
起到row的作用，元素的排列需要用到栅格系统
栅格设置不能放在 .form-group 一起
默认栅格系统： .container > .row > .col-* 水平表单中的栅格系统： .form-horizontal > .form-group > .col-*
控件支持
包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
datetime chrom，ie等不支持
控件状态
静态控件
将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
焦点状态
autofocus
只读状态
readonly
禁用状态
disabled
可以为fieldset 设置disabled属性，使包含的所有控件禁用
校验状态
.has-warning .has-error .has-success
任何包含在定义了这些类的元素之中的控件，如果有.control-label .form-control 和 .help-block类属性，将呈现校验状态样式
控件尺寸
.input-lg设置高度
.col-lg-*设置宽度
.form-group-lg 或 .form-group-sm 为 .form-horizontal包裹的label元素和表单控件快速设置尺寸
辅助文本
.help-block
按钮
按钮样式
.btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link
尺寸
.btn-lg
.btn-sm
.btn-xs
.btn-block
状态
激活状态 .active
禁用状态 disabled 属性
多标签支持
强烈建议尽可能使用<button>元素来获得各浏览器相匹配的效果
图片
响应式图片
.img-responsive
图片形状
.img-rounded
.img-circle
.img-thumbnail
ie8及以下版本不支持
辅助类
文本颜色
text-muted
text-primary
text-success
text-info
text-warning
text-danger
文本背景颜色
bg-primary
bg-success
bg-info
bg-warning
bg-danger
关闭按钮
class="close" ×
三角符号
.caret
浮动
.pull-left
.pull-right
.center-block
清除浮动 .clearfix
隐藏与显示
隐藏
.hidden
显示
.show
响应式工具
组件
字体图标
使用方式
<span class="glyphicon glyphicon-search"></span>
要求
不要和其他组件混合使用
只对内容为空的元素起作用
路径
font字体相对路径不要改变
文件夹名称也不能改变
改变相对路径，修改Less，重新编译
引用服务器端字体的方式
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
练习
下拉菜单
基本实现
div .dropdown .dropup
button
ul .dropdown-menu
对齐
.dropdown-menu-right
标题
.dropdown-header
分割线
.divider
禁用菜单项
.disabled
按钮组
基本按钮组
.btn-group
按钮工具栏
包含多组按钮组
.btn-toolbar
尺寸
.btn-group-lg sm xs
嵌套
在 .btn-group中包含 .btn-group
垂直排列
.btn-group-vertical
和 btn-group 冲突
自适应按钮组
.btn-group-justified
和 btn-group 组合使用
兼容性问题解决
按钮式下拉菜单
.btn-group
data-toggle="dropdown"
分裂式按钮下拉菜单
尺寸
.btn-lg sm xs
.dropup
输入框组
基本用法
.input-group
.input-group-addon
输入框组（.input-group）中只能包含单个表单控件
输入框一侧不能添加多个额外元素.input-group-addon
尺寸
为.input-group添加相应的尺寸类，内部包含元素自动调整尺寸，不需要每个元素重复添加
.input-group-lg sm
多选框和单选框
按钮下拉菜单
分裂式按钮下拉菜单
导航
基本用法
.nav
标签页 .nav-tabs
胶囊式 .nav-pills
堆叠式 .nav-stacked
两端对齐
.nav-justified
导航条
基本用法
基础样式
.navbar
样式
.navbar-default
.navbar-inverse
导航头
.navbar-header
作用：位于导航左边，通常用来显示单位名称或商标图片等，屏幕收缩时仍保持显示
商标
.navbar-brand
可包裹文字或图片
导航内容
导航
.navbar-nav
表单
.navbar-form
按钮
.navbar-btn
文本
.navbar-text
链接
.navbar-link
组件排列
.navbar-left
.navbar-right
导航条位置
固定在顶部
.navbar-fixed-top
导航条有50px，需要设置body样式 padding-top:50px
固定在底部
.navbar-fixed-bottom
静止在顶部
.navbar-static-top
反色导航条
.navbar-inverse
导航堆叠效果
效果：小窗口时，导航内容自动隐藏，点击按钮堆叠排列出来
导航头
设置按钮
属性 data-toggle="collapse"
属性 data-target 指向内容区id，需要加#
导航内容包裹
.navbar-collapse
设置id
分类
按位置
顶部导航条
navbar-fixed-top
底部导航条
.navbar-fixed-bottom
按颜色
浅色底深色字
.navbar-default
深色底浅色字
.navbar-inverse
按定位
相对定位
position:relative
固定定位
position:fixed
结构
导航条头部
商标+按钮
.navbar-header
导航条折叠菜单
菜单，按钮，搜索框，链接，文本。。。
.navbar-collapse
面包屑导航和分页
面包屑
.breadcrumb 包裹
分页
普通分页
.pagination 包裹
.active 当前激活项目
.disabled 禁用项目
左右翻页
.pager 包裹
.previous 靠左
.next 靠右
标签、徽章、大屏展播、页面标题
标签
.label
.label-default primary success info warning danger
徽章
.badge
大屏展播
.jumbotron
可以放在.container外，内包裹.container，实现屏幕对齐效果
页头
.page-header
缩略图、警告框
缩略图
.thumbnail
.caption
结合栅格系统使用
警告框
.alert
.alert-danger warning success info
关闭按钮
×
class="close"
data-dismiss="alert"
进度条、媒体对象
进度条
.progress
.progress-striped
.progress-bar
.progress-bar-danger info warning success
.active
.progress-bar-striped
数值： style="width:40%"
堆叠效果
.progress 包裹多个.progress-bar
总数不能大于100%
媒体对象
基本用法
.media 包裹
多媒体展示
.media-left right
.media-middle bottom
主体内容
.media-body
.media-heading 定义主体标题
媒体对象列表
ul class="media-list"
li class="media"
嵌套使用
列表组、面板
列表组
基本用法
.list-group 包裹
.list-group-item 列表项
徽章
<span class="badge">
链接
可用于ul li，也可用于 div a 组合
禁用条目
.disabled
情景类
.list-group-item-success info warning danger
定制内容
.list-group-item 可包裹其它内容形成定制
.list-group-item-heading 突出显示定制内容头
面板
基本用法
.panel 包裹
.panel-primary success info warning danger 情景效果
.panel-heading 面板标题
.panel-body 面板内容
.panel-footer 面板注脚
不会继承情景颜色
带表格面板
带列表组面板
JavaScript插件
选项卡
基本用法
导入 tab.js
选项卡中加入 data-toggle="tab"或"pill" 属性
href="#" 指向面板id
js控制
选择器选中选项卡
调用 .tab('show')
面板效果
面板中加入 fade 样式属性
默认激活项应 同时加入 fade in 样式属性
提示框和弹出框
提示框
基本用法
导入tooltip.js
属性设置
data-toggle="tooltip"
data-placement="left right top bottom"
title="提示文字"
js初始化
$('#example').tooltip(options)
注意：不同于其他插件，提示框因考虑性能等原因，必须要初始化才能使用
属性配置
http://v3.bootcss.com/javascript/#tooltips
方法
$().tooltip(options)
.tooltip('show hide toggle destroy')
事件
show.bs.tooltip
shown.bs.tooltip
hide.bs.tooltip
hidden.bs.tooltip
弹出框
基本类同提示框
差异
显示内容分为 title 和 data-content
导入popover.js
警告框
导入 alert.js
为关闭按钮添加 data-dismiss="alert" 属性
方法
$().alert()
$().alert('close')
折叠效果
导入 collapse.js
如果单独引用，依赖transition.js
基本用法
按钮或链接 添加 data-toggle="collapse" 属性
data-target="#id" 指向需要隐藏区域id
隐藏区域 添加样式 collapse 初始需要显示 加样式 in
百叶窗效果
面板组样式
在面板头部 panel-heading 中加入链接 以及相关属性设置
将 panel-body 包裹在 .panel-collapse 属性之中
如果做成子菜单效果，则可去掉panel-body,直接加上list-group
为没个隐藏项目 设置 data-parent="#id" 使其具有自动收缩效果
轮播( carousel )
导入carousel.js
基本用法
主容器
.carousel slide 包裹
设置id
data-ride="carousel" 属性
图片组
.carousel-inner 包裹
每张图片
.item 包裹
.active 设置当前图片
.carousel-caption 包裹提示文字或相关信息
指示器
.carousel-indicators 包裹
data-target="主容器id"
data-slide-to="对应图片序号"
.active 当前激活状态
左右翻页控件
左翻页
.left carousel-control 包裹
data-slide="prev" 属性
右翻页
.right carousel-control 包裹
data-slide="next"属性
javascript
$('.carousel').carousel()
属性设置
http://v3.bootcss.com/javascript/#carousel
options
方法
http://v3.bootcss.com/javascript/#carousel
Methods
事件
slide.bs.carousel
slide.bs.carousel
定制
less
关于Less
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
官网
www.lesscss.org
http://lesscss.cn/
编译工具
koala编译
使用介绍
http://koala-app.com/index-zh.html
node.js库
浏览器编译模式
less文件引入
rel="stylesheet/less"
less.js引入
变量
注释
/**/
// 编译时会自动过滤掉
普通变量
@变量名: 值
作为选择器和属性名
@leftNav:lNav;
.@{leftNav}{
width:100px;
}
作为URL
@imgURL:"https://www.baidu.com/img";
.header{
background:url('@{imgURL}/logo.png') no-repeat;
}
延迟加载
变量是延迟加载的，在使用前不一定要预先声明
h1{
font-size:@bigSize;
}
@bigSize:100px;
定义多个同名变量
同名变量定义多次时，取最终定义的变量值
同级优先，就近优先
@var:0;
.demoClass{
@var:1;
height:@var;
@var:2;
.testClass{
@var:3;
width:@var;
@var:4;
}
}
@var:5;
混合
普通混合
混合就是一种将一系列属性从一个规则集引入（“混合”）到另一个规则集的方式。
.btn{
display:block;
width:100px;
height:50px;
}
.btn-primary{
.btn;
background-color:blue;
}
.btn-danger{
.btn;
background-color:red;
}
不带输出的混合
需要建一个混合集，但是又不想让它输出到样式之中
.btn1(){
display:block;
width:100px;
height:50px;
}
带选择器的混合
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
带参数的混合
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
带参数并且有默认值
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
带多个参数的混合
.mixins(@color;@padding:20px;@margin:30px){
color-1:@color;
padding-1:@padding;
margin-1:@margin;
}
div{
//.mixins(1,2,3);
//.mixins(1,2,3;)
//.mixins(1,2,3;50px;)
.mixins(red)
}
定义多个参数用分号";"分隔
调用混合时给定参数值列表中，如果有分号“；”，则分号表示分隔多个参数值，没有分号，则逗号表示分隔多个参数值
定义多个具有相同名称和参数数量的混合
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
原则是能匹配上的都匹配
.minxin(...){}
命名参数
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
调用的时候给出参数名称，则可以按照自己需要的顺序来排列参数
默认值必须是从右往左赋值
如果想给第一，第三设定值，第二取默认值，有两种方法
方法一：.不能 mixin( red; ;30px) ,需要把第二个参数默认值抄写上去 .mixin(red; 10px; 30px)
方法二：带上参数名字 .mixin(@color:red;@padding:30px)
@arguments变量
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block {
.box-shadow(2px; 5px);
}
@arguments变量指代整个参数列表，不需要逐一罗列
匹配模式
.mixin(dark; @color) {
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
color: darken(@color, 10%);
}
.mixin(light; @color) {
color: lighten(@color, 10%);
}
.mixin(@_; @color) {
display: block;
}
得到混合中变量的返回值
.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
嵌套规则
什么是嵌套规则
基本用法
传统css写法
.nav{
width:960px;
}
.nav ul{
list-style:none;
}
.nav ul li{
display:block;
width:150px;
}
.nav ul li a{
text-decoration:none;
color:#2b669a;
font-size:14px;
}
.nav ul li a:hover{
text-decoration:underline;
}
less写法
.nav{
width:960px;
ul{
list-style:none;
li{
display:block;
width:150px;
a{
text-decoration:none;
color:#2b669a;
font-size:14px;
&:hover{
text-decoration:underline;
}
}
}
}
}
父元素选择器 &
基本用法
a {
color: blue;
&:hover {
color: green;
}
}
color: blue;
&:hover {
color: green;
}
}
注意区分没有加&的情况
名称拼接
.btn{
&-primary{
background-color:blue;
}
&-danger{
background-color:red;
}
}
&代表完整的父级节点（而不仅仅是上一级）
.grand {
.parent {
& > & {
color: red;
}}}
.parent {
& > & {
color: red;
}}}
改变选择器顺序
.header {
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}
.menu {
border-radius: 5px;
.no-borderradius & {
background-image: url('images/button-background.png');
}
}
}
运算
说明
任何数值，颜色和变量都可以进行运算
less会自动推断数值的单位，所以你不必为每一个数值都加上单位(但必须至少有一个值有单位)
运算符和值之间必须以空格分开，涉及优先级时以（）进行优先级运算
数值型运算
颜色运算
#000000+21
工作方式：将16进制模式转换为rgb(0-255)来进行加法运算，再转换为16进制显示
如果超过255，则显示255
不支持 英文颜色直接运算
函数
Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数
rgb(255,0,0)
blue(#343242)
提取某种颜色中蓝色的十进制数值
命名空间
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.tab { ... }
.citation { ... }
} 引用
#header a {
color: orange;
#bundle > .button;
} 作用域
首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
#footer {
color: @var; // red
} import
引入less
引入 .less 文件, .less 后缀可带可不带
引入css
导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以
导入的css内容不能进行样式混合
@import "index.css";
.nav{
//.test; //报错不能将导入的css内容参与混合。
}
参数
reference: use a Less file but do not output itinline: include the source file in the output but do not process itless: treat the file as a Less file, no matter what the file extensioncss: treat the file as a CSS file, no matter what the file extensiononce: only include the file once (this is default behavior)multiple: include the file multiple times
引导(导引)
基本用法
定义
当我们想根据表达式进行匹配，而非根据值和参数匹配时,则可以使用导引
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) } 导引中比较运算符
> >= = =< <
true只表示布尔真值，除去关键字true以外的值都被视示布尔假
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
.class {
.truth(40); // Will not match any of the above definitions.
}
逻辑运算符
and
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... } not
.mixin (@b) when not (@b > 0) { ... } 逗号,
.mixin (@a) when (@a > 10), (@a < -10) { ... }
常见检测函数
类型
iscolorisnumberisstringiskeywordisurl
单位
ispixelispercentageisem
关键字( important )
.mixin(){
color:yellow;
}
.demo{
.mixin() !important;
}
循环
.loop(@num) when(@num>0){
.loop((@num - 1));
width:(10px * @num);
}
div{
.loop(5);
}
合并
+
以，号分割属性值
.mixin(){
border+:1px;
}
.demo{
.mixin();
border+_:solid;
}
+_
以空格（）分割属性值
为了避免意外的合并，
merge 需要在每个需要合并的属性名后面添加一个 + 以作标示。 函数库
其他函数
字符串函数
长度相关函数
数学函数
类型函数
颜色值定义函数
颜色通道提取函数
子主题
0 条评论
下一页
