Ustaw grubość czcionki za pomocą klas Bootstrap

129

Czy jest jakaś klasa Twitter Bootstrap dla font-weight: boldi inne wartości font-weight?

Nie utworzyłbym nowego, gdyby ten już istniał w Bootstrap.

html css twitter-bootstrap twitter-bootstrap-3 Ionică Bizău
źródło
5
Nie ma klasy, musisz dostosować własną.
Manoz
2
tak, nie ma osobnej klasy dla wagi czcionki: pogrubienie
Dinesh Kanivu

Odpowiedzi:

54

EDYCJA 2 (wersja ostateczna): Zgodnie z dokumentacją bootstrap 4 , class="font-weight-bold"to jest to, czego szukasz.

EDYCJA: Możesz użyć, class="font-weight-bold"jak pokazano tutaj (Bootstrap 4 alpha).

Zachowałem pierwotną odpowiedź poniżej dla jasności.

Publikuję tę odpowiedź, ponieważ wydaje się, że ten wątek ma wielu odwiedzających, ale nie ma odpowiedniego rozwiązania, aby rozwiązać ten problem. Ale wkrótce będzie sposób z Bootstrap 4:

Jak tego GitHub żądanie ciągnąć pokazy, po prostu trzeba użyć text-weight-normal, text-weight-boldi text-weight-italicklas.

Może się to zmienić aż do oficjalnego wydania stabilnego. W tej chwili to żądanie ściągnięcia nie jest jeszcze scalone w gałęzi alfa.

Zaktualizuję ten post po wydaniu Bootstrap v4.

Ilshidur
źródło
Och, to słodkie! Czy możesz poprawić swoją odpowiedź, aby wspomnieć, że stanie się to w Bootstrap 4, i dodać rozwiązanie dla bieżących wersji (używając <strong>lub po prostu tworząc własną klasę)? W takim razie zaznaczę twoją odpowiedź.
Ionică Bizău
Również (w Bootstrap 4) możesz dodać sugerowaną klasę ("font-weight-bold") do <input/>pól, a tekst w środku stanie się pogrubiony. Używamy tego z polami tytułu, aby je podkreślić, gdy jest to konieczne. Testowane w systemie Windows x64 w przeglądarce Chrome w wersji 76 i IE11.
timmi4sa
Fajny, fajny człowiek. To działa!!! Próbowałem pogrubić treść, dodając styl ręcznie do pliku css, ale tak się nie stało. Wtedy znalazłem twoją odpowiedź: D
Travis Le
93

Znalazłem to na stronie Bootstrap , ale tak naprawdę nie jest to klasa Bootstrap, to tylko HTML.

<strong>rendered as bold text</strong>
Brett Merrifield
źródło
3
Co więcej strong, niekoniecznie oznacza pogrubienie. Z developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : „Zazwyczaj ten element jest renderowany domyślnie przy użyciu pogrubionej czcionki. Nie należy go jednak używać po prostu do stosowania pogrubionego stylu; użyj W tym celu właściwość CSS font-weight. "
Mocne jest mocne, pogrubione to pogrubione :( Odpowiedź @GurgenHakobyan powinna być zdecydowanie preferowana.
MattAllegro
To pochodzi z dawnych czasów, kiedy nie było CSS. Ze względu na rozdzielenie wzorców projektowych, CSS został wymyślony, aby uniknąć mieszania treści i prezentacji zarówno w HTML. Chociaż przeglądarki internetowe nadal obsługują tę funkcję w celu zapewnienia kompatybilności wstecznej, zdecydowanie odradza się używanie <b> i <strong>, <i> i <em> itp. En.wikipedia.org/wiki/Cascading_Style_Sheets
Wildhammer
49

W Bootstrap 4 :

class="font-weight-bold"

Lub:

<strong>text</strong>
Jeremy Lynch
źródło
39

Utwórz w swoim Site.css (lub w innym miejscu) nową klasę o nazwie na przykład .font-bold i ustaw ją na swój element

.font-bold {
  font-weight: bold;
}
Gurgen Hakobyan
źródło
8
Odradzałbym to, znaczniki mają być semantyczne, w ten sposób: .some-funkcjonalny-opis-elementu {font-weight: bold}. Zamiast po prostu używać klasy o nazwie jak kawałek css, po prostu użyj style = "font-weight: bold;", bardziej uczciwie jest być szybkim i brudnym.
cmc
23
Jest to idealne rozwiązanie i tak samo semantyczne, jak wiele innych klas Bootstrap, takich jak .text-uppercase lub .list-unstyled. Style wbudowane mogą stać się koszmarem zarządzania, na przykład jeśli później zdecydujesz, że wszystkie pogrubione elementy powinny mieć inny kolor lub mieć efekt tekstowy. Zajęcia ułatwiają to zadanie i to jest najlepsza odpowiedź.
Andy Mehalick
Zgadzam się z Andym tutaj. To poprawnie odpowiada na pytanie. Istnieją ważne przypadki użycia, w których użycie uogólnionych klas zapewniłoby najczystsze wyjście HTML, gdy używane są generatory, zestawy narzędzi i szablony.
dperish
To jest właściwe rozwiązanie dla bootstrap <4. Celem strong nie jest pogrubianie tekstu , przeglądarki robią to, ponieważ konwencja to pogrubiony tekst z silnym naciskiem. Znacznik HTML musi mieć znaczenie semantyczne, a nie tylko istnieć do celów projektowych. W rzeczywistości nie jest cytowany w rekomendacji W3, a nawet b nie należy ufać, że jest odważny .
Andre Figueiredo
1
To jest nieaktualne w bootstrap 4
toddmo
8

W Bootstrap 4 możesz użyć:

<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
źródło
2

Powinieneś użyć zmiennych bootstarp, aby kontrolować grubość czcionki, jeśli chcesz bardziej dostosowaną wartość i / lub postępujesz zgodnie ze schematem, który należy powtórzyć; Zmienne są używane w całym projekcie jako sposób na centralizację i udostępnianie powszechnie używanych wartości, takich jak kolory, odstępy lub stosy czcionek;

całą dokumentację można znaleźć pod adresem http://getbootstrap.com/css .

maioman
źródło