Tutoriel Bootstrap4 sur la façon de personnaliser vos propres couleurs et styles

Bootstrap est actuellement le framework CSS le plus populaire. Il existe de nombreux sites Web et systèmes de gestion d'arrière-plan dont les styles sont conçus sur la base de Bootstrap. Cependant, Bootstrap a toujours conservé la tonalité de couleur bleu + gris clair, et il en va de même pour le dernier Bootstrap 4. Après l'avoir regardé longtemps, il est inévitable de ressentir une certaine fatigue esthétique.

Cet article présente principalement comment personnaliser vos propres couleurs et styles dans Bootstrap 4. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Comment modifier le thème de couleur de Bootstrap ? Cet article vous apprend à personnaliser Bootstrap 4 pour rendre votre page plus unique.

0. Outils requis

1. Compilation Node.js

2. Bootstrap4, téléchargez Bootstrap Pour dépendre sur le package, vous devez installer Node.jsBootstrap4 sur votre ordinateur. Pour modifier le code source de Boosttrap, vous avez besoin d'une copie du code source. Vous pouvez télécharger le code source en visitant le site officiel de Bootstrap (https://getbootstrap. .com).

Certains endroits peuvent ne pas pouvoir accéder au site officiel de Bootstrap4, vous pouvez donc également visiter le site Web chinois de Bootstrap pour télécharger le code source.

1. Thème de couleurs personnalisé

Afin de faciliter la personnalisation, Bootstrap a extrait certaines variables et les a placées dans le fichier scss/_varaibles.scss.

Ouvrez ce fichier et vous constaterez qu'il y a beaucoup de configurations. Retrouvez ce paragraphe :

$primary:    $blue !default;
$secondary:   $gray-600 !default;
$success:    $green !default;
$info:     $cyan !default;
$warning:    $yellow !default;
$danger:    $red !default;
$light:     $gray-100 !default;
$dark:     $gray-800 !default;

C'est ici que vous configurez les bases. tonalité de couleur de Bootstrap et modifiez-la. Ces valeurs de couleur peuvent rendre le site Web très différent. En plus de la couleur principale, de nombreuses variables liées à la couleur peuvent être contrôlées, et la couleur nocturne de la bordure d'une zone de saisie peut également être ajustée. Vous pouvez l'essayer lentement.

Par exemple, modifiez ces variables dans _variables.scss :

$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
$success:    #fff !default;
$light:     #e8cd56 !default;
$dark:     #e95420 !default;

$input-bg: #c34113;
$input-border-color: #c34113;
$input-placeholder-color: #ccc;
$input-color: #fff;

$jumbotron-bg: rgb(247, 247, 247);

et vous obtiendrez un style de couleur similaire à celui du site Web Ubuntu :

2. Affiner l'apparence du composant

En plus d'ajuster la couleur, _variables.scss possède également de nombreuses variables qui peut affiner l'apparence du composant Bootstrap, tel que :

$enable-shadows, contrôle si les ombres sont affichées autour de certains composants contextuels

$enable-rounded, contrôle si les ombres sont affichées autour des composants (boutons, zones de saisie, listes déroulantes, etc.) Affichées sous forme de coins arrondis

$enable-gradients, contrôle si l'arrière-plan du composant affiche un faible effet de dégradé

Ce contrôle Il existe beaucoup plus de variables, je ne les listerai donc pas une par une.

4. Compiler Bootstrap

Après avoir modifié les variables, comment générer votre propre fichier CSS Bootstrap ? Nécessite une compilation avec npm.

Avant de compiler, vous devez télécharger divers packages de dépendances, ce qui peut être fait via la commande d'installation :

npm install

Astuce : téléchargements Node.js Les packages de dépendances du site officiel de npm par défaut peuvent être plus lents. Il est recommandé de télécharger depuis le miroir Taobao NPM, qui est très rapide :

Exécuter npm install -g cnpm --registry=https://registry.npm.taobao.org d'abord

Ensuite, partout où la commande npm est utilisée, vous pouvez utiliser cnpm au lieu de

Après avoir téléchargé les dépendances, effectuez la compilation :

npm run dist

Attendez un instant, le fichier css compilé apparaîtra dans le répertoire dist/css/ et peut être copié sur vous Utilisé dans les projets !

5. Personnalisez Bootstrap dans le projet Webpack

Le contenu ci-dessus concerne la personnalisation de Bootstrap 4 en compilant le code source. Que dois-je faire si je souhaite personnaliser Bootstrap4 dans mon projet Webpack ?

Il n'est pas approprié de modifier directement le code source de Bootstrap dans node_modules. La méthode officiellement recommandée est de créer un nouveau fichier custom.scss dans le projet et d'y écrire les variables que vous souhaitez modifier :

// 如果想修改 _variables.scss 中的变量，请写在这里
$primary:    #e95420 !default;
$secondary:   #0e8420 !default;
...
// 文件末尾请这样引入 Bootstrap 的源码
@import "~bootstrap/scss/bootstrap";

Puis lors de la compilation avec Webpack , Ajoutez également custom.scss à la liste des fichiers compilés. Cela nécessite de modifier la configuration webpack.config.js dans le projet.

Alors, comment écrire webpack.config.js ?

La réponse est dans la documentation officielle de Boostrap4, vous pouvez la lire vous-même. Vous pouvez également me parrainer pour 1 yuan via cet identifiant WeChat, et je vous dirai directement la réponse. Merci à tous, votre soutien est pour moi une motivation pour continuer à partager ! :-)

Recommandations associées :

lecture du code source bootstrap4 experience_html/css_WEB-ITnose

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!