Comment créer un thème Bootstrap personnalisé à partir de zéro


AmorcerSam Norton • • 10 minutes de lecture

Bootstrap, le framework frontal le plus populaire au monde, permet aux concepteurs et développeurs Web de générer rapidement des thèmes de site Web créatifs. Alors, créons un site Web Bootstrap qui fonctionne avec les navigateurs Web modernes et différentes fenêtres telles que les grands écrans et les appareils mobiles.

Vous recherchez un constructeur en ligne Bootstrap?

Bootstrap fournit des moyens utiles de résoudre différents défis liés à la création de modèles de sites Web réactifs grâce à son ensemble de composants puissants et robustes. Créer un thème de bootstrap sans réinventer le HTML, CSS et JavaScript de base pour chaque projet est la principale caractéristique du framework. En toute confiance, il propose des solutions prêtes à l'emploi ainsi que les autres modules tiers que vous pouvez intégrer sans vous soucier du support car il dispose d'une grande communauté de développeurs prêts à vous aider en cas de problème.

Bien qu'il existe de nombreux constructeurs de bootstrap en ligne et hors ligne existants que vous pouvez utiliser pour créer rapidement des prototypes de sites Web, bootstrap vous permet de contrôler plus facilement presque toutes les parties de la conception et des mises en page de votre modèle de site Web, qu'il s'agisse d'un simple blog ou d'un site Web de commerce électronique des grandes entreprises.

Aujourd'hui, je vais vous montrer comment créer un thème Bootstrap à partir de zéro en quelques minutes.

En savoir plus sur Bootstrap:

Générateur de modèles d'e-mails en ligne

Avec Postcards, vous pouvez créer et modifier des modèles d'e-mails en ligne sans aucune compétence en codage! Comprend plus de 100 composants pour vous aider à créer des modèles d'e-mails personnalisés plus rapidement que jamais.

Essayez gratuitementAutres produits

Wireframing du thème Bootstrap

Avant de commencer à coder le thème Bootstrap, commençons par créer son wireframe. J'utilise Mockflow pour le wireframe de notre thème d'amorçage. Techniquement, notre wireframe comprendra les composants suivants:

  • La navigation
  • Section Héros / En-tête
  • À propos de nous
  • Section des services
  • Section de comptoir
  • Section des témoignages
  • Section de contact
  • Bas de page
Comment créer un thème Bootstrap personnalisé

Structure des fichiers

Après avoir présenté notre conception sur Mockflow, il est temps de créer les fichiers et le dossier nécessaires avant d'entrer dans le balisage du thème de base. Nous devons créer les fichiers et dossiers suivants en suivant cette composition:

racine/
| —Css /
| ——Custom.css
| —Polices Web /
| —Images /
| —Js /
| ——Script.js
| —Index.html

Téléchargement des fichiers sources de Bootstrap

Ensuite, nous devons télécharger les fichiers source Bootstrap et les ajouter à notre dossier JavaScript et CSS. Pour ce faire, accédez à la page de téléchargement Bootstrap et téléchargez les fichiers source de n'importe quel thème. Dans les fichiers source de téléchargement, nous devons copier le bootstrap.min.css dans notre dossier CSS. Nous devons également copier le bootstrap.min.js et bootstrap.bundle.min.js sur notre dossier JavaScript.

Télécharger Bootstrap

Téléchargement des plugins tiers nécessaires pour jQuery d'un modèle

Après avoir téléchargé les fichiers source du bootstrap, nous devons également télécharger les fichiers jQuery / JavaScript tiers nécessaires que nous utiliserons sur notre thème Bootstrap. Commençons par jQuery. Accédez à la page de téléchargement de jQuery et téléchargez la dernière version compressée minifiée et placez-la dans notre dossier JavaScript. Ensuite, téléchargez le plugin jQuery Easing sur sa page GitHub et placez le jquery.easing.min.js fichier dans notre dossier JavaScript. Un dernier plugin à télécharger est le Scrollspy. Placer le scrollspy.min.js fichier dans notre dossier JavaScript.

