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-*-blockdisplay: block;.visible-*-inlinedisplay: 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: 0 1px 3px rgba(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; // IE8 filter @opacity-ie: (@opacity * 100); filter: ~"alpha(opacity=@{opacity-ie})"; }占位符文本：.placeholder(@color: @input-color-placeholder) {  &::-moz-placeholder           { color: @color; } // Firefox  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome}渐变：#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);    

转载于:https://www.cnblogs.com/937522zy/p/5011015.html