Maitriser Facilement le Jeu d’Affichage de Bootstrap

Laisser un commentaire / Tutoriels / Par
jeu d'affichage avec bootstrap

A quoi bon placer un élément sur une page puis le cacher ?

Pourquoi ne pas exclure simplement cet élément pour alléger le code, certains diront.

Ils ont raison, mais certains cas nécessitent une telle manipulation, un petit exemple :

Vous désirez pour votre site avoir pour la section qui suit la barre de navigation un joli carrousel sur les écrans larges, mais pour les mobiles et tablettes une simple image avec un titre accrocheur.

Pour un cas pareil, de tel jeu d’affichage (cacher certains éléments, puis les réafficher), aide à avoir le résultat escompté.

Dans ce tutoriel, découvrez comment réaliser de tel jeu d’affichage de Bootstrap.

Cacher un élément

LA SUITE APRÈS CETTE PUBLICITÉ

Cacher un élément en HTML peut se faire en utilisant l’attribut booléen hidden, ou encore en passant par le CSS.

<div hidden> Utilisation de l'attribut booléen hidden</div>

Pour cacher l’élément HTML grâce au CSS, on utilise la propriété display qui prend pour valeur none.

div{
    display: none;
}

Bootstrap conscient du jeu d’affichage en webdesign propose la classe .d-none qui permet de cacher un élément HTML.

<div class="d-none"> Cacher l'élément à l'aide de Bootstrap</div>

Utilise la classe  .d-none ou, passer par le CSS en faisant appel à la propriété display revient au même.

Car .d-none est une classe dans la feuille de style Bootstrap qui fait appel à la propriété display et lui attribue la valeur none.

Mais vous découvrirez dans les lignes qui suivent l’avantage de réaliser le jeu d’affichage avec Bootstrap.

Afficher un élément

Si jamais vous avez caché un élément HTML, vous ressentirez le besoin de le réafficher dans certaines circonstances, voilà comment s’y prendre.

Si vous êtes passé par le CSS pour le cacher, alors pour l’afficher il vous faut utiliser cette fois-ci la valeur block.

div{
    display: block;
}

Mais si vous avez utilisé Bootstrap, alors c’est la classe .d-block qui vous permettra de rendre visible de nouveau l’élément.

<div class="d-block"> Afficher l'élément à l'aide de Bootstrap</div>

Cacher et afficher un élément en fonction d’un écran

Vous remarquerez ici qu’il est avantageux de cacher et d’afficher un élément à l’aide de Bootstrap.

Le jeu d’affichage avec Bootstrap prend toute son importance quand il s’agit de cacher l’élément sur un écran donné et l’afficher sur un autre écran.

Bien avant de voir comment réaliser une telle manipulation, nous allons voir ce que c’est qu’un breakpoint, les différents breakpoints qui existent.

Un breakpoint c’est une taille imposée par la fenêtre de rendu du navigateur.

Et Bootstrap propose différents suffixes pour les types d’écran auxquels l’on désire appliquer son style.

Nous avons : -sm pour les écrans de petite taille (smartphones), -md pour les écrans de tailles moyennes(tablette), -lg pour les écrans larges et -xl pour les écrans extra larges.

Grâce à ses suffixes, vous pouvez spécifier l’écran sur lequel l’élément ne doit pas apparaître et celui sur lequel il peut s’afficher.

Les classes pour exclure un élément en fonction des écrans : .d-sm-none, .d-md-none, .d-lg-none, .d-xl-none.

Les classes pour afficher un élément en fonction des écrans : .d-sm-block, .d-md-block, .d-lg-block, .d-xl-block.

Application : Exemple de jeu d’affichage avec Bootstrap

Un petit exercice.

Nous allons réaliser une barre de navigation avec Bootstrap.

Notre barre de navigation présentera le logo à gauche sur les mobiles et tablettes, mais à partir des écrans larges, le logo sera au milieu de la barre de navigation.

Hop ! Surprenez-moi.

Ouvrez votre éditeur de code et faites de cet exercice qu’une bouchée.

Maintenant voyons voir si vous avez réussi, place à la correction de l’exercice.

<div class=" navbar navbar-expand-lg navbar-light">
	<div class="navbar-brand d-lg-none">
		<a href="#" ><img class="logo" src="img/logo.png"></a>
	</div>
	<button class="navbar-toggler" type="button" data-toggle="collapse"  data-target="#navbarResponsive">
		<i class="fa fa-bars"></i>
    </button>
	<div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="nav navbar-nav m-auto">
            <li class="nav-item">
                <a class="nav-link" href="#"> Accueil</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href=""> Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">A Propos</a>
            </li>
        	<li class="nav-item d-none d-lg-block ">
        		<a class="navbar-brand" href="#"><img class="logo" src="img/logo.png"></a>
        	</li>
            <li class="nav-item">
                <a class="nav-link" href=""> Galleries</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"> Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"> Contact</a>
            </li>
        </ul>
	</div>
</div>

Autres tutoriels sur le blog


Laisser un commentaire

Contact
Contact