Comment implémenter la nidification des listes de bootstrap?

Les listes imbriquées dans Bootstrap nécessitent l'utilisation du système de grille de bootstrap pour contrôler le style. Créez d'abord une liste avec la couche externe

et <li>, puis enveloppez la liste des calques intérieure dans
et ajoutez

à la liste des calques intérieure pour spécifier que la liste des calques intérieure occupe la moitié de la largeur d'une ligne. De cette façon, la liste intérieure peut avoir le style approprié sans détruire la structure de la liste extérieure.



Liste de bootstrap Nesting? Cette question est géniale! De nombreux débutants seront coincés ici. En surface, le composant de liste de bootstrap est assez simple, mais il est vraiment un peu difficile à jouer avec la nidification. Nidiquant directement avec <ul></ul> et <li> ? Bien sûr, cela peut l'être, mais l'effet n'est peut-être pas aussi bon que prévu, et ce sera même désordonné. La clé est de comprendre le système de maillage de Bootstrap et quelques conseils CSS.

Prenons d'abord les bases de la liste de bootstrap. <ul class="list-group"></ul> Il s'agit d'une classe couramment utilisée qui vous donnera une liste avec des frontières arrondies. <li class="list-group-item"> Chaque élément de liste utilise cette classe. C'est aussi simple? Oui, c'est aussi simple que cela, mais pour nicher, vous devez y penser.

Nidiquant <li> <ul></ul> Cela fonctionne, mais le style peut être faux. Les styles de bootstrap rendent la liste intérieure bizarre car le style par défaut ne prend pas en compte la nidification. Par conséquent, nous devons le faire nous-mêmes et avoir suffisamment de nourriture et de vêtements.

Voici un conseil: utilisez la disposition de la colonne de bootstrap pour contrôler le style des listes imbriquées. N'ayez pas peur, c'est en fait très simple. Nous utilisons un système de grille pour placer la liste des calques intérieure dans une colonne afin que nous puissions contrôler sa largeur et sa position.

Voyons le code:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-6"> <ul class="list-group"> <li class="list-group-item">Item 1</li> <li class="list-group-item"> <div class="row"> <div class="col-md-12"> <ul class="list-group"> <li class="list-group-item">Nested Item 1</li> <li class="list-group-item">Nested Item 2</li> </ul> </div> </div> </li> <li class="list-group-item">Item 3</li> </ul> </div> </div> </div></code>

Voir? J'ai enveloppé la liste intérieure avec row et col-md-6 . col-md-6 signifie que cette liste de couche intérieure occupe la moitié de la largeur d'une ligne. Vous pouvez ajuster cette valeur au besoin. De cette façon, la liste intérieure peut avoir le style approprié et ne détruira pas la structure de la liste extérieure.

Bien sûr, ce n'est qu'une des méthodes. Vous pouvez également utiliser d'autres composants bootstrap, tels que des cartes, pour implémenter des listes imbriquées, qui peuvent être plus belles. Cela dépend de vos besoins de conception spécifiques.

En ce qui concerne les performances, les frais généraux de performance de cette méthode sont fondamentalement négligeables. Bootstrap lui-même est conçu pour être efficace, et il n'y aura aucun problème de performances à moins d'avoir un grand nombre d'articles de liste. Cependant, afin de maintenir la lisibilité et la maintenabilité du code, il est recommandé d'essayer de garder la structure de la liste concise autant que possible. Ne nichez pas trop de couches, sinon le code deviendra difficile à comprendre.

En bref, la clé pour nicher les listes de bootstrap est d'utiliser intelligemment le système de grille de bootstrap plutôt que de compter directement sur le style par défaut. Essayez plus et pratiquez plus et vous pourrez maîtriser cette compétence. N'oubliez pas que le code est mort, les gens sont vivants et une application flexible est le roi!

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!