Affichage des articles dont le libellé est bootstrap. Afficher tous les articles

modal

Nous allons tenter de comprendre deux aspects :
- apparition d'une zone opaque
- disparition de l'ascenseur

Nous n'allons pas pour le moment étudier la partie dynamique JS.

Zone opaque

Code origine

Utilisons la position fixe

Utilisons z-index

passer la valeur de z-index à -5;

Etude

rappel : overflow
Essayer de comprendre l'ajout de la classe sur le body !
Explication

TP
Etudier le comportement du code (regarder la console) et tenter de le corriger !

Autre idée
Les solutions de la zone opaque ne sont pas uniques !
Voici la solution en image de chez deezer avec position : absolute.

Mais avez vous remarqué que lorsque vous cliquez sur la photo précédente une zone opaque apparaît.

Bootstrap les grilles

Mais que veut dire col-xs-12 col-sm-6 col-md-2 col-lg-8 ?

Examinons d'abord le comportement des class en redimensionnant votre fenêtre.

Les classes possibles

col-xs-12 col-sm-6 col-md-2 col-lg-8

col-xs-6 col-sm-6 col-md-10 col-lg-4

La classe appliquée

JS Bin on jsbin.com

My bootstrap

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>