Bootstrap fournit un système de grille de streaming mobile et réactif. À mesure que l'écran ou la taille de la fenêtre augmente, le système sera automatiquement divisé en jusqu'à 12 colonnes.
Le système de grille est similaire à une table avec des lignes et des colonnes. Il doit être placé dans un conteneur avec un type réglé sur le conteneur. Il peut s'agir d'une div et le contenu est placé dans la colonne. La grille de la conception Web est utilisée pour disposer le contenu, ce qui rend le site Web facile à parcourir. Ce qui suit est un exemple d'utilisation de la disposition de la grille bootstrap.
<div> <div> Col2 </div> <div> Col10 </div> </div>
L'effet d'affichage est le suivant:
Le style de class = "row" est ajouté pour représenter la ligne, et le style de classe = "col-sm-2" est ajouté pour représenter la colonne. Le système divise l'écran entier en 12 parties, Col-SM-2 signifie que la colonne s'étend sur 2 parties et que le rapport Col-SM-10 signifie que la colonne s'étend sur 10 parties. L'effet affiché sera comme indiqué dans la figure ci-dessus, indiquant qu'il y a deux colonnes dans une ligne, la première colonne représente 2 parties et que la deuxième colonne représente 10 parties.
Bootstrap est un cadre frontal réactif, qui se reflète dans le système de grille, qui est un appareil correspondant à différentes tailles d'affichage, et peut présenter différents effets d'affichage. Comme indiqué ci-dessous:
<div> <div> .col-xs-12 .col-md-8 </div> <div> .col-xs-6 .col-md-e4 </div> </div>
COL-MD-8 signifie que cette liste représente 8 parties sous des écrans de taille moyenne tels que les ordinateurs de bureau ordinaires et les ordinateurs portables. COL-XS-12 signifie que cette colonne représente 12 copies sous de petits écrans tels que les tablettes. Le code ci-dessus montre qu'il y a deux colonnes dans la ligne et la ligne suivante de bureau ordinaire et d'ordinateurs portables. La première colonne représente 8 parties, la deuxième colonne représente 4 parties et la ligne suivante et la colonne suivante représentent 2 colonnes, la première colonne représente 12 parties et la deuxième colonne représente 6 parties. De cette façon, différents effets sont obtenus sur différents dispositifs d'affichage. Vous pouvez simuler ces deux situations en redimensionnant le navigateur.
La figure suivante montre comment fonctionne le système de grille de bootstrap sur plusieurs appareils d'écran
Ce qui précède est la description complète des bases de la troisième grille de bootstrap introduites par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!