• 6 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 04/09/2019

Intégrer les règles CSS

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

La grille de Bootstrap est, comme nous l’avons vu précédemment, composée de 12 colonnes. Les colonnes sont contenues dans des rangées (row) qui elles-mêmes sont encadrées par une grande <div class=”container”>. Chaque colonne ayant une largeur relative, exprimée en pourcentage, il est primordial de les englober dans une div qui ait une largeur fixe exprimée en pixels.

Comment calculer ces pourcentages ?

 En reprenant notre maquette, nous pouvons voir que la largeur de la grille est de 1230 px. Or le container de Bootstrap a une largeur de 1170 px en version Ordinateur (desktop).

Notre première mission va être de changer la largeur du container pour qu’il soit en adéquation avec notre maquette. Les colonnes s’adapteront automatiquement.

La première étape est de cibler le sélecteur dont nous voulons changer la valeur. Nous allons utiliser l’inspecteur de notre navigateur pour trouver le sélecteur à changer. Pas besoin de connaître toutes les classes de Bootstrap par coeur ! Il vous suffit de bien savoir utiliser votre inspecteur.

Cliquez-droit sur une des colonnes de votre page puis cliquez sur Inspecter l’élément. A gauche, sélectionnez la div qui a la classe “container”. Puis regardez, dans la colonne de droite dédiée au CSS, quelle valeur fait référence à la largeur de l’élément.

La règle qui nous intéresse est “max-width”. Cette règle donne une largeur maximale à l’élément mais lui permet également d’avoir une largeur inférieure si l’écran le demande, elle est donc assez flexible. 

Nous allons donc copier le sélecteur et la règle pour en changer uniquement la valeur.

/*##################################*/
/*############# GRILLE #############*/
/*#################################*/

 .container {
   width: 1230px;
 }

En lisant bien, vous remarquerez que des tailles d’écran apparaissent dans votre inspecteur. Elles sont identiques aux breaking-points utilisés par Bootstrap pour changer l’affichage de la grille.

Vous remarquerez aussi que la règle “max-width” se répète en dessous et adopte une valeur différente en fonction des tailles d’écran. Ces valeurs sont d’ailleurs barrées, la seule en vigueur étant celle qui se trouve tout en haut.

C’est normal. Votre navigateur a reconnu que sa largeur était supérieure à 1200px. Il a donc appliqué la règle qui s’applique à cette taille d’écran et écarté celles qui correspondent à d’autres largeurs.

Etant donné que nous voulons que le container ait une largeur de 1230px uniquement en version desktop, il va nous falloir cibler tous les écrans qui ont une largeur égale ou supérieure à 1200 px. Comment ferons-nous ?

Nous allons utiliser une media-query. Si le terme ne vous évoque rien c’est le moment de le découvrir !

La définition de Mozilla est assez parlante :

“Une media query (ou requête média) consiste en un type de média, et au moins une expression limitant la portée des déclarations CSS, en mettant à profit les particularités des supports multimédias comme leur largeur, leur hauteur ou leur affichage des couleurs. Ajouté dans CSS3, les media queries permettent d'adapter la présentation du contenu à une large gamme d'appareils sans changer le contenu lui-même.”

Mozilla lab

Concrètement, une media query fonctionne de cette manière :

  • Le navigateur détecte la largeur de la page,

  • il cherche les media-queries qui correspondent à cette largeur,

  • il exécute les règles contenues dans les media-queries correspondantes.

Exemple de media-query :

/*##################################*/
/*############# GRILLE #############*/
/*#################################*/

@media (min-width: 1200px) {
 .container {
   width: 1230px;
 }
}

Sauvez le document et rechargez votre page. Vous devriez constater que la largeur du container est plus grande. Bravo !

Couleurs de fond

Parfois, vous voudrez changer des composantes de la grille de Bootstrap comme les colonnes. La manière la plus simple, et la plus souple, de faire est de créer une classe que vous pourrez ajouter directement à l’élément que vous souhaitez modifier.

Prenons l’exemple de la grille composée des différents articles. Les colonnes ont des couleurs de fond différentes, or pour le moment le fond est transparent.

Nous allons donc créer plusieurs classes pour changer uniquement le fond des colonnes.

.pink {
    background-color: #f5989d;
}

.blue {
    background-color: #615f7d;
}

.green {
    background-color: #09a298;
}

Puis nous ajoutons la classe dans la colonne à changer.

       <div class="container">

         <div class="row">

           <div class="col-md-4 pink">

             <h1>Design quality</h1>

             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>

             <a href="">Find Out More   <i class="fa fa-long-arrow-right"></i></a>

           </div>

           <div class="col-md-7">

             <img src="img/phone.svg">

           </div>

         </div>

       </div>

Cette manière de procéder est très flexible car vous pourrez réutiliser la classe dans d’autres éléments. Elle correspond également à une très bonne pratique : le DRY.

Moins vous avez de code et plus il est facile de le maintenir dans la durée ! Imaginez que vous reprenez le projet dans 6 mois. Vous cherchez à remplacer le code couleur du bleu par une autre nuance. Comment pouvez-vous vous faciliter la vie dès maintenant ?

Dernières retouches

Il vous reste de nombreux ajustements à faire ! Voici mon dernier conseil : adoptez une approche du global au particulier et du haut vers le bas.

Concrètement, commencez par la première section et par vous intéresser à la photo de fond. Puis positionnez le logo à votre convenance et modifiez la taille du titre principal. Enfin, intéressez-vous au positionnement de l’image située à droite.

Puis continuez pour toutes les sections suivantes jusqu’au footer.

Exemple de certificat de réussite
Exemple de certificat de réussite