Bootstrap 中的工具Mixin

工具Mixin

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

1、清除浮动

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

1. // 定义 mixin
2. .clearfix() {
3.   &:before,
4.   &:after {
5.     content: " ";
6.     display: table;
7.   }
8.   &:after {
9.     clear: both;
10.   }
11. }
12.  
13. // 使用 mixin
14. .container {
15.   .clearfix();
16. }

2、水平居中

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

1. // 定义 mixin
2. .center-block {
3.   display: block;
4.   margin-left: auto;
5.   margin-right: auto;
6. }
7.  
8. // 使用 mixin
9. .container {
10.   width: 940px;
11.   .center-block();
12. }

3、尺寸助手

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

1. // 定义 mixin
2. .size(@width; @height) {
3.   width: @width;
4.   height: @height;
5. }
6. .square(@size) {
7.   .size(@size; @size);
8. }
9.  
10. // 使用 mixin
11. .image { .size(400px; 300px); }
12. .avatar { .square(48px); }

4、可调整尺寸的 textarea

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

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

5、截断文本

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

1. // 定义 mixin
2. .text-overflow() {
3.   overflow: hidden;
4.   text-overflow: ellipsis;
5.   white-space: nowrap;
6. }
7.  
8. // 使用 mixin
9. .branch-name {
10.   display: inline-block;
11.   max-width: 200px;
12.   .text-overflow();
13. }

6、视网膜屏幕的图片

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

1. .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
2.   background-image: url("@{file-1x}");
3.   @media
4.   only screen and (-webkit-min-device-pixel-ratio: 2),
5.   only screen and (   min--moz-device-pixel-ratio: 2),
6.   only screen and (     -o-min-device-pixel-ratio: 2/1),
7.   only screen and (        min-device-pixel-ratio: 2),
8.   only screen and (                min-resolution: 192dpi),
9.   only screen and (                min-resolution: 2dppx) {
10.     background-image: url("@{file-2x}");
11.     background-size: @width-1x @height-1x;
12.   }
13. }
14.  
15. // 使用 mixin
16. .jumbotron {
17.   .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
18. }

关于作者

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