Après avoir téléchargé tous ces fichiers, nous aurons les fichiers jQuery / JavaScript suivants dans notre dossier JavaScript:

  • bundle.min.js
  • easing.min.js
  • min.js
  • js
  • min.js

Téléchargement de Font Awesome

Le processus de création d'un thème nécessite le téléchargement des fichiers source de Font Awesome via sa page de téléchargement pour que nous puissions ajouter des icônes à notre projet. Une fois téléchargé, copiez le polices Web dossier dans notre dossier racine et le all.css fichier dans notre dossier CSS.

Télécharger Font Awesome

Images

J'ai déjà configuré toutes les images dont nous avons besoin pour ce thème personnalisé. Vous pouvez les télécharger ici et placer ces images dans le images dossier de thème.

Images Bootstrap

Remarque: Toutes les images d'illustration proviennent de Freepik.

Balisage de base pour la création d'un thème Bootstrap

Après avoir téléchargé tous les fichiers nécessaires à notre projet, il est maintenant temps de configurer les codes html de base ainsi que les liens vers nos fichiers CSS et jQuery / JavaScript. À l'intérieur de index.html fichier, nous devons ajouter les codes suivants:




    
    Thème Kleo Bootstrap
    
    
    
    
    



    
    
    
    
    
    


Navbar

Après avoir créé le balisage de base du thème Bootstrap, travaillons sur la section de la barre de navigation sur le même fichier. Navbar est un composant réactif d'un site Web qui sert de schéma de navigation et de réduction ou qui peut être basculé sur la fenêtre mobile qui se transforme en un format horizontal à mesure que la largeur de la fenêtre disponible augmente. Nous ajouterons le balisage de navigation bootstraps, puis ajouterons la classe normal-nav que nous utiliserons plus tard pour transformer la barre de navigation en un barre de navigation collante, une barre de navigation fixe en haut de la section d'en-tête pendant que l'utilisateur fait défiler. Nous utiliserons les balises d'ancrage pour naviguer dans le site Web en douceur via l'ID de site Web de chaque section à l'aide de jQuery et mettrons à jour automatiquement les liens dans la liste de navigation en fonction de la position de défilement via le plugin Scrollspy jQuery.

    
       
    

Ensuite, créons notre section héros / en-tête. Il s’agit généralement d’un composant jumbotron, mais nous n’utiliserons pas ce composant d’amorçage cette fois-ci, mais plutôt un balisage de section régulier qui contient tout le bootstrap nécessaire et les classes personnalisées dont nous avons besoin pour que cela soit beau plus tard sur le CSS de notre thème. Nous devons ajouter l'identifiant Haut sur notre section afin que nous puissions être en mesure de faire défiler vers le haut sur cette partie de notre site Web lorsque nous ajouterons les codes jQuery nécessaires pour cela plus tard.

    
    

Bootstrap Theme

Creating Bootstrap Theme From Scratch

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Learn More

À propos de nous

Maintenant, notre modèle Bootstrap a besoin d'une section à propos de nous. Ce sera une simple colonne pour le titre et une section de deux colonnes où nous inclurons notre texte factice dans la deuxième colonne et une image dans la première colonne provenant de Freepik. Enfin, nous placerons l'identifiant à propos sur notre section tag pour notre fonction de défilement de navigation jQuery plus tard.

    
    

About Us

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

A perfect bootstrap theme for all types of business.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Learn more

Section des services

Ensuite, le modèle a besoin d'une section de services. Pour cette partie de notre thème, nous utiliserons des icônes géniales pour chaque service en utilisant du texte factice dans une grille à trois mises en page avec la mise en page à une colonne en haut pour le titre. Nous inclurons également l'identifiant prestations de service sur notre section tag pour notre fonction de défilement de navigation plus tard sur nos codes jQuery.

    
    

Our Services

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Web Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

App Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Mobile Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section du comptoir des projets réalisés

Maintenant que nous avons configuré la section des services, nous allons ajouter une section de projet accomplie à quatre grilles de mise en page en utilisant des icônes font-awesome que nous animerons plus tard via jQuery.

    
    

0+

Websites

0+

Applications

0

Mobile Apps

0

Clients

Section des témoignages

