web-dev-qa-db-de.com

So legen Sie die Etikettengröße in Bootstrap

Ich möchte die Etikettengröße genauso einstellen wie die Bildschirmgröße.

f.e. für großen Bildschirm großes Etikett, für kleinen Bildschirm kleines Etikett.

22
Spontan23

In der aktuellen Version von Bootstrap, Bootstrap 3, verfügen sie nicht über separate Klassen für verschiedene Beschriftungsstile.

http://getbootstrap.com/components/

Sie können jedoch bootstrap classes auf diese Weise anpassen. In Ihrer CSS-Datei

.lb-sm {
  font-size: 12px;
}

.lb-md {
  font-size: 16px;
}

.lb-lg {
  font-size: 20px;
}

Alternativ können Sie Header-Tags verwenden, um die Größe zu ändern. Hier ist zum Beispiel ein mittelgroßes Etikett und ein kleines Etikett

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Example heading <span class="label label-default">New</span></h3>
<h6>Example heading <span class="label label-default">New</span></h6>

Sie könnten in zukünftigen Versionen Größenklassen für Etiketten hinzufügen Bootstrap.

18

Sie müssen zwei Dinge tun, um ein Bootstrap= Etikett (oder irgendetwas wirklich) zu erstellen, um die Größe basierend auf der Bildschirmgröße anzupassen:

  • Verwenden Sie eine Medienabfrage pro Anzeigegrößenbereich, um das CSS anzupassen.
  • Überschreiben Sie die von Bootstrap festgelegte CSS-Größe. Sie tun dies, indem Sie Ihre CSS-Regeln spezifischer gestalten als die von Bootstrap. Standardmäßig setzt Bootstrap .label { font-size: 75% }. Durch jeden zusätzlichen Selektor in Ihrer CSS-Regel wird diese spezifischer.

Hier ist ein Beispiel für eine CSS-Auflistung, um Ihre Anforderungen zu erfüllen. Dabei werden die 4 Standardgrößen in Bootstrap verwendet:

@media (max-width: 767) {
    /* your custom css class on a parent will increase specificity */
    /* so this rule will override Bootstrap's font size setting */
    .autosized .label { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .autosized .label { font-size: 16px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .autosized .label { font-size: 18px; }
}

@media (min-width: 1200px) {
    .autosized .label { font-size: 20px; }
}

So könnte es im HTML verwendet werden:

<!-- any ancestor could be set to autosized -->
<div class="autosized">
    ...
        ...
            <span class="label label-primary">Label 1</span>
</div>
5
Kasey Speakman