你的位置:首页 > 网页设计

[网页设计][Bootstrap]全局样式(五)


辅助样式

1、情景文本色  .text-muted  .text-primary  .text-success  .text-info  .text-warning  .text-danger  {color}

2、情景背景色  .bg-primary  .bg-success  .bg-info  .bg-warning  .bg-danger  {color/background-color}

3、关闭按钮  .close  ×  {padding/cursor/background/border/float/font-size/font-weight/color/opcity}

4、三角符号  .caret  {display/width/height/border-top/border-left/border-right}

5、快速浮动  .pull-left  .pull-right  {float!important}

6、居中  .center-block  {display/margin-left/margin-right}

7、清除浮动  .clearfix

8、显示和隐藏  .show  .hidden  .invisible

9、屏幕阅读器和键盘导航  .sr-only  .sr-only-focusable  {position/width/height/padding/margin/overflow/clip/border}

10、文本隐藏,图片替换  .text-hide  {font/color/background-color/text-shadow/border}

11、响应式显示和隐藏类

                     超小<768        小>768        中等>992        大>1200

.visible-xs-*        可见            隐藏           隐藏           隐藏

.visible-sm-*       隐藏            可见           隐藏           隐藏

.visible-md-*       隐藏           隐藏           可见           隐藏

.visible-lg-*        隐藏            隐藏           隐藏           可见

.hidden-sm        可见            隐藏           可见           可见

.hidden-md        可见            可见           隐藏           可见

.hidden-lg         可见            可见           可见           隐藏

 

.visible-**-*  :  .visible-**-block  .visible-**-inline-block  .visible-**-inline