2012-12-18 85 views
1

我在每個項目之前面臨的最大困境是我是否需要使用整個Bootstrap或僅使用它的所需部分。我浪費了很多時間來決定這一點。Twitter引導項目結構

我的設定,到目前爲止一直是這樣的:

複製從Twitter /引導較少目錄到我的樣式表目錄

├── bootstrap 
│   ├── layouts.less 
│   └── more... 
├── fonts.less 
├── mixins.less 
├── mysite.less 
├── plugins.less 
└── variables.less 

創建plugins.less文件,包括必需的引導少的文件。它看起來是這樣的:

@import "bootstrap/layouts.less"; 
    @import "bootstrap/type.less"; 
    @import "bootstrap/forms.less"; 
    @import "bootstrap/buttons.less"; 
    @import "bootstrap/utilities.less"; 

然後,在我的main.less文件中使用這個plugins.less。

@import "fonts.less" 
    @import "variables.less"  // Bootstrap's + my variables 
    @import "mixins.less"  // Bootstrap's + my mixins 
    @import "plugins.less" 
    @import "mysite.less" 

從博客文章和討論我所看到的,它看起來像大多數人只是包括bootstrap.css,引導-responsive.css並覆蓋custom.css樣式。雖然我明白這會盡量減少項目的「自舉」ping時間,但我擔心會出現膨脹和維護。當我使用這種方法時,通過檢查員可以看到數百種風格被覆蓋。另外,我可能會意外地使用bootstrap使用的類名。

我使用的方法有什麼缺點嗎?或者我應該只使用http://twitter.github.com/bootstrap/customize.html並覆蓋custom.less中的某些類?

回答

1

就我個人而言,我包含了我的項目所需的較少文件,然後自定義給定的類來做我所需要的。如果我需要添加自定義類,我會在custom.less中執行。

雖然每個項目都不一樣,所以讓Bootstrap爲你工作。該網站是否會維持多年?也許你想花時間去除未使用的較少文件並修改現有的類來完成你所需要的。如果項目需要快速完成,也許網站會很短,只需包含所有.less文件並覆蓋custom.less

知道在Bootstrap版本3中,所有的少於一個文件http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/。就我個人而言,我喜歡使用一個大文件而不是處理許多無用文件。

0

這是我的設置看起來像:

|-bootstrap (as cloned from github) 
| 
|-css 
| |-app.css 
| |-app.less (watched by LESS compiler) 
| 
|-js 
| |-app.js 
| |-plugins 
| 
|-img 
| 
|-index.html 

我包括我的app.less文件引導文件,這是我從編譯調用終端少的編譯器,以app.css(我鏈接這一個在我的HTML模板)

這樣我可以引導隨時隨地(在引導文件夾的簡單git pull

0

安全升級覆蓋,你可以在課堂上指定的樣式,而不是和你需要的地方使用使用這些類樣式。這樣你就不會搞砸了覆蓋很多風格和混合現有的引導類。你可以像這樣使用namepsacing。

<div class="navbar navbar-default pn-navabr"> 
    <div class="navbar-inner"> 
    // Inner code 
    </div> 
</div> 

.pn-navabr{ // Pn is project name initials, you can choose anything you like maybe dev's name initials 

} 
.pn-navabr .navabr-inner{ 

} 

這樣你才能真正清理你的CSS,並沒有搞亂和壓倒一切的核心引導它真正可擴展的。並且您將始終具有使用Sass,Less,混合或純CSS的靈活性。