专栏首页知道一点点bootstrap快速入门笔记(九)-响应式工具

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: 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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现文字底部居中

    用户3055976
  • 百度小程序自定义组件component

    "searchs": "/components/searchInput/searchInput",

    用户3055976
  • css3在IE下兼容

    原文地址:http://blog.csdn.net/bingqingsuimeng/article/details/44201433

    用户3055976
  • 刷了力扣题之后,我也变的一发不可收拾了?

    作为程序员界的一枚小菜鸟,可谓是,从大量的 CRUD 业务中,练就了一身复制粘贴即可用的本领。

    烟雨星空
  • 设计模式(十八) 中介者模式

    当我们进行多人聊天的时候, 如果程序写成一对一的结构,那么当人数一多的时候程序就无法维护了。所以更好的做法就是抽象出一个聊天服务器,每个用户只和服务器进行通信。...

    乐百川
  • 浪潮:傲腾加持的VSAN有什么不一样?

    数据是企业的核心资产,企业的数字化转型是必然趋势。在数字经济时代,浪潮信息积极帮助用户进行企业化数字转型,并且基于傲腾开展了一些实践工作。

    冬瓜哥
  • spring event发布及监听实例

    spring-context-4.3.11.RELEASE-sources.jar!/org/springframework/context/event/Sim...

    codecraft
  • 配置虚拟机网络

    本地VirtualBox 网络地址 192.168.56.1,则修改虚拟机IP地址为同一个网段下,比如192.168.56.10

    悟空聊架构
  • 前言

    underscore.js一直听说都是一个很经典的库,很适合新手入门,所以历经小半年断断续续的学习,总算是把它敲完了。然后又过了一段时间到了现在,回过头来,打算...

    Ewall
  • LeetCode 470. 用 Rand7() 实现 Rand10()(随机概率)

    已有方法 rand7 可生成 1 到 7 范围内的均匀随机整数,试写一个方法 rand10 生成 1 到 10 范围内的均匀随机整数。

    Michael阿明

扫码关注云+社区

领取腾讯云代金券