2013-02-14 30 views
62

क्या एक div टैग में दो कक्षाएं हो सकती हैं?क्या एक div में कई कक्षाएं हो सकती हैं (ट्विटर बूटस्ट्रैप)

मैं ट्विटर बूटस्ट्रैप का उपयोग कर रहा हूं, और दो पूर्वनिर्धारित कक्षाएं हैं जिन्हें मैं उपयोग करना चाहता हूं।

एक active कक्षा है जिसे मैं dropdown-toggle पर एक नौसेना बार में उपयोग करना चाहता हूं।

सीएसएस को ओवरराइड करने के साथ एचटीएमएल में पहुंचने का सबसे अच्छा तरीका क्या है।

+14

तुम सिर्फ यह नहीं की कोशिश की? (संकेत: उत्तर हाँ है) –

+1

इसे पढ़ें। http://css-tricks.com/multiple-class-id-selectors/ – j0hnstew

उत्तर

107

ज़रूर, एक div के रूप में कई वर्गों के रूप में आप चाहते हैं कर सकते हैं (यह दोनों बूटस्ट्रैप और सामान्य रूप में HTML के लिए के बारे में है):

<div class="active dropdown-toggle"></div> 

बस अंतरिक्ष से कक्षाएं अलग।

इसके अलावा: ध्यान रखें कुछ बूटस्ट्रैप कक्षाएं एक ही सामान के लिए, लेकिन विभिन्न मामलों में प्रयोग की जाने वाली (उदाहरण के alignment classes के लिए, आप कुछ गठबंधन छोड़ दिया, सही या केंद्र चाहते हो सकता है की अपेक्षा की जाती है, लेकिन यह हो गया है उनमें से केवल एक) और आपको उन्हें एक साथ उपयोग नहीं करना चाहिए, या आपको एक अप्रत्याशित परिणाम मिलेगा (क्या होगा कि सीएसएस पर आखिरी परिभाषित कक्षा एक लागू होगी)। तो ध्यान में रखना अगर आप इस तरह काम करना बचना चाहिए:

<p class="text-center text-left">Some text</p> 
5

मैं या यदि आप विशेष रूप से बूटस्ट्रैप के बारे में पूछ रहे हैं, यानी, या नहीं, उन दो वर्गों को एक साथ इस्तेमाल किया जा सकता यकीन नहीं है अगर आप कर रहे हैं बस सामान्य में पूछ रहे हो?

आप के रूप में कई वर्गों एक तत्व के रूप में आप चाहते हैं तो बस अलग वर्ग के नाम एक स्थान के साथ

<div class="active dropdown-toggle"></div> 
7

बिल्कुल, divs एक से अधिक वर्ग हो सकता है और लागू कर सकते हैं, कुछ बूटस्ट्रैप घटकों आप अक्सर की आवश्यकता होगी के साथ उनके लिए काम करने के लिए कई कक्षाएं आयोजित करने के लिए आप उन्हें चाहते हैं। पाठ्यक्रम के कई वर्गों को लागू करना बूटस्ट्रैप के बाहर भी संभव है। आपको बस एक कक्षा के साथ प्रत्येक वर्ग अलग करना है।

नीचे उदाहरण:

<label class="checkbox inline"> 
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 
</label> 
6

एक अंतरिक्ष के साथ वर्गों को अलग।

<button class="btn btn-success dropdown-toggle active" data-toggle="dropdown">Success <span class="caret"></span></button> 

डेमो: http://jsfiddle.net/wNfcg/

5

के रूप में आप की जरूरत है हाँ, div के रूप में कई वर्गों ले सकते हैं। एक दूसरे से अलग करने के लिए अंतरिक्ष का उपयोग करें।

<div class="active dropdown-toggle custom-class">Example of multiple classses</div> 
4

एक div एक से अधिक वर्गों बूटस्ट्रैप या नहीं

<div class="active dropdown-toggle my-class">Multiple Classes</div>
कई वर्गों को लागू करने के लिए या तो पकड़ कर सकते हैं कर सकते हैं सिर्फ अंतरिक्ष से कक्षाएं अलग।

इस लिंक पर आप कई उदाहरण
मिलेगा एक नजर डालें http://getbootstrap.com/css/
http://css-tricks.com/un-bloat-css-by-using-multiple-classes/

0

अंतरिक्ष कई वर्गों बनाने के लिए प्रयोग किया जाता है:

 
<div class="One Two Three"> 

</div> 
+5

यह वास्तव में उन उत्तरों पर कुछ भी नहीं जोड़ता है जो पहले से ही एक साल पहले पोस्ट किए गए थे। –

5

आप के रूप में कई वर्गों में जोड़ सकते हैं एक तत्व के लिए, लेकिन आप प्रति तत्व केवल एक आईडी जोड़ सकते हैं।

<div id="unique" class="class1 class2 class3 class4"></div> 
4

आप एक से अधिक सीएसएस class चयनकर्ताओं हो सकता है:

उदाहरण के लिए .:

<div class="col-md-4 a-class-name"> 
</div> 

लेकिन केवल एक ही id:

<div id = "btn1 btn"> <!-- this is wrong --> 
</div>