2013-03-06 47 views
0

我正在與Drupal合作,並且,通過改變html標籤,我並不總是可以自由添加類。我想對我的custom.css文件中的元素應用一些Twitter Bootstrap樣式(啓動CSS文件已加載,因此樣式可用)。合併Twitter Boostrap元素樣式到任何元素

爲了說明它更好的,例如,我想申請class="img-polaroid"(TB基礎造型)到image我可以在我的custom css樣式表作爲div.someClass接口。我沒有簡單的方法將img標籤更改爲class="img-polaroid someClass"

我想在我的custom樣式表中完成相同的操作。換句話說,合併不是發生在html標籤中,而是發生在css樣式表本身。如何用現有的技術來實現這一目標?我們在那裏使這成爲可能嗎?

謝謝你

p.s.我知道的替代品: 次使用JS追加類 - 複製和過去的class="img-polaroid"造型成div.someClass {...} 但兩者看起來不是很好的解決方案

+0

您的選項是李你可以提到,或者你可以修改Bootstrap樣式表(不推薦 - 核心黑客在更新時會被覆蓋)。 – isherwood 2013-03-06 16:56:13

回答

1

你如何去這個代碼取決於哪個CSS預處理你正在使用。如果你想避免修改結核本身或標記,你必須選擇一個。

薩斯

.foo { 
    @extend .bar; 
} 

輸出:

.bar, .foo { 
    // styles 
} 

LESS

.foo { 
    .bar; 
} 

輸出:

.bar { 
    // styles 
} 

.foo { 
    // styles 
} 
+0

謝謝cimmanon。聽起來像Less和Sass可以通過運行css處理器的額外步驟來完成此任務。如果你不得不選擇在Sass或Less之間學習,你會選擇哪一個?爲什麼?再次感謝 – latvian 2013-03-07 02:57:31

+1

我最初使用了LESS,但在我個人看來,Sass在各方面都更好。使用'@ extend'的能力是我最終的賣點。另外,Sass有Compass。 – cimmanon 2013-03-07 03:06:42

+0

謝謝...薩斯是:) – latvian 2013-03-11 18:08:52

0

您可以找到CSS的一部分要應用到元素在引導樣式表並重寫選擇或將代碼複製到新的選擇另一個文件,因此在風格適用於

.selector-from-bootrap, 
.my-new selector{ 
... 
} 
+0

謝謝kingdomcreation。複製和粘貼是我想要避免的。由於我們想盡可能經常升級bootstrap – latvian 2013-03-07 02:54:43