2012-03-30 58 views
4

我使用的是引導建立我的網站的佈局和有類似:嵌入引導類屬性到另一個類

<div class="row-fluid"> 
    <div class="span3">  
    </div> 
    <div class="span9"> 
    </div> 
    </div> 

這工作正常。不過,我微跌,這是定義在標記的介紹,並使其更容易使未來變化的事實困擾,我想增加一個間接的另一層。我想添加我自己的定義語義的類,然後添加定義佈局演示的Bootstrap類。例如:

<div class="main-block"> 
    <div class="side-bar">  
    </div> 
    <div class="content-area"> 
    </div> 
    </div> 

和我的相應文件少...

@import "twitter/bootstrap"; 
.main-block { .row-fluid } 
.side-bar { .span3 } 
.content-area { .span9 } 

簡單的包含類的名稱,你可以「嵌入類的所有屬性到另一個類的少文檔狀態它的一個屬性「,所以它看起來應該可以工作,但我得到一個錯誤:

.row-fluid is undefined

有什麼,我失蹤了嗎?或者有更好的方法去解決這個問題嗎?這是在一個使用less-rails-bootstrap gem的rails 3.2項目中,如果這有所幫助的話。

+0

我剛剛發現這個問題(http://stackoverflow.com/questions/9090238/tweaking-bootstrap-2-0-for-semantic-markup),這是類似的,但集中的電網系統。只有一些類可以嵌入其他類中嗎? – 2012-03-30 15:19:12

回答

2

這是一個稍微複雜一些。你所指的實質上是「mixins」的全部內容。首先,我們來解決這個錯誤。從小事我看到我敢打賭,你想編出「自定義」 .LESS文件,你沒有@import的variables.less和mixins.less文件頁面的頂部。那是對的嗎?如果是這樣,看看是否得到代碼編譯按預期。

然而,一旦你的代碼編譯,你會看到,你有一個新的問題。在這種特殊情況下,試圖通過使用比.span以外的名稱,你將失去一個由屬性選擇在網格中混入,即[class*="span"]應用的任何造型。編譯的,它看起來像這樣:

[class*="span"] { float: left; margin-left: 20px; } 
.row-fluid [class*="span"] {} 
.row-fluid [class*="span"]:first-child { margin-left: 0; } 

因此,在這種情況下,屬性選擇運用他們的樣式與「跨越」開頭的任何類。

這裏有幾個選項,可能是更適合您:

1)將單詞「跨度」之前,你的自定義類的名字應該工作

<div class="row main-block"> 
    <div class="span-side-bar"> 
    </div> 
    <div class="span-content-area"> 
    </div> 
</div> 

2),並使用多個類工作,只有當您不將任何樣式應用於將會否定本地網格類中的任何樣式的自定義類:

<div class="row main-block"> 
    <div class="span3 side-bar"> 
    </div> 
    <div class="span9 content-area"> 
    </div> 
</div> 

3)我的建議是與生活保持默認引導網格系統需要額外的標記的點點。重新命名現在聽起來很棒,但如果你有任何合併未來更新的願望,我會單獨留下的一個mixin就是網格。

<div class="row"> 
    <div class="span3"> 
     <div class="side-bar"> 
     </div>  
    </div> 
    <div class="span9"> 
     <div class="content-area"> 
     </div>  
    </div> 
    </div>