2013-02-14 11 views
62

Kann ein Div-Tag zwei Klassen haben?Kann ein div mehrere Klassen haben (Twitter Bootstrap)

Ich verwende Twitter Bootstrap, und es gibt zwei vordefinierte Klassen, die ich gerne verwenden würde.

Eine ist eine active Klasse, die ich auf einer dropdown-toggle innerhalb einer Nav-Leiste verwenden möchte.

Was ist der beste Weg, dies in der HTML zu erreichen, ohne das CSS zu übersteuern.

+14

Haben Sie nicht einfach ausprobieren? (Tipp: Die Antwort ist ja) –

+1

Lesen Sie dies. http://css-tricks.com/multiple-class-id-selectors/ – j0hnstew

Antwort

107

Klar, kann ein div haben so viele Klassen, wie Sie möchten (dies ist sowohl in Bezug auf allgemein Bootstrap und HTML):

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

trennen Sie einfach die Klassen von Raum.

auch: Beachten Sie einige Bootstrap-Klassen soll für das gleiche Material verwendet werden, aber in verschiedenen Fällen (zum Beispiel alignment classes, könnte man etwas ausgerichtet links möchten, rechts oder Zentrum, aber es muss sein nur eine von ihnen) und Sie sollten sie nicht zusammen verwenden, oder Sie würden ein unerwartetes Ergebnis erhalten (was passieren wird, ist, dass die Klasse, die als letztes auf der CSS definiert ist, diejenige sein wird, die angewandt wird). Also denken Sie daran, vermeiden Sie sollten Sachen wie dies zu tun:

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

Ich bin mir nicht sicher, ob Sie speziell über Bootstrap zu fragen, also ob diese beiden Klassen können zusammen verwendet werden oder wenn Sie nur allgemein gefragt?

Sie können so viele Klassen auf ein Element anwenden, wie Sie wollen, nur getrennte Klassennamen mit einem Leerzeichen

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

Absolut, divs können mehr als eine Klasse haben und mit einigen Bootstrap Komponenten, die Sie häufig benötigen um mehrere Klassen zu haben, damit sie so funktionieren, wie Sie möchten. Das Anwenden mehrerer Klassen ist natürlich auch außerhalb des Bootstrap möglich. Alles, was Sie tun müssen, ist jede Klasse mit einem Leerzeichen zu trennen.

Beispiel unten:

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

trennen die Klassen mit einem Leerzeichen.

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

Demo: http://jsfiddle.net/wNfcg/

5

Ja, div können so viele Klassen nehmen, wie Sie benötigen. Verwenden Sie Leerzeichen, um voneinander zu trennen.

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

Raum verwendet wird, finden mehrere Klassen zu machen:

 
<div class="One Two Three"> 

</div> 
+5

Dies fügt wirklich nichts über die Antworten hinzu, die bereits vor über einem Jahr gepostet wurden. –

5

Sie können hinzufügen, wie viele Klassen zu einem Element, aber Sie können nur eine ID pro Element hinzufügen.

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

Sie können mehrere CSS-Selektoren class haben:

Für z.B .:

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

aber nur eine einzige id:

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