Ensuite, nous allons maintenant intégrer la fonction de carrousel de bootstrap dans la section des témoignages de notre thème. Si vous n'êtes pas familier avec les carrousels, il s'agit simplement d'un composant de diaporama qui parcourt des éléments en utilisant divers éléments multimédias tels que des images, des diapositives ou du texte comme un carrousel rotatif normal dans un carnaval.

Nous utiliserons des composants de carrousel bootstrap pour parcourir l'avatar, les témoignages et les noms de notre client factice. Nous mettrons également le témoignages identifiant sur notre section balise pour le défilement de la navigation plus tard.

    
    

Testimonials

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Section de contact

La création de notre modèle Bootstrap implique une section contact. La section contact est l'une des parties les plus précieuses d'un site Web qui est souvent la destination idéale pour un nouveau visiteur en mission. Sur cette partie de notre thème, nous allons ajouter une grille de colonnes pour notre titre et une autre grille de mise en page à deux colonnes pour le contenu interne du contact. La première colonne des deux grilles de mise en page contiendra les informations de contact factices et la deuxième colonne comprendra un formulaire de contact que les utilisateurs peuvent utiliser pour nous envoyer un message. Nous devons également inclure le contact identifiant au section balise pour l'effet de défilement fluide de navigation plus tard lorsque nous ajouterons nos codes jQuery.


    

Contact

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Get Connected

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

659-888-5495

+1-689-888-5495

info@example.com

200 Lexington Ave, New York, NY 10016, USA

Enfin, nous ajouterons le balisage d'une section de pied de page tout en bas de notre thème Bootstrap. Cela aura simplement un symbole de copyright et l'année où le thème est créé.

    
    
    

Après avoir ajouté toutes nos balises, le modèle ressemblera maintenant à quelque chose comme ça. Ne vous inquiétez pas s'il ressemble à un thème squelette. Nous y mettrons du CSS en utilisant notre CSS personnalisé dans la partie suivante du didacticiel.

Aucun site Web CSS

Ajout de la feuille de style

Pour mettre un peu de magie sur notre balisage, nous allons maintenant ajouter notre CSS pour chaque section de notre thème Bootstrap dans le CSS personnalisé fichier.

CSS général

Avant d'aller plus loin, nous devons ajouter notre CSS général. Ce sont des codes CSS qui mettront simplement en forme notre balisage de base, comme la police que nous allons utiliser dans tout notre thème, la taille de police de départ et l'arrière-plan.

/*********************************************/
/*              GENERAL CSS                  "/
/*********************************************/

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");
body 
  font-family: "Poppins", sans-serif;
  color: #343a40;
  background: #ffffff;

a 
  outline: none;
  color: #6C55A3;
  text-decoration: none !important;

a:hover 
  color: #53407f;

p 
  line-height: 1.9;

h1, h2, h3, h4, h5, h6 
  font-family: "Poppins", sans-serif;

CSS utilitaire

Ensuite, nous ajouterons notre utilitaire CSS. Ces codes CSS comprendront de nombreuses classes disponibles pour faire de petites choses ponctuelles telles que des classes pour une taille de police spécifique, des couleurs, des arrière-plans et des classes pour définir des propriétés de mise en page spécifiques.

/*********************************************/
/*              UTILITY CSS                  "/
/*********************************************/

.text-sub 
  color: #9b9bae !important;

.bg-grey 
  background-color: #F8F6FA !important;

.title 
  color: #343a40;

.header-colorize 
  font-weight: 700;
  color: #6C55A3;

.section 
  padding: 120px 0px 120px 0px;
  position: relative;

.size-14 
  font-size: 14px;

.size-15 
  font-size: 15px;

.size-18 
  font-size: 18px;

.right-icon 
  line-height: 0;
  font-size: 19px;

.learn-more 
  color: #6C55A3;
  font-weight: 700;

.highlight 
  background: rgba(122, 96, 183, 0.1);
  -webkit-box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
  box-shadow: 0 1px 2px rgba(122, 96, 183, 0.5);
  color: #6c55a3;
  border-radius: 13px;
  display: inline-block;
  padding: .25em .4em;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

