Comment créer une mise en page à fluide fixe avec Twitter Bootstrap ?

Création d'une mise en page à fluide fixe à 2 colonnes avec Twitter Bootstrap

Introduction

Création d'une la mise en page avec une colonne de largeur fixe à côté d’une colonne de largeur fluide est une exigence courante pour la conception Web réactive. Ce style de mise en page permet une barre latérale ou un panneau de navigation fixe ainsi qu'une zone de contenu flexible qui s'adapte à différentes tailles d'écran. En utilisant Twitter Bootstrap, il est possible d'y parvenir mise en page.

Mise en œuvre

HTML

<div class="container-fluid fill">
  <div class="row-fluid">
    <div class="fixed">
      ...
    </div>
    <div class="filler">
      ...
    </div>
  </div>
</div>

CSS

.fixed {
  width: 150px;
  float: left;
}

.fixed + div {
  margin-left: 150px;  
  overflow: hidden;
}

.fill { 
  min-height: 100%;
  position: relative;
}

.filler::after {
  background-color:inherit;
  bottom: 0;
  content: "";
  height: auto;
  left: 0;
  position: absolute;
  top: 0;
  width: inherit;
  z-index: -1;  
}

Explication

• Le La classe conteneur-fluid crée une mise en page fluide qui remplit toute la fenêtre d'affichage.
• La classe row-fluid garantit que les éléments enfants remplissent la largeur disponible.
• La classe .fixed définit la largeur de la barre latérale à une valeur fixe (par exemple, 150 px).
• La propriété margin-left de l'élément frère .fixed garantit que la zone de contenu commence après le sidebar.
• La classe fill définit une hauteur minimale de 100 % sur l'élément conteneur-fluide, garantissant que la barre latérale et la zone de contenu ont la même hauteur.
• L'élément .filler, créé par le :: après le pseudo-sélecteur, superpose le div .filler et donne l'illusion d'une hauteur égale pour les deux colonnes.

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!