bootstrap作為mixin庫的應用模式

世有因果知因求果發表於2015-04-01
boot模式

　　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>

 

 

　　

相關文章