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>