Je ne trouve aucune classe utilitaire pour modifier la taille de la police dans Bootstrap . Il existe des classes utilitaires pour les marges et le remplissage, etc. Il existe des classes d'affichage pour les en-têtes et une classe principale pour les paragraphes, mais y a-t-il un moyen de rendre un morceau de texte spécifique plus grand et plus petit avec une classe utilitaire en html au lieu d'avoir à ajouter du CSS?
Je trouve qu'il est plus facile de simuler rapidement des conceptions en utilisant autant de classes utilitaires que possible avant de résumer des modèles communs dans un CSS personnalisé.
J'ai parcouru les documents Bootstrap Text Utilities et les documents Typography , mais je ne trouve rien. Est-ce que je manque quelque chose ou est-ce que cela n'existe tout simplement pas dans Bootstrap? Cela semble être quelque chose que Bootstrap offrirait - la possibilité de modifier la taille du texte en ajoutant un nom de classe comme t-1 , t-2 , t-3 , t-4 , etc.
Je ne parle pas de typographie réactive , il suffit de changer la taille de police par défaut avec une classe utilitaire au lieu d'écrire du CSS.
3 Réponses :
Il n'y a pas de classes pour modifier la taille de la police, mais vous pouvez gérer la taille de la police avec une balise forte et petite, mais vous ne pouvez pas changer la taille de la police des paragraphes. Vous devez créer un CSS personnalisé pour ce faire.
Appréciez-le. Je pensais juste que j'aurais peut-être manqué quelque chose.
En règle générale, n'utilisez pas de balises de titre uniquement pour agrandir le texte. Ils ont un rôle important de sémantique, d'accessibilité et de référencement, pas de style.
jitu thakur a raison dans sa réponse à cette question : il n'y a actuellement aucun utilitaire Bootstrap qui ajuste la taille de la police pour vous. Cependant, il est assez facile de créer votre propre classe utilitaire personnalisée dans Sass:
.font-size-10 {
font-size: 10% !important;
}
.font-size-20 {
font-size: 20% !important;
}
/* ...etc... */
Cela créera 20 classes .font-size-10 de .font-size-10 , de .font-size-10 à .font-size-200 , qui ressemblent à ceci:
$util-font-sizes: 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200;
@each $util-font-size in $util-font-sizes {
.font-size-#{$util-font-size} {
font-size: $util-font-size * 1% !important;
}
}
Vous pouvez ajuster les valeurs dans $util-font-sizes , ou les noms de classe ou les unités en fonction de vos besoins.
Les commentaires ici semblent avoir négligé les balises h1-h6 et les classes .h1, .h2, .h3, .h4, .h5 et .h6 correspondantes, ainsi que les classes .display1, .display2, .display3 et .display4 pour taille de police extra large. Oh, il y a aussi la petite balise et la classe .small!
Vous pouvez trouver ce que vous recherchez dans la documentation bootstrap, la typographie
@Marios La question a déjà un lien vers cela. Le format que vous recherchez est également
[here](url).@MariosNikolaou C'est pourquoi lié à plusieurs endroits différents dans la documentation Bootstrap. J'ai parcouru les documents et je n'ai rien trouvé, c'est pourquoi je pose la question. Je voulais m'assurer de ne rien manquer.
en attente de classes utilitaires de taille de police mais n'existe pas maintenant!
@LeeMcAlilly si ce n'est pas dans la documentation alors il n'existe pas.
@MariosNikolaou Je pensais juste que je demanderais car il y a des zones de Bootstrap qui sont très utiles mais un peu obscures dans la documentation. Par exemple, les variables disponibles que vous pouvez remplacer se trouvent dans le code source ( github.com/twbs/bootstrap-rubygem/blob/master/assets/… ). De plus, alors que je recherchais cette question sur Google, je n'ai trouvé aucune réponse claire, alors j'ai pensé que si je la posais sur StackOverflow, cela pourrait aider quelqu'un d'autre à gagner du temps. Merci d'avoir pris le temps de répondre!