Comment modifier la taille de police par défaut de Bootstrap?
6 réponses
il y a plusieurs façons mais puisque vous utilisez seulement la version CSS et pas les versions SASS ou moins, votre meilleur pari pour utiliser Bootstraps propre outil de personnalisation:
http://getbootstrap.com/customize/
Personnaliser tout ce que vous voulez sur cette page et vous pouvez télécharger une version personnalisée avec vos propres tailles de police et tout ce que vous voulez changer.
modifier le fichier CSS directement (ou tout simplement ajouter de nouveaux styles CSS Bootstrap CSS) n'est pas recommandé car les valeurs des autres styles de Bootstrap sont dérivées de la taille de la police de base. Par exemple:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L52
vous pouvez voir que la taille de base de la police est utilisée pour calculer les tailles de h1, h2, h3 etc. Si vous venez de changer la taille de la police dans le CSS (ou si vous avez ajouté votre propre taille de police supérieure) Toutes les autres valeurs qui ont utilisé la taille de la police dans les calculs ne seraient plus proportionnellement exacts selon la conception de Bootstrap.
comme je l'ai dit, votre meilleur pari est d'utiliser leur propre outil de personnalisation. C'est exactement ce qu'il est.
si vous utilisez SASS ou moins, vous changerez la taille de la police dans le fichier des variables avant de compiler.
Vous pouvez ajouter un style.css, importez ce fichier après le bootstrap.css pour remplacer ce code.
Par exemple:
/* bootstrap.css */
* {
font-size: 14px;
line-height: 1.428;
}
/* style.css */
* {
font-size: 16px;
line-height: 2;
}
Ne pas modifier bootstrap.css directement pour une meilleure maintenance du code.
Bootstrap utilise la variable:
$font-size-base: 1rem; // Assumes the browser default, typically 16px
Je ne recommande pas de mucking avec ceci, mais vous pouvez. La meilleure pratique consiste à outrepasser la taille de la police de base par défaut du navigateur avec:
html {
font-size: 14px;
}
Bootstrap va alors prendre cette valeur et l'utiliser via des rems pour définir des valeurs pour toutes sortes de choses.
v4 changer le SASS variable:
$font-size-base: 1rem !default;
recommandé de le faire à partir de l'actuel v4 docs est:
$font-size-base: 0.8rem;
$line-height-base: 1;
assurez-vous de définir les variables au-dessus de l'include CSS de bootstrap et elles supplanteront le bootstrap.
besoin de rien d'autre et c'est la façon la plus propre
il est décrit très clairement dans les docs https://getbootstrap.com/docs/4.1/content/typography/#global-settings
je viens de résoudre ce type de problème. J'ai essayé d'augmenter
taille de police h4 taille. Je ne veux pas utiliser la balise h4. J'ai ajouté mon css après bootstrap.css ça ne fonctionne pas. Le moyen le plus facile est-ce: Sur le HTML doc, tapez
<p class="h4">
Vous n'avez pas besoin d'ajouter quelque chose à votre feuille css. Il fonctionne très bien La question Est supposons que je veux une taille entre h4 et h5? Réponse pourquoi? Est-ce la seule manière de plaire à vos téléspectateurs? Je préfère cette méthode à la manipulation de documents standard. comme bootstrap.