web-dev-qa-db-fra.com

Comment changer la taille de la police avec Sass in Bootstrap 4?

Je reçois des informations croisées et je voulais soulever la question ici. J'ai lu à certains endroits que la taille de la police devrait être modifiée à partir de l'élément html, par exemple:

html { font-size: 14px }

Et les valeurs de bootstrap 4 rem vont mettre à jour le texte en conséquence.

Il est intéressant de noter que si je garde la taille de police par défaut de l’élément HTML et que je modifie les variables bootstrap pour changer la taille de la police), est-ce que je fais quelque chose de mal?

Par exemple:

html { font-size: 16px }

// Changing bootstrap variable to 
$font-size-base: 0.875rem //instead of 1rem
csstwitter-bootstrapsassbootstrap-4
22
webkitfanz

Avec toute la confusion et tant de réponses différentes. J'ai approché les auteurs de bootstrap) avec la question de la clarifier une fois pour toutes.

Il faut maintenant changer le cristal $ font-size-base , ce qui changera directement la taille de la police racine.

Leur contributeur m'a également conseillé de ne pas contrôler la taille de la police avec l'élément html, mais plutôt de changer la variable du bootstrap.

REF: https://github.com/twbs/bootstrap/pull/2406

Mise en garde sur l'utilisation de la substitution CSS uniquement

l'utilisation de l'exemple CSS fourni ne fonctionnera pas pour tous les aspects du dimensionnement de bootstrap).

Le résultat compilé de scss utilise le $font-size-base variable pour dimensionner beaucoup de choses et peut être utilisé dans plusieurs régions à l’avenir.

Liste des éléments dimensionnés

  • police déroulante
  • police du bouton
  • police popover
  • police du groupe d'entrées
  • police de forme
  • redémarrer la police

-------------- Exemple SCSS --------------

Ceci est un exemple pour vos fichiers scss, notez que vous devez définir le $font-size-base AVANT d'inclure bootstrap dans votre fichier scss principal. Dans ce cas, le app.scss fichier est celui en cours de compilation.

app.scss

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables -- this is where you defined the variables 
//              BEFORE importing bootstrap which will use it's  
//              defaults if the variable is not predefined.
@import "variables";
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// @import "datatables";
@import "datatables.min";

_variables.scss

// Body
$body-bg: #ffffff;

// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
28
webkitfanz

Bootstrap définit la base font-size Dans sa _reboot.scss Comme

body {
    font-family: -Apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292b2c;
    background-color: #fff;
}

REMARQUE: - Ne modifiez jamais les valeurs par défaut dans les fichiers de frameworks modifiez toujours les valeurs à l'aide de fichiers css/js personnalisés.

donc pour changer votre taille de police en 14px, utilisez ceci dans votre propre style.css (fichier CSS personnalisé)

body {
    font-size: 0.875rem;
 }

Voici le violon en marche

utilisez !important vous ne pouvez pas voir vos modifications pour remplacer vos modifications par défaut.

Dans votre fichier custom.scss, Procédez comme suit:

$custom-variable:0.875rem;

Ensuite, utilisez-le comme ceci:

@import "./src/scss/_modules/custom"; 
@import "./bower_components/bootstrap/scss/bootstrap";

body {
font-size:$custom-variable;
}
3
Mr. Pyramid