.header-bg 
  padding: 170px 0 140px;
  background-image: url('../images/header-background.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left bottom;

.header-bg .header-small-title 
  letter-spacing: 2px;

.header-bg .main-title 
  font-size: 2.8rem;
  line-height: 1.35;
  color: #6C55A3;

Navbar CSS

La conception de base de la barre de navigation Bootstrap contient la conception générique d'une barre de navigation. Dans cette partie de notre feuille de style, nous allons personnaliser l'apparence de notre barre de navigation pour la rendre complètement différente, en fonction de la conception de notre thème. Nous allons commencer par styliser nos éléments de lien, notre logo et passer à la conception d'effet de basculement.

/*********************************************/
/*              NAVBAR CSS                  "/
/*********************************************/

.nav-item .nav-link 
  text-decoration: none;
  display: inline-block;
  color: #343a40;

.navbar-kleo 
  margin-bottom: 0px;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background-color: transparent;
  padding: 14px 0px;
  width: 100%;
  border-radius: 0px;
  z-index: 999;

.navbar-brand 
  cursor: pointer;

.navbar-kleo .navbar-nav li a 
  line-height: 26px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 600;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  background-color: transparent !important;
  padding: 6px 0;
  margin: 0 20px;

.navbar-kleo .navbar-nav li .nav-link 
  padding-right: 0px;
  padding-left: 0px;

.navbar-kleo .navbar-toggles 
  font-size: 18px;
  background: 0 0;
  border: 1px solid transparent;
  color: #ffffff;
  outline: 0;
  padding: .26rem .76rem;

.navbar-kleo .navbar-nav li.active a, .navbar-kleo .navbar-nav li a:hover, .navbar-kleo .navbar-nav li a:active 
  color: #ffffff !important;

.nav .open>a, .nav .open>a:focus, .nav .open>a:hover 
  background-color: transparent;
  border-color: #6C55A3;

.navbar-toggler 
  font-size: 24px;
  margin-top: 5px;
  margin-bottom: 0px;
  color: #000;

.fas.fa-bars 
  color: #6C55A3 !important;

.sticky-nav.navbar-kleo .navbar-toggles 
  border: 1px solid transparent;
  padding: .26rem .76rem;
  outline: 0;

.sticky-nav.navbar-kleo 
  margin-top: 0px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
  color: #000000 !important;

.sticky-nav.navbar-kleo .navbar-nav 
  margin-top: 0px;

.sticky-nav.navbar-kleo .navbar-nav li a 
  color: #8a8aa0 !important;

.sticky-nav.navbar-kleo .navbar-nav li.active a, .sticky-nav.navbar-kleo .navbar-nav li a:hover, .sticky-nav.navbar-kleo .navbar-nav li a:active 
  color: #6C55A3 !important;

.navbar-toggler:focus 
  outline: none;

Boutons CSS

Bootstrap fournit par défaut différents styles de boutons avec une conception générique. Pour cette section, nous allons personnaliser l'arrière-plan, la couleur et la police de notre bouton d'amorçage. Nous travaillerons spécifiquement sur la taille principale du bouton d'amorçage puisque nous n'utiliserons pas l'autre forme de boutons d'amorçage dans notre thème.

/*********************************************/
/*              BUTTONS CSS                  "/
/*********************************************/

.btn 
  border-radius: 4px;
  padding: 12px 30px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-weight: 700;
  font-size: 15px !important;

.btn:focus 
  -webkit-box-shadow: none !important;
  box-shadow: none !important;

.btn:hover 
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);

.btn.btn-primary 
  color: #ffffff;
  background-color: #6C55A3 !important;
  border: 1px solid #6C55A3 !important;
  -webkit-box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);
  box-shadow: 0 4px 20px rgba(94, 98, 255, 0.15);

.btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary.focus, .btn.btn-primary:active, .btn.btn-primary.active 
  background-color: #53407f !important;
  border: 1px solid #53407f !important;
  -webkit-box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
  box-shadow: 0 3px 10px rgba(94, 98, 255, 0.5);
  color: #ffffff !important;

Section des services CSS

