Imposta il peso del carattere usando le classi Bootstrap

128

Esiste una classe Bootstrap di Twitter per font-weight: bolde altri valori di font-weight?

Non ne creerei uno nuovo se questo esiste già in Bootstrap.

— Ionică Bizău
fonte

5

Non esiste una classe, è necessario personalizzare il proprio.

— Manoz,

2

sì, non esiste una classe separata per Peso carattere: grassetto

— Dinesh Kanivu,

53

EDIT 2 (final): secondo la documentazione bootstrap 4 , class="font-weight-bold"è quello che stai cercando.

EDIT: Puoi usare class="font-weight-bold"come mostrato qui (Bootstrap 4 alpha).

Ho mantenuto la risposta originale di seguito per motivi di chiarezza.

Sto pubblicando questa risposta perché questa discussione sembra avere molti visitatori, eppure non aveva una soluzione adeguata per risolvere questo problema. Ma presto ci sarà un modo con Bootstrap 4:

Come questo GitHub richiesta di pull spettacoli, dovrete solo usare le text-weight-normal, text-weight-bolde text-weight-italicclassi.

Questo può forse cambiare fino al rilascio ufficiale stabile. A questa data di scrittura, questa richiesta pull non è ancora unita nel ramo alfa.

Aggiornerò questo post una volta che Bootstrap v4 è stato rilasciato.

— Ilshidur
fonte

Oh, è carino! Puoi migliorare la tua risposta menzionando che ciò accadrà in Bootstrap 4 e aggiungere una soluzione per le versioni correnti (utilizzando o creando semplicemente la tua classe)? Allora segnerò la tua risposta.

— Ionică Bizău,

Inoltre (in Bootstrap 4) puoi aggiungere la classe suggerita ("font-weight-bold") alle <input/>caselle e il testo all'interno diventerà grassetto. Lo usiamo con i campi Titolo per enfatizzarli quando necessario. Testato in Windows x64 in Chrome ver76 e IE11.

— timmi4sa,

Figo, figo. Funziona!!! ho provato a rendere audace il contenuto aggiungendo manualmente lo stile al file css ma non è successo. Poi ho trovato la tua risposta: D

— Travis Le

93

L'ho trovato sul sito Web Bootstrap , ma in realtà non è una classe Bootstrap, è solo HTML.

<strong>rendered as bold text</strong>

— Brett Merrifield
fonte

3

Inoltre strongnon significa necessariamente grassetto. Da developer.mozilla.org/en-US/docs/Web/HTML/Element/strong : "In genere questo elemento viene visualizzato per impostazione predefinita utilizzando un carattere grassetto. Tuttavia, non deve essere utilizzato semplicemente per applicare uno stile in grassetto; utilizzare il Proprietà del peso CSS per questo scopo. "

Forte è forte, audace è audace :( La risposta di @GurgenHakobyan dovrebbe essere di gran lunga preferita.

— MattAllegro

Questo è dai vecchi tempi in cui non c'era CSS. A causa della separazione dei motivi di progettazione, il CSS è stato inventato per evitare di mescolare contenuto e presentazione sia in HTML. Anche se i browser Web lo supportano ancora per la compatibilità con le versioni precedenti, si consiglia vivamente di non utilizzare e , e ecc. En.wikipedia.org/wiki/Cascading_Style_Sheets

— Wildhammer

49

In Bootstrap 4 :

class="font-weight-bold"

O:

<strong>text</strong>

— Jeremy Lynch
fonte

39

Crea nel tuo Site.css (o in un altro posto) una nuova classe chiamata ad esempio .font-bold e impostala sul tuo elemento

.font-bold {
  font-weight: bold;
}

— Gurgen Hakobyan
fonte

8

Vorrei sconsigliare questo, il markup dovrebbe essere semantico, in questo modo: .some-funzionale-descrizione-dell'-elemento {font-weight: bold}. Invece di usare semplicemente una classe chiamata come un po 'di CSS, usa solo style = "font-weight: bold;", è più onesto sull'essere veloce e sporco.

— cmc

23

Questa è una soluzione perfetta e altrettanto semantica di molte altre classi Bootstrap come .text-maiuscole o .list-unstyled. Gli stili incorporati possono diventare un incubo gestionale, ad esempio se in seguito decidi che tutti gli elementi in grassetto devono avere un colore diverso o avere un effetto di testo. Avere una lezione rende tutto più semplice e questa è la risposta migliore.

— Andy Mehalick,

Sono d'accordo con Andy qui. Questo risponde correttamente alla domanda. Ci sono casi d'uso validi quando l'uso di classi generalizzate fornirebbe l'output html più pulito, in cui generatori, kit di strumenti e modelli sono in uso.

— Dperish,

Questa è la soluzione giusta per bootstrap <4. Lo scopo di strong non è rendere il testo in grassetto , i browser lo fanno perché la convenzione è un testo in grassetto con forte enfasi. Il tag HTML deve avere un significato semantico, non esiste solo a scopo di progettazione. In realtà non è citato nella raccomandazione W3 e b non dovrebbe nemmeno essere considerato audace .

— Andre Figueiredo,

1

Questo è obsoleto in bootstrap 4

— toddmo il

8

Su Bootstrap 4 puoi usare:

<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
fonte

2

Dovresti usare le variabili di bootstarp per controllare il peso del carattere se vuoi un valore più personalizzato e / o stai seguendo uno schema che deve essere ripetuto; Le variabili vengono utilizzate in tutto il progetto come modo per centralizzare e condividere valori comunemente usati come colori, spaziatura o pile di caratteri;

puoi trovare tutta la documentazione su http://getbootstrap.com/css .

— maioman
fonte