Bootstrap est un framework bien connu avec des composants préconstruits qui aident les concepteurs web à construire un site, rapidement. La nouvelle version de Bootstrap 4.2.1 utilise Sass comme préprocesseur de choix. Donc dans ce blog, nous allons comprendre comment surcharger Bootstrap en utilisant les variables sass.

Nous savons que nous devons surcharger le style Bootstrap pour donner un nouveau look au site web. Tout comme pour le thème-background, les polices, les couleurs, l’espacement, etc. les variables sont responsables de Scss pour la sortie. Ici, nous devons remplacer les variables Bootstrap par défaut. Passons à la surcharge de Bootstrap.

Ajouter Bootstrap dans le projet

D’abord, téléchargez bootstrap depuis la page de téléchargement de Bootstrap. Après cela, nous allons créer un dossier sous le nom de vendeurs dans le dossier scss et ajouter Bootstrap dans ce dossier. Nous ne modifierons rien dans les fichiers de Bootstrap, car cela créera un problème à l’avenir lorsque vous voudrez mettre à jour Bootstrap. Après avoir créé le dossier, vous pouvez ajouter bootstrap.scss dans ce fichier, que vous avez compilé.

Dans Bootstrap-4, ils utilisent le drapeau !default, qui décrit le défaut de la variable par défaut. Vous avez juste besoin de copier cette variable, d’ajouter votre valeur et de supprimer le drapeau !default de la variable.

Override Variables

Bootstrap a son propre “_variables.scss” dans le dossier “scss”, qui contient toutes les variables utilisées dans Bootstrap. Maintenant, ajoutez le dossier de nom “abstracts” dans votre dossier scss et créez “_custom-variables.scss” dans ce dossier.

Maintenant, ouvrez Bootstrap > scss > “_variables.scss”. Nous ne changeons pas directement les variables de Bootstrap ici, donc nous allons copier les variables de “_variables.scss”, et les coller dans “_custom-variables.scss”. Après avoir collé les variables, vous pouvez ajouter une nouvelle valeur dans les variables.

Vous devez mettre à jour la couleur primaire du thème (bleu), et la définir dans votre fichier “_custom-variables.scss”. La variable doit venir avant toutes les déclarations @import. Lorsque vous compilez le code Sass, cette nouvelle couleur $primary peut être utilisée pour tout le code qui fait référence à la variable $primary.

Modifier les points d’arrêt par défaut

Points d’arrêt de la grille

Les points d’arrêt du bootstrap sont également définis dans le fichier _variables.scss. Voici les valeurs par défaut :

Vous pouvez modifier les points d’arrêt actuels ou en ajouter de nouveaux. Il vous suffit de surcharger la variable $grid-breakpoints en ajoutant uniquement les valeurs requises.

Largeur des conteneurs

Les largeurs maximales des conteneurs deootstrap sont également définies dans le fichier _variables.scss. Voici les valeurs par défaut:

Mise à jour dans “_custom-variables.scss”

Personnaliser les règles d’espacement

Bootstrap fournit un ensemble d’espacements, ce qui aide à l’ajustement de l’espacement. Les variables $spacer et $spacer gèrent la valeur de base des espacements. Vous pouvez les mettre à jour, les ajouter et les remplacer.

Variables par défaut dans Bootstrap

Variables de remplacement

Bootstrap fournit également de nombreuses variables que nous pouvons remplacer comme :-
Tables, Boutons, Formulaires, Dropdowns, Navbar, Pagination, Tooltips, Modals, etc…

Utiliser seulement ce dont vous avez besoin

Bootstrap a tellement de composants que vous pouvez utiliser, mais vous n’avez pas à utiliser tous les composants qui sont fournis par bootstrap. Vous avez le contrôle sur bootstrap, alors incluez les composants qui sont nécessaires. Si vous ne les incluez pas, le fichier CSS sera plus léger avec moins de code. Et vous pourrez inclure ces composants lorsque vous en aurez besoin à l’avenir. Si vous devez utiliser les composants à l’avenir, alors il suffit de les décommenter.

Certaines variables utiles

Bootstrap fournit quelques options globales importantes que vous pouvez basculer. Comme border-radius, box-shadow, et gradients, etc.

Vous pouvez trouver ces variables dans le fichier scss/_variables.scss.

$enable-caret : Utiliser pour activer le pseudo élément caret sur .dropdown-toggle.
$enable-rounded : Utiliser pour ajouter ou supprimer border-radius (par défaut : true)
$enable-shadows : Utiliser pour ajouter ou supprimer les box-shadows (par défaut : false)
$enable-gradients : Utiliser pour les dégradés via l’image d’arrière-plan (par défaut : false)
$enable-transitions : À utiliser pour ajouter ou supprimer des transitions (par défaut : true)
$enable-grid-classes : Pour ajouter ou supprimer des classes pour le système de grille (par défaut : true)
$enable-print-styles : Active les styles pour optimiser l’impression.

Vous pouvez vérifier les options sass-options ici:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

Conclusion

Vous avez vu comment il est facile de surcharger bootstrap -saas en utilisant les variables saas. Nous avons essayé de vous fournir un guide détaillé pour vous aider à travers le processus avec des visuels et des fonctions étape par étape. Il est très facile de remplacer le bootstrap, à condition de savoir comment trouver les variables importantes. Et si vous avez parcouru notre blog, alors vous êtes prêt à passer outre!