En tant que plug-in frontal qui prend en charge la disposition réactive, Bootstrap joue un rôle important. Que vous naviguiez sur le Web sur votre téléphone, votre tablette ou votre PC, vous pouvez obtenir de bons résultats. Tout cela nous est apporté par bootstrap!
Aujourd'hui, je parlerai principalement de la mise en page de la page. C'est la chose la plus fondamentale. Lorsque nous concevons un site, nous devons concevoir une page standard globale et unifiée pour cela. Nous appelons ce type de pages de mise en page, et ce qui se reflète sur la page, ce sont les éléments de mise en page, qui est bien sûr indispensable dans Bootstrap.
La disposition de Bootstrap est un système raster, c'est-à-dire qu'il se compose de lignes et de colonnes. Lorsqu'il est utilisé, il doit envelopper un conteneur .Container pour le contenu de la page et le système raster.
A. La classe des container est utilisée pour les conteneurs qui sont à largeur fixe et prennent en charge les dispositions réactives.
<div> ... </div> La classe .Container-fluid est utilisée pour les conteneurs avec 100% de largeur, occupant toutes les fenêtres. <div> ... </div>
Dans Bootstrap, les lignes et les colonnes sont représentées par Row et Col, et il y a jusqu'à 12 unités de colonne de suite. COL-MD-1 représente la largeur d'une unité, et Col-MD-7 représente la largeur de sept unités. Ils sont ajoutés pour représenter jusqu'à 12 unités.
<div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </ di v> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> < div> .col-md-1 </div> <div> .col-md-1 </div> <div> .col-md-1 </div> </div> <div> <div> .col-md-8 </div> <div> .col-md-4 </div > </ div> <div> <div> .col-md-4 </div> </div> <div> <div> .col-md-4 </div> <div> .col-md-4 </div> <div> .col-md-4 </div> </div>
Les deuxième et troisième lignes montrent des effets similaires
Trois colonnes imbriquées, il peut également y avoir des colonnes dans la colonne . Nous devons changer MD en SM dans cette nidification
<div> <div> Niveau 1: .Col-Sm-9 <div> <div> Niveau 2: .Col-XS-8 .Col-SM-6 </div> <div> Niveau 2: .Col-XS-4 .Col-SM-6 </div> </div> </div>
L'effet est similaire à cela
Ce qui précède est la connaissance de base de la mise en page de la page bootstrap qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!