Maintenant que nous avons fini de brosser notre CSS personnalisé, passons à la section des services et ajoutons un peu de personnalisation. Fondamentalement, les codes CSS suivants définiront simplement certaines propriétés des icônes géniales de polices telles que l'arrière-plan, la taille et la bordure que nous avons utilisées sur notre balisage ci-dessus.

/*********************************************/
/*              SERVICES CSS                  "/
/*********************************************/
.services-container .services-icon 
  height: 72px;
  width: 72px;
  background: rgba(108, 85, 163, 0.08);
  font-size: 30px;
  display: inline-block;
  border-radius: 50% 50%;
  line-height: 74px;
  text-align: center;
  color: #6C55A3;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

.services-container .services-title 
  font-size: 1.4rem;
  color: #343a40;

Section de comptage des projets accomplis CSS

Il est maintenant temps de mettre du CSS pour notre compteur de projets accomplis. Nous mettrons chaque élément de la grille dans une zone de bordure qui plus tard, nous animerons le contenu à l'intérieur de chaque boîte via jQuery.

/********************************************************************/
/*               ACCOMPLISHED PROJECTS COUNTER CSS                  "/
/*******************************************************************/

.accomplished-counter-icon 
  font-size: 52px;

.accomplished-counter-bg .accomplished-counter-box 
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);

.accomplished-accomplished-counter-bg 
  background: #6C55A3;

.accomplished-counter-bg .accomplished-counter-bg 
  background-color: #6C55A3;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;


Formulaires CSS

Ensuite, configurons quelques CSS pour nos formulaires. Bootstrap, comme tous les frameworks frontaux, donne aux formulaires un style de base pour améliorer la conception et l'expérience utilisateur lors de leur utilisation, mais nous allons le personnaliser un peu en particulier le contour et les tailles de police.

/*********************************************/
/*                FORMS CSS                  "/
/*********************************************/

.form-control:focus 
  background-color: #fbfbfb;
  border-color: #6C55A3;
  -webkit-box-shadow: none;
  box-shadow: none;

.form-control 
  background-color: rgba(52, 58, 64, 0.01);
  border: 1px solid rgba(155, 155, 174, 0.3);
  padding: 9px 11px;
  font-size: 14px;

.form-control::-webkit-input-placeholder 
  font-size: 15px;
  color: #9b9bae;

.form-control:-ms-input-placeholder 
  color: #9b9bae;
  font-size: 15px;

.form-control::-ms-input-placeholder 
  font-size: 15px;
  color: #9b9bae;

.form-control::placeholder 
  color: #9b9bae;
  font-size: 15px;

CSS du carrousel

Maintenant, pour notre carrousel CSS, nous allons configurer chaque élément via le img-box classe et donnez à chaque témoignage une taille et un rayon de bordure. Nous allons également styliser les couleurs et les formulaires de navigation du carrousel afin qu'au lieu d'une forme circulaire, nous le formaterons dans un formulaire de type boîte.

/*********************************************/
/*              CAROUSEL CSS                  "/
/*********************************************/

.col-center 
  margin: 0 auto;
  float: none !important;

.carousel 
  margin: 50px auto;
  padding: 0 70px;

.carousel .item 
  color: #999;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  min-height: 290px;

.carousel .item .img-box 
  width: 135px;
  height: 135px;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 50%;

.carousel .img-box img 
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;

.carousel .testimonial 
  padding: 30px 0 10px;

.carousel .overview 
  font-style: italic;

.carousel .overview b 
  text-transform: uppercase;
  color: #6C55A3;

.carousel .carousel-control 
  width: 40px;
  height: 40px;
  margin-top: -20px;
  top: 50%;
  background: none;

.carousel-control i 
  font-size: 68px;
  line-height: 42px;
  position: absolute;
  display: inline-block;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;

.carousel .carousel-indicators 
  bottom: -40px;

.carousel-indicators li, .carousel-indicators li.active 
  width: 21px;
  height: 0px;
  margin: 1px 3px;

.carousel-indicators li 
  background: #999;
  border-color: transparent;
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);

.carousel-indicators li.active 
  background: #6C55A3;
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.2);

