Bootstrap3实用教程
2.11.3 工具Mixin
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

排版

源代码

表格

表单

按钮

图片

辅助类

响应式工具类

使用Less

特定厂商的Mixin

Less变量

工具Mixin

工具 mixin 用于与不相关的 CSS 结合使用,以达到特定目的或任务。

1、清除浮动

建议为需要清除浮动的元素使用.clearfix()的mixin,尽量不要直接为元素添加class="clearfix"类。这里是 Nicolas Gallagher 创造的micro clearfix代码。

// 定义 mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// 使用 mixin
.container {
  .clearfix();
}

2、水平居中

让元素在其父元素中水平居中。需要设置widthmax-width属性。.center-block 类是通过设置display: blockmargin属性让内容块居中显示。

// 定义 mixin
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// 使用 mixin
.container {
  width: 940px;
  .center-block();
}

3、尺寸助手

用于方便的指定对象的尺寸。

// 定义 mixin 
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// 使用 mixin
.image { .size(400px; 300px); }
.avatar { .square(48px); }

4、可调整尺寸的 textarea

方便设置任何文本域或其他元素的尺寸可调整。默认依循浏览器默认行为 (both),即垂直、水平都可以调整。

.resizable(@direction: both) {
  // 可选性: horizontal, vertical, both
  resize: @direction;
  // 修复Safari
  overflow: auto;
}

5、截断文本

此 mixin 用来以省略号代替被截断的文本。元素必须是blockinline-block级。

// 定义 mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 使用  mixin
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

6、视网膜屏幕的图片

通过指定两个图片路径和 @1x 图片尺寸,Bootstrap 还提供了对 @2x 媒体查询的支持。如果你的页面上有很多图片,建议在一个单独的媒体查询中手工编写针对视网膜屏幕的 CSS 代码。

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// 使用 mixin
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验