Maison > Article > interface Web > Existe-t-il une disposition en grille dans bootstrap ?
Existe-t-il une disposition en grille dans bootstrap ?
- WBOYoriginal
- 2022-06-16 11:10:132967parcourir
Il existe une disposition en grille dans bootstrap ; la disposition en grille fait référence à la division d'une ligne en 12 grilles et à l'attribution de 12 grilles à différents éléments div pour la disposition. Vous pouvez définir les grilles individuelles occupées par les colonnes. la mise en page modulaire est définie par le nombre de colonnes.
L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 5, ordinateur DELL G3
Y a-t-il une disposition en grille dans bootstrap ?
Y a-t-il une disposition en grille dans bootstrap ? . Qu'est-ce qu'une disposition en grille ?
Dans le passé, la disposition en tableaux était utilisée pour créer des mises en page de pages Web. La page Web était divisée en grands et petits tableaux en divisant les tableaux, puis les éléments étaient remplis à partir des tableaux. Plus tard, il s'est développé en une mise en page div+css. Flottez via div+css. disposition float:right et float:left. Maintenant, bootstrap utilise la disposition en grille. Pour faire simple, une rangée est divisée en 12 grilles. Attribuez 12 grilles à différents éléments DIV pour la mise en page.
Introduction de la disposition en grille dans Bootstrap, divisant la page en une disposition semblable à un tableau
-
Chaque ligne est composée de 12 colonnes, et la largeur de la colonne peut être définie en définissant le nombre de colonnes occupées par la colonne
Prend en charge la mise en page réactive, avec 5 tailles réactives correspondant à différentes largeurs d'appareil
Utilisez la mise en page de flux flexbox pour implémenter la mise en page
-
Utilisez des divs pour implémenter la disposition des conteneurs, des lignes et des colonnes
-
2. Comment implémenter la disposition en grille ?
Tout d'abord, il existe de nombreuses façons d'utiliser le bootstrap, le chargement de webpack ou l'utilisation de références CND, etc. J'ai téléchargé la version 3.37 directement depuis CDN sur mon ordinateur local. Ensuite, référencez-le via la balise de lien. Ceci est similaire au référencement de Jquery. Deuxièmement, attribuez la grille en fonction de la disposition. Par exemple, disons que vous souhaitez implémenter une grande mise en page horizontale avec trois colonnes. Allouez ensuite 12/3=4 grilles à chaque DIV
Si les trois colonnes sont inégales, il y aura environ 3 grilles à gauche, 5 au milieu et 4 à droite. Opérations spécifiques :
Premièrement. organisez un conteneur div pour stocker la grille, ajoutez la classe conteneur au div pour implémenter le conteneur
- Ajoutez la classe de ligne aux éléments enfants pour implémenter la disposition des lignes et utilisez col-* pour implémenter la disposition des colonnes
- Lors de l'utilisation de col-, si la taille n'est pas définie, la largeur sera intelligemment divisée en parties égales par défaut , et si la taille de * est définie, l'espace de la page sera divisé proportionnellement
- Mais la taille de * dans la même ligne ne peut pas dépasser 12, elle peut être inférieure à 12, et il y aura un espace vide lorsque ; s'il dépasse 12, la partie excédentaire sera placée dans la ligne suivante
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>栅格布局</title> <!-- 移动端优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 引入bootstrap.css文件--> <link rel="stylesheet" href="css/bootstrap.css"> <style> .row { border: 1px dashed #000; margin-top: 20px; } .col { border: 1px solid #0069d9; background: #f1b0b7; } </style> </head> <body> <!-- 不设置*的大小，默认平分列的宽度--> <div> <div> <div class="col col-sm">第一列</div> <div class="col col-sm">第二列</div> <div class="col col-sm">第三列</div> </div> </div> <!--设置container-fluid默认占满宽度--> <div> <div> <div class="col col-sm">第一列</div> <div class="col col-sm">第二列</div> <div class="col col-sm">第三列</div> </div> </div> <!--当设置*的大小时，默认按照比例分割宽度--> <div> <div> <div class="col col-sm-5">第一列</div> <div class="col col-sm-2">第二列</div> <div class="col col-sm-5">第三列</div> </div> </div> <!--小于12时，会出现空白区域--> <div> <div> <div class="col col-sm-3">第一列</div> <div class="col col-sm-2">第二列</div> <div class="col col-sm-3">第三列</div> </div> </div> <!--当超出12时，会自动换行--> <div> <div> <div class="col col-sm-5">第一列</div> <div class="col col-sm-5">第二列</div> <div class="col col-sm-7">第三列</div> </div> </div> <!--首先引入jQuery文件，再引入poper文件，最后引入bootstrap文件--> <script src="js/jquery.slim.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html> - 3. Paramètres de classe de disposition de grille Qu'est-ce que cela signifie La classe de grille a quatre col-lg-1, col-md-1 ? , col-sm-1, col-xs-1, qui correspondent respectivement au grand écran (grand) et au moyen écran (middl), petit écran (smll), extrêmement petit (xs). Parmi eux, col signifie colonne, le milieu est l'abréviation de la taille, et le dernier est la taille de la grille allouée au div (l'exemple est qu'il occupe 1/12)
Recommandations associées : tutoriel bootstrap
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!