Notre pied de page a un design simple. Nous allons simplement mettre un rembourrage en haut et donner une simple couleur blanche sur notre texte de pied de page.

/*********************************************/
/*              FOOTER CSS                  "/
/*********************************************/

.footer 
  background-color: #6C55A3;
  padding-top: 20px;

.footer p 
  color: #fff;

CSS réactif

Enfin, il est temps d'ajouter du CSS réactif à la feuille de style du thème. Nous commencerons par les appareils mobiles évoluant d'abord vers les tablettes et les grands écrans.

Avec la largeur minimale de 200 px et une largeur maximale de 768px nous travaillerons sur notre bascule de navigation. Nous mettrons en œuvre la bonne largeur sur notre conteneur, les marges, les rembourrages et les couleurs.

Ensuite, nous modifierons simplement les tailles de police du titre principal de notre en-tête sur des écrans plus petits pour les rendre bien dans la fenêtre d'affichage de la tablette.

/*********************************************/
/*              RESPONSIVE CSS               "/
/*********************************************/

@media (min-width: 200px) and (max-width: 768px) 
  .navbar-kleo 
    background-color: #ffffff !important;
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    margin-top: 0px;
    color: #ffffff !important;
  
  .navbar-toggler 
    margin-bottom: 0px;
    font-size: 24px;
    margin-top: 0px;
    color: #343a40;
  
  .navbar-kleo .navbar-nav 
    margin-top: 0px;
  
  .navbar-kleo .navbar-nav li a 
    margin: 0px;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    color: #9b9bae !important;
  
  .navbar-kleo>.container 
    width: 90%;
  
  .navbar-collapse 
    padding: 0 20px;
  
  .navbar-kleo .navbar-nav li.active a 
    border-color: transparent;
  
  .navbar-kleo .navbar-nav li.active a, .navbar-kleo .navbar-nav li a:hover, .navbar-kleo .navbar-nav li a:active 
    color: #6C55A3 !important;
  

@media (max-width: 425px) 
  .header-bg .main-title 
    font-size: 2rem;
  

@media (max-width: 768px) 
  .header-bg 
    padding: 120px 0;
  

@media (min-width: 769px) and (max-width: 1024px) 
  .header-bg 
    background: none !important;
  

Maintenant que nous mettons tout notre CSS en place, notre thème Bootstrap ressemblera à quelque chose comme ça à ce moment-là:

Site Web Bootstrap avec CSS

Vous remarquerez également que certaines fonctionnalités telles que l'effet de défilement, le carrousel et la navigation mobile ne fonctionnent pas encore car nous n'avons pas placé nos codes jQuery. Faisons cela ensuite.

Ajouter des codes jQuery

Il est maintenant temps de mettre des codes jQuery sur notre thème script.js fichier afin de faire fonctionner certaines fonctionnalités. Nous commencerons simplement par appeler notre fonction de prêt de document. Fondamentalement, une page Web ne peut pas être manipulée sans que le document soit prêt. jQuery détecte l'état de préparation d'une page Web. Le code $ (document) .ready () s'exécutera une fois la page Modèle d'objet de document (DOM) est prêt pour l'exécution du code JavaScript. Ajoutons les codes suivants:

$( document ).ready(function() 
);

Transformer la barre de navigation en une barre de navigation collante

Une barre de navigation collante ou fixe est essentiellement un menu de composant où le composant lui-même est verrouillé ou fixé en haut de la section d'en-tête pendant que l'utilisateur fait défiler la page. Afin de mettre en œuvre cela, nous ajouterons le code suivant dans la fonction prête ci-dessus.

	$(window).scroll(function() 
	    var startPx = $(window).scrollTop();
	    startPx >= 50 ? $(".normal-nav").addClass("sticky-nav") :  $(".normal-nav").removeClass("sticky-nav");
	);

Notre code fonctionnera chaque fois que la fenêtre défile avec le point de départ de la position de défilement actuelle via var startPoint = $ (fenêtre) .scrollTop (); Sur ce code, nous devons également vérifier si la position est supérieure ou égale à 50 pixels. Si c'est au dessus de ou égal à 50 pixels nous ajouterons la classe sticky-nav. Sinon, nous supprimerons la classe sticky-nav.

