bootstrap快速入门笔记（九）-响应式工具

一，可用的类

	超小屏幕手机(<768px)	小屏幕平板(≥768px)	中等屏幕桌面(≥992px)	大屏幕桌面(≥1200px)
.visible-xs-*	可见	隐藏	隐藏	隐藏
.visible-sm-*	隐藏	可见	隐藏	隐藏
.visible-md-*	隐藏	隐藏	可见	隐藏
.visible-lg-*	隐藏	隐藏	隐藏	可见
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

从v3.2.0版本起，形如

.visible-*-*

的类针对每种屏幕大小都有了三种变体，每个针对CSS中不同的

display

属性，列表如下：

类组	CSS display
.visible-*-block	display:block;
.visible-*-inline	display:inline;
.visible-*-inline-block	display:inline-block;

组件：常用：

　@padding-base-vertical:6px;
@padding-base-horizontal:12px;

@padding-large-vertical:10px;
@padding-large-horizontal:16px;

@padding-small-vertical:5px;
@padding-small-horizontal:10px;

@padding-xs-vertical:1px;
@padding-xs-horizontal:5px;

@line-height-large:1.33;
@line-height-small:1.5;

@border-radius-base:4px;
@border-radius-large:6px;
@border-radius-small:3px;

@component-active-color:#fff;
@component-active-bg:@brand-primary;

@caret-width-base:4px;
@caret-width-large:5px;

圆角：

.border-top-radius(@radius){
border-top-right-radius:@radius;
border-top-left-radius:@radius;
}
.border-right-radius(@radius){
border-bottom-right-radius:@radius;
border-top-right-radius:@radius;
}
.border-bottom-radius(@radius){
border-bottom-right-radius:@radius;
border-bottom-left-radius:@radius;
}
.border-left-radius(@radius){
border-bottom-left-radius:@radius;
border-top-left-radius:@radius;
}

Box(Drop)隐形

.box-shadow(@shadow:01px3pxrgba(0,0,0,.25)){
-webkit-box-shadow:@shadow;//iOS<4.3&Android<4.1
box-shadow:@shadow;
}

过渡效果：

.transition(@transition){
-webkit-transition:@transition;
transition:@transition;
}
.transition-property(@transition-property){
-webkit-transition-property:@transition-property;
transition-property:@transition-property;
}
.transition-delay(@transition-delay){
-webkit-transition-delay:@transition-delay;
transition-delay:@transition-delay;
}
.transition-duration(@transition-duration){
-webkit-transition-duration:@transition-duration;
transition-duration:@transition-duration;
}
.transition-timing-function(@timing-function){
-webkit-transition-timing-function:@timing-function;
transition-timing-function:@timing-function;
}
.transition-transform(@transition){
-webkit-transition:-webkit-transform@transition;
-moz-transition:-moz-transform@transition;
-o-transition:-o-transform@transition;
transition:transform@transition;
}

旋转、缩放、平移（移动）或倾斜任何对象。
动画这些都不细说了
透明度：

.opacity(@opacity){
opacity:@opacity;
//IE8filter
@opacity-ie:(@opacity*100);
filter:~"alpha(opacity=@{opacity-ie})";
}

占位符文本：
.placeholder(@color:@input-color-placeholder){
&::-moz-placeholder{color:@color;}//Firefox
&:-ms-input-placeholder{color:@color;}//InternetExplorer10+
&::-webkit-input-placeholder{color:@color;}//SafariandChrome
}

渐变：
#gradient>.vertical(#333;#000);
#gradient>.horizontal(#333;#000);
#gradient>.radial(#333;#000);　　
　　你也可以为标准的里两颜色线性渐变指定角度：
　　#gradient>.directional(#333;#000;45deg);
　　需要一个条纹风格
　　#gradient>.striped(#333;45deg);
　　三种颜色
　　#gradient>.vertical-three-colors(#777;#333;25%;#000);
#gradient>.horizontal-three-colors(#777;#333;25%;#000);

[/code]