Comment puis-je créer un tiroir de barre de navigation latérale réactif dans Bootstrap 4 ?

Utilisez le composant Offcanvas intégré pour Bootstrap 5

Bootstrap 5 Beta 3 a introduit un nouveau composant Offcanvas. Ce composant facilite la création de barres latérales.

Vous pouvez voir un exemple de ce composant utilisé sur le site Web Bootstrap.

Création d'un tiroir de barre latérale de barre de navigation réactive dans Bootstrap 4

Pour créer un tiroir de barre de navigation latérale réactif dans Bootstrap 4, vous pouvez utiliser une combinaison de réduction, de pilules empilées et de flexbox.

Commencez par créer un div de conteneur avec une classe de fluide de conteneur et une hauteur de 100vh.

<div class="container-fluid h-100">
  ...
</div>

À l'intérieur du conteneur div, créez deux lignes. La première ligne contiendra la barre latérale et la deuxième ligne contiendra le contenu principal.

<div class="row h-100">
  <div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark">

La barre latérale doit recevoir une classe de réduction pour la masquer par défaut. Vous pouvez ajouter un bouton pour basculer la visibilité de la barre latérale.

<button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button">
  Menu
</button>  

Pour le contenu principal, utilisez une classe col pour remplir le reste de l'espace disponible.

<div class="col">
  ...
</div>

Pour rendre le sidebar sticky, ajoutez la classe sticky-top à la barre de navigation de la barre latérale.

<ul class="nav flex-column navbar-dark sticky-top">
  ...
</ul>

Enfin, ajoutez du CSS pour styliser la barre latérale et la rendre réactive.

@media (min-width: 768px) {
  #collapseExample {
    width: 250px;
  }
}

Cela rendra le barre latérale de 250 px de large sur les écrans plus larges que 768 px.

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!