Essayez de faire défiler un peu du haut de la page vers le bas avant la fin du héros / en-tête et vous verrez la barre de navigation coller à la partie supérieure du thème.

Effet de défilement et plug-in jQuery Scrollspy

Pour cette partie, nous avons deux objectifs en tête pour notre thème: d'abord, nous allons implémenter l'animation du défilement, puis nous appliquerons l'effet du plugin scrollspy jQuery pour mettre à jour automatiquement les liens dans une liste de navigation en fonction de la position de défilement.

    // SCROLL TO DIV
	$('.nav-item a, .mouse-down a').on('click', function(event) 
	    var $anchor = $(this);
	    $('html, body').stop().animate(
	        scrollTop: $($anchor.attr('href')).offset().top - 0
	    , 1700, 'easeInOutQuint');
	    event.preventDefault();
	);

    // SCROLLSPY
	$(".navbar-nav").scrollspy(
	    offset: 90
	);

Notre code a affecté le gestionnaire d'événements de clic anonyme aux éléments d'ancrage contenant élément de navigation ou souris vers le bas class puis nous avons créé un objet jQuery de l'élément cliqué via $ ancre variable. Le reste du code arrêtera l'animation en cours d'exécution sur les éléments HTML et body ou démarrera une nouvelle animation. Il inclut également les attributs d'animation via la fonction d'animation.

La deuxième partie de notre code appellera simplement la fonction jQuery scrollspy pour lancer l'effet scrollspy mettre à jour automatiquement les liens dans une liste de navigation en fonction de la position de défilement

Site Web Bootstrap

Compteur de projets réalisés

Enfin, nous allons ajouter le code de notre thème pour le compteur des projets accomplis. Cela ajoutera simplement un effet de compteur régulier de la valeur zéro à la valeur d'attribut de compteur spécifiée avec ses attributs d'animation et sa durée identifiés.

    // COUNTER
    var initial = 0;
	$(window).scroll(function() {
	    var msTop = $('#accomplished-counter').offset().top - window.innerHeight;
	    if (initial == 0 && $(window).scrollTop() > msTop) 
	        $('.accomplished-counter-value').each(function() 
	            var $this = $(this),
	                countData = $this.attr('counter');
	            $(
	                countNo: $this.text()
	            ).animate(
	                    countNo: countData
	                ,

	                
	                    easing: 'linear',
	                    duration: 2300,
	                    step: function() 
	                        $this.text(Math.floor(this.countNo));
	                    ,
	                    complete: function() 
	                        $this.text(this.countNo);
	                    

	                );
	        );
	        initial = 1;
	    
	});

Maintenant, notre projet est terminé. Vous pouvez maintenant essayer de faire défiler et regarder toutes les animations se produisant sur notre thème de bootstrap créé.

Vous pouvez consulter la démo ici.

Thème du site Web Bootstrap

Conclusion

Bootstrap a été un excellent outil pour les concepteurs et les développeurs Web pour prototyper facilement un site Web rapidement sans compromettre la qualité. Les possibilités de conception sont illimitées à votre imagination et il existe une grande communauté de développeurs qui l'utilisent depuis longtemps et qui peuvent vous aider chaque fois que vous rencontrez des problèmes avec le balisage ou le CSS.

Essayez d'utiliser cette conception sur votre prochain modèle de site Web. N'hésitez pas à le personnaliser à votre guise. Sois créatif. Qui sait que vous finirez peut-être par créer un bien meilleur design pour le thème de votre site Web.



Source link

Pourquoi créer une vitrine virtuels ?

On voit clairement qu’il est probable de se lancer dépourvu argent et inconscient technique particulière. Je vous conseille de vous jeter en dropshipping et de essentiellement ne pas mettre trop d’argent sur votre site. Il vous faut essentiellement avoir un budget marketing pour élever venir internautes sur votre boutique : c’est le ligament de la guerre. Car tel que je l’ai dit, vous pouvez avoir la plus belle boutique. Sans trafic, vous ne ferez des fois de chiffre d’affaires. Une que vous allez avoir testé, votre marché vous pourrez alors négocier un stock.