Legen Sie die Schriftgröße mithilfe von Bootstrap-Klassen fest

128

Gibt es eine Twitter Bootstrap-Klasse für font-weight: boldund andere Werte von font-weight?

Ich würde keine neue erstellen, wenn diese bereits in Bootstrap vorhanden ist.

html css twitter-bootstrap twitter-bootstrap-3 Ionică Bizău
quelle
5
Es gibt keine Klasse. Sie müssen die eigene anpassen.
Manoz
2
Ja, es gibt keine separate Klasse für Schriftgewicht: fett
Dinesh Kanivu

Antworten:

52

EDIT 2 (final): Laut Bootstrap 4-Dokumentationclass="font-weight-bold" ist es das , wonach Sie suchen.

BEARBEITEN: Sie können class="font-weight-bold"wie hier gezeigt verwenden (Bootstrap 4 Alpha).

Ich habe die ursprüngliche Antwort unten aus Gründen der Klarheit beibehalten.

Ich poste diese Antwort, weil dieser Thread viele Besucher zu haben scheint, aber keine richtige Lösung zur Lösung dieses Problems hatte. Aber mit Bootstrap 4 wird es bald einen Weg geben:

Da dieser GitHub - Pull - Request zeigt, werden Sie nur die verwenden müssen text-weight-normal, text-weight-boldund text-weight-italicKlassen.

Dies kann sich möglicherweise bis zur offiziellen stabilen Veröffentlichung ändern. Zum jetzigen Zeitpunkt ist diese Pull-Anforderung noch nicht im Alpha-Zweig zusammengeführt.

Ich werde diesen Beitrag aktualisieren, sobald Bootstrap v4 veröffentlicht wurde.

Ilshidur
quelle
Oh, das ist süß! Können Sie Ihre Antwort verbessern, um zu erwähnen, dass dies in Bootstrap 4 passieren wird, und eine Lösung für aktuelle Versionen hinzufügen (entweder mit <strong>Ihrer eigenen Klasse oder nur mit ihrer eigenen Klasse)? Ich werde dann Ihre Antwort markieren.
Ionică Bizău
Außerdem (in Bootstrap 4) können Sie die vorgeschlagene Klasse ("font-weight-fett") zu den <input/>Feldern hinzufügen, und der darin enthaltene Text wird fett. Wir verwenden dies mit Titelfeldern, um sie bei Bedarf hervorzuheben. Getestet in Windows x64 in Chrome Version 76 und IE11.
timmi4sa
Cooler, cooler Mann. Es klappt!!! Ich habe versucht, den Inhalt fett zu machen, indem ich den Stil manuell zur CSS-Datei hinzufügte, aber es ist einfach nicht passiert. Dann fand ich Ihre Antwort: D
Travis Le
93

Ich habe dies auf der Bootstrap-Website gefunden , aber es ist wirklich keine Bootstrap-Klasse, sondern nur HTML.

<strong>rendered as bold text</strong>
Brett Merrifield
quelle
3
Darüber hinaus strongbedeutet nicht unbedingt fett. Von developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "Normalerweise wird dieses Element standardmäßig mit einer fetten Schriftstärke gerendert. Es sollte jedoch nicht einfach zum Anwenden von fettem Stil verwendet werden CSS-Schriftgewichtseigenschaft für diesen Zweck. "
Stark ist stark, fett ist fett :( Die Antwort von @GurgenHakobyan sollte bei weitem bevorzugt werden.
MattAllegro
Dies ist aus alten Zeiten, als es kein CSS gab. Aufgrund der Trennung von Bedenken im Entwurfsmuster wurde CSS erfunden, um zu vermeiden, dass Inhalt und Präsentation in HTML gemischt werden. Obwohl noch Webbrowser dies aus Gründen der Abwärtskompatibilität unterstützt, wird dringend empfohlen, nicht <b> und <strong>, <i> und <em> usw. en.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammerklan
49

In Bootstrap 4 :

class="font-weight-bold"

Oder:

<strong>text</strong>
Jeremy Lynch
quelle
39

Erstellen Sie in Ihrer Site.css (oder an einer anderen Stelle) eine neue Klasse mit dem Namen .font-fett und setzen Sie sie auf Ihr Element

.font-bold {
  font-weight: bold;
}
Gurgen Hakobyan
quelle
8
Ich würde davon abraten, Markup soll semantisch sein, wie folgt: .Einige-funktionale-Beschreibung-des-Elements {Schriftgröße: fett}. Anstatt nur eine Klasse zu verwenden, die wie ein bisschen CSS benannt ist, verwenden Sie einfach style = "font-weight: bold;". Es ist ehrlicher, schnell und schmutzig zu sein.
cmc
23
Dies ist eine perfekte Lösung und genauso semantisch wie viele andere Bootstrap-Klassen wie .text-Großbuchstaben oder .list-unstyled. Inline-Stile können zu einem Management-Albtraum werden, wenn Sie beispielsweise später entscheiden, dass alle fett gedruckten Elemente eine andere Farbe haben oder einen Texteffekt haben sollen. Eine Klasse zu haben macht dies einfacher und dies ist die beste Antwort.
Andy Mehalick
Ich stimme Andy hier zu. Dies beantwortet die Frage richtig. Es gibt gültige Anwendungsfälle, wenn die Verwendung verallgemeinerter Klassen die sauberste HTML-Ausgabe liefert, in der Generatoren, Toolkits und Vorlagen verwendet werden.
Dperish
Dies ist die richtige Lösung für Bootstrap <4. Der Zweck von strong ist nicht, Text fett zu machen , Browser tun dies, weil Konvention fett gedruckter Text mit starker Betonung ist. HTML-Tags müssen eine semantische Bedeutung haben und existieren nicht nur für Designzwecke. Tatsächlich wird es in der W3-Empfehlung nicht zitiert und b sollte auch nicht als mutig angesehen werden .
Andre Figueiredo
1
Dies ist veraltet in Bootstrap 4
Toddmo
8

Auf Bootstrap 4 können Sie Folgendes verwenden:

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
danramzdev
quelle
2

Sie sollten die Variablen von bootstarp verwenden, um die Schriftgröße zu steuern, wenn Sie einen individuelleren Wert wünschen und / oder einem Schema folgen, das wiederholt werden muss. Variablen werden im gesamten Projekt verwendet, um häufig verwendete Werte wie Farben, Abstände oder Schriftstapel zu zentralisieren und gemeinsam zu nutzen.

Die gesamte Dokumentation finden Sie unter http://getbootstrap.com/css .

maioman
quelle