Bootstrap工具Mixin如何改写为长尾？

本文共计797个文字，预计阅读时间需要4分钟。

Mixin 工具 mixin 用于处理与CSS无关的组合，以达到特定目的或任务。

1.清除浮动：为需要清除浮动的元素使用 `.clearfix()` mixin。

2.清除浮动 + 建议：清除浮动元素。

工具Mixin工具mixin用于与不相关的CSS结合使用以达到特定目的或任务。1、清除浮动建议为需要清除浮动的元素使用.clearfix()的mixin以达到特定目的或任务。

1、清除浮动

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

 

// 定义 mixin

.clearfix() {

  

    display: table;

  }

  

  }

}

 

// 使用 mixin

.container {

  .clearfix();

}

2、水平居中

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

 

// 定义 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 用来以省略号代替被截断的文本。元素必须是block或inline-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 上开源。