web-dev-qa-db-fra.com

Comment changer la taille de la police globale par défaut de Bootstrap?

La taille de police globale par défaut de Bootstrap est 14px, avec une hauteur de ligne de 1,428. Comment puis-je modifier ses paramètres globaux par défaut?

Dois-je changer le fichier bootstrap.min.css dans toutes les entrées?

csstwitter-bootstraptwitter-bootstrap-3font-size
43
Chetan

Il existe plusieurs façons, mais comme vous utilisez uniquement la version CSS, et non les versions SASS ou LESS, votre meilleur choix est d'utiliser l'outil de personnalisation propre à Bootstraps:

http://getbootstrap.com/customize/

Personnalisez ce que vous voulez sur cette page, puis vous pourrez télécharger une version personnalisée avec vos propres tailles de police et tout ce que vous souhaitez modifier.

Modifier le fichier CSS directement (ou simplement ajouter de nouveaux styles CSS remplaçant le Bootstrap CSS) n'est pas recommandé, car les autres valeurs de Bootstrap styles 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 la police de base est utilisée pour calculer la taille des polices h1, h2, h3, etc. La taille de la police utilisée dans les calculs ne serait plus proportionnelle à la conception de Bootstrap.

Comme je l'ai dit, votre meilleur choix est simplement d'utiliser leur propre outil de personnalisation. C'est exactement ce que c'est.

Si vous utilisez SASS ou LESS, vous devez modifier la taille de la police dans le fichier de variables avant la compilation.

47
Jake Wilson

Vous pouvez ajouter un style.css, importer 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 changez pas bootstrap.css directement pour un meilleur maintien du code.

39
Alessander França

Bootstrap utilise la variable:

$font-size-base: 1rem; // Assumes the browser default, typically 16px

Je ne recommande pas de foutre avec ça, mais vous pouvez. La meilleure pratique consiste à remplacer la taille de police de base par défaut du navigateur par:

html {
  font-size: 14px;
}

Bootstrap prendra ensuite cette valeur et l’utilisera via rems pour définir des valeurs pour toutes sortes de choses.

26
CloudMagick

La méthode recommandée pour ce faire à partir des documents v4 actuels est la suivante:

$font-size-base: 0.8rem;
$line-height-base: 1;

Assurez-vous de définir les variables au-dessus du bootstrap css include et elles remplaceront le bootstrap.

Pas besoin de rien d'autre et c'est le moyen le plus propre

C'est décrit clairement dans la documentation https://getbootstrap.com/docs/4.1/content/typography/#global-settings

5
Paul Odeon

Dans la v4, changez la variable SASS:

$font-size-base: 1rem !default;
2
Jeremy Lynch