Может ли div иметь несколько классов (Twitter Bootstrap)


может ли тег div иметь два класса?

Я использую Twitter bootstrap, и есть два предопределенных класса, которые я хотел бы использовать.

один active класс, который я хотел бы использовать dropdown-toggle в панели навигации.

каков наилучший способ приблизиться к этому в html, без переопределения css.

9 68

9 ответов:

конечно, div может иметь столько классов, сколько вы хотите (это касается как начальной загрузки, так и HTML в целом):

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

просто разделите классы по пространству.

также: имейте в виду, что некоторые классы bootstrap должны использоваться для одного и того же материала, но в разных случаях (например классы выравнивания, вы можете что-то выровнять влево, вправо или центр, но это должно быть единственный из них) и вы не должны использовать их вместе, или вы получите неожиданный результат (что произойдет, так это то, что класс, который определен последним в css, будет применен). Так что имейте в виду, вы должны избегать делать вещи, как это:

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

абсолютно, divs может иметь более одного класса, и с некоторыми компонентами Bootstrap вам часто нужно иметь несколько классов, чтобы они функционировали так, как вы хотите. Применение нескольких классов, конечно, возможно и вне bootstrap. Все, что вам нужно сделать, это отделить каждый класс с пробелом.

пример:

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

классы разделяются пробелом.

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

демо: http://jsfiddle.net/wNfcg/

Я не уверен, что вы спрашиваете конкретно о bootstrap, т. е., могут ли эти два класса использоваться вместе или если вы просто спрашиваете в целом?

вы можете применить столько классов к элементу, сколько хотите, просто отдельные имена классов с пробелом

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

да, div может принимать столько классов, сколько вам нужно. Используйте пробел, чтобы отделить одно от другого.

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

вы можете добавить столько классов к элементу, но вы можете добавить только один идентификатор для элемента.

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

div может содержать более одного класса либо с помощью bootstrap, либо нет

<div class="active dropdown-toggle my-class">Multiple Classes</div>
Для применения нескольких классов просто разделите классы по пространству.

взгляните на эту ссылку вы найдете много examples
http://getbootstrap.com/css/
http://css-tricks.com/un-bloat-css-by-using-multiple-classes/

вы можете иметь несколько css class селекторы:

, например:

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

но только один id:

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

пробел используется для создания нескольких классов:

<div class="One Two Three">

</div>