bootstrap作为mixin库的应用模式

标签：

　　Bootstrap作为一个非常流行的前端css框架，得到了非常多的应用。一般的使用方法都是直接download bootstrap.css，作为css文件引入到html的markup中，随后直接引用其定义的class，这样的使用模式有个问题：考虑下面的场景，你需要设计一个login form,在该表单中有一个button，通常情况下，你在html markup中使用.btn,.btn-primary预置的class。虽然没有什么大的问题，但是html本身不具有表意性。如果我们既要使用到bootstrap定义的那些类，又能在html中不要以.btn,.btn-primary来定义button的style，有什么办法呢？本文就提供一个思路，既满足这个需求，又能顺便减少生产的css文件尺寸。

1.下载bootstrap，解压后直接将less目录中的内容提出来，其他的全部删除，假设目录仍然取名为bootstrap（注意其他的非bootstrap代码部分都已经删除）

bootstrap/
├── alerts.less 
├── badges.less 
├── bootstrap.less 
├── breadcrumbs.less 
├── button-groups.less 
├── buttons.less 
├── carousel.less 
└── ...               

2.将上述bootstrap source放到自己的项目中

my-project/ 
└── assets/ 
    └── less 
    ├── bootstrap 
    └── style.less

3.由于我们打算将bootstrap作为mixin库，并不打算将所有内容输出到生产css文件中，所以可以随意修改bootstrap源文件。另外使用import as reference来importbootstrap，其预定义的所有class都作为mixin可以被自己的项目所引用，但是又不会输出到最终生产文件中。

4.在style.less中引入bootstrap.less

@import "bootstrap/bootstrap.less"

5.这样做的好处是我们可以在html markup中，去除所有bootstrp的class，替而代之的是有语义的html class！

比如：通常直接引用bootstrap.css的情况下的markup为：

<div class="well well-lg"> 
    <p>If you‘d like to get more information, join our mailing     list</p> 
    <a href="/sign-up" class="btn btn-success">Sign up now!</a> </div> 

而使用本文的方法后的应用模式变为：

// style.less 
.sign-up { .well; .well-lg; a { .btn; .btn-success; } } 

<div class="sign-up"> 
<p>If you‘d like to get more information, join our mailing list</p> <a href="/sign-up">Sign up now!</a> 
</div>

bootstrap作为mixin库的应用模式

标签：

原文地址：http://www.cnblogs.com/kidsitcn/p/4385736.html