Bootstrap3实用教程
2.11.2 特定厂商的Mixin
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

按钮

图片

辅助类

响应式工具类

使用Less

Less变量

特定厂商的Mixin

特定浏览器厂商的 mixin 用于为不同厂商的浏览器使用相应的 CSS 属性前缀来支持各厂商的浏览器。

1、盒尺寸

通过这一个 mixin 来为所有组件设置盒模型。此 mixin 从 v3.2.0 版本开始就被列为不建议使用了,取而代之的是使用 Autoprefixer。为了保持向后兼容,在 v4 版本之前,Bootstrap 将在内部继续使用这些 mixin。

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

2、圆角

现在,所有现代浏览器都支持不带厂商前缀的border-radius属性了。有鉴于此,我们没有提供.border-radius()mixin,但是,Bootstrap does 提供了用于快速设置同一侧圆角的 mixin。

.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;
}

3、盒阴影

如果你的目标用户使用的是最新版本和更高级的浏览器和设备,只需单独使用box-shadow属性即可。如果你需要兼容较老的 Android(低于 v4)和 iOS 设备(低于 iOS 5),可以使用下面这个不建议使用的 mixin,便于帮你添加-webkit前缀。

由于 Bootstrap 并未官方提供对过时(不支持标准属性)平台的支持,此 mixin 从 v3.1.0 版本期就不建议使用了。为了保持向后兼容,Bootstrap 将继续在内部使用此 mixin, 直到 Bootstrap v4。

在设置 box 阴影时务必使用rgba()颜色,这样可以使他们尽可能地与背景无缝融入。

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

4、过渡

有多个 mixin 供你灵活使用。可以一次性设置所有的过渡效果的属性,或者根据需要只是指定延时和持续时间。

此 mixin 从 v3.2.0 版本开始就被列为不建议使用了,取而代之的是使用 Autoprefixer。为了保持向后兼容,在 v4 版本之前,Bootstrap 将在内部继续使用这些 mixin。

.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;
}

5、变换

旋转、缩放、平移(移动)或倾斜任何对象。此 mixin 从 v3.2.0 版本开始就被列为不建议使用了,取而代之的是使用 Autoprefixer。为了保持向后兼容,在 v4 版本之前,Bootstrap 将在内部继续使用这些 mixin。

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

6、动画

仅适用一个 mixin 就可以在一个声明中使用所有 CSS3 所提供的动画属性,其他 mixin 用于设置单个属性。

此 mixin 从 v3.2.0 版本开始就不建议使用了,取而代之的是使用 Autoprefixer。为了保持向后兼容,在 v4 版本之前,Bootstrap 将在内部继续使用这些 mixin。

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

7、透明度

为所有浏览器设置透明度,并为IE8提供filter备用滤镜。

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

8、占位符颜色

为表单控件中每个文本域提供占位符(Placeholder)文本的颜色。

.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
}

9、多列

通过CSS在单个元素中产生多列。

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

10、渐变

便于把任何两种颜色变成背景渐变色。想要使他更高级些,可以设置一个direction(方向),使用三种颜色,也可以使用径向(radial)渐变。使用一个mixin,你就可以得到所有需要的前缀语法。

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

对于线性渐变,你也可以指定两颜色的角度:

#gradient > .directional(#333; #000; 45deg);

如果你需要一个条纹风格的渐变,这也很容易。只要指定一个颜色,我们将一个半透明的白色条纹覆盖在它上面,就会形成一个条纹风格的渐变。

#gradient > .striped(#333; 45deg);

再来试试三种颜色。利用此 mixin ,并为其设置第一种颜色、第二种颜色、第二种颜色的色标(如,25%),和第三种颜色:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

当心!如果你想删除某个渐变,确保将你所添加的针对 IE 的filter一并删除。你可以通过使用.reset-filter()mixin 和background-image: none;来删除某个渐变。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验