Comment construire une échelle de type réactive avec bootstrap

Ce tutoriel plonge profondément dans la manipulation de la typographie de bootstrap et montre comment modifier son SCSS pour créer une échelle de type réactive. Cela garantit la lisibilité à toutes les tailles d'écran, empêchant des titres surdimensionnés sur des appareils plus petits.

Concepts clés:

• Personnalisation: La typographie de Bootstrap est personnalisable en modifiant directement ses fichiers source SCSS. L'élément html utilise -webkit-text-size-adjust: 100%; et -ms-text-size-adjust: 100%; pour empêcher les navigateurs mobiles de mettre à l'échelle automatique les tailles de police.
• Échelle de type réactive: La création d'une échelle de type réactive implique de définir une carte d'échelle de type, une fonction de validation et des mixins pour ajuster dynamiquement les tailles de police en fonction de la taille de l'écran. Cela maintient une hiérarchie visuelle cohérente.
• Paramètres par défaut: Bootstrap par défaut est une taille de police de base 16px, une hauteur de ligne de 1,5 et une famille de polices 'system-ui'. Ceux-ci peuvent être remplacés à l'aide d'un fichier de variables SASS personnalisé.
• Litabilité et hiérarchie: Une échelle de type réactive améliore considérablement la lisibilité et établit une hiérarchie visuelle claire, améliorant l'expérience utilisateur. Ceci est réalisé en bootstrap en utilisant des cartes SASS, des fonctions de validation et des mélanges d'ajustement de taille.

Typographie par défaut de bootstrap:

Comprendre la typographie de Bootstrap nécessite d'examiner sa source SCSS. (Remarque: les styles de non-typographie sont omis pour plus de clarté.)

html élément:

Les styles de l'élément html (dans _reboot.scss) se concentrent principalement sur la prévention de la mise à l'échelle des polices de navigateur mobile indésirable:

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

body élément:

Les styles de l'élément body (dans _reboot.scss) définissent la typographie de base:

<code class="language-scss">body {
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  line-height: $line-height-base;
  color: $body-color;
  text-align: left;
}</code>

p, h1 - h6, et .display-1 - .display-4 Éléments:

Les styles de ces éléments (dans _type.scss et _variables.scss) utilisent des variables pour définir les tailles de police, créant une échelle de type de base fixée sur toutes les tailles d'écran. Ces variables peuvent être remplacées dans un fichier sass personnalisé.

Création d'une échelle de type réactive:

Pour créer une échelle de type vraiment réactive, nous utiliserons SASS pour générer des tailles de police dynamiquement en fonction de la taille de l'écran. Cette approche utilise:

1. Une carte d'échelle de type: définit différentes échelles de type (par exemple, basées sur le rapport doré).
2. Une fonction de validation: s'assure que l'échelle choisie est valide.
3. mixins: Générer des tailles de police pour les titres et les classes d'affichage.

Le code SASS comprendrait une carte des échelles de type, une fonction pour valider les valeurs d'échelle et des mixins pour générer des tailles de police pour les en-têtes (h1 - h6) et les classes d'affichage (.display-1 - .display-4) . Ces mélanges seraient appelés à différents points d'arrêt de bootstrap pour ajuster les tailles de police en raison. La taille de la police racine (html) pourrait également être ajustée à l'aide de requêtes multimédias pour créer une échelle de type fluide sur différentes tailles d'écran.

Exemple (Illustrative - nécessite une implémentation complète du SASS):

<code class="language-scss">html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}</code>

Conclusion:

En tirant parti de Sass et de ses capacités, vous pouvez créer une échelle de type dynamique et adaptable dans votre projet bootstrap, assurant une lisibilité optimale et une hiérarchie visuelle cohérente sur tous les appareils. L'exemple de code de code fourni (lien inclus dans le texte d'origine) démontre cette échelle de type réactive en action. N'oubliez pas d'ajuster les valeurs d'échelle et les points d'arrêt pour répondre à vos exigences de conception spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!