Comment disposer bootstrap

L'utilisation de bootstrap pour disposer un site Web nécessite un système de grille qui divise la page en conteneurs, lignes et colonnes. Ajoutez d'abord le conteneur, puis ajoutez les lignes dedans, ajoutez les colonnes dans la ligne et enfin ajoutez le contenu dans la colonne. La fonction de mise en page réactive de Bootstrap ajuste automatiquement la disposition en fonction des points d'arrêt (XS, SM, MD, LG, XL). Différentes dispositions sous différentes tailles d'écran peuvent être réalisées en utilisant des classes réactives.

Conseil de mise en page bootstrap

Comment utiliser Bootstrap pour la mise en page?

Bootstrap est un cadre CSS pour le développement rapide de sites Web et d'applications réactifs et axés sur les mobiles. Il fournit une gamme de classes et de composants prédéfinis pour une création facile de dispositions de sites Web.

Structure de disposition de bootstrap

Bootstrap organise le contenu à l'aide d'un système de grille qui divise les pages en lignes horizontales et colonnes verticales. La structure de maillage de base est la suivante:

• Conteneur: contient l'intégralité du contenu de la page.
• Row: définit une ligne horizontale qui contient des colonnes.
• Colonne: Spécifie la largeur du contenu dans la ligne.

Étapes pour créer une mise en page

1. Ajoutez un conteneur: créez un conteneur à l'aide de <div class="container"> .<li> <strong>Ajouter la ligne:</strong> créer des lignes dans le conteneur, en utilisant <code><div class="row"> .<li> <strong>Ajoutez une colonne:</strong> Ajoutez une colonne dans une ligne, en utilisant <code><div class="col-*"> , où <code>* spécifie la largeur de la colonne (par exemple, col-6 représente une colonne qui représente la largeur 6/12 dans une ligne).
2. Définissez le contenu: ajoutez du contenu à la colonne.

Bootstrap réactif

La fonction de mise en page réactive de Bootstrap permet aux sites Web de s'ajuster automatiquement en fonction du navigateur ou de la taille de l'appareil. Bootstrap utilise des points d'arrêt pour définir la plage de taille d'écran et ajuste la disposition pour chaque point d'arrêt. Les points d'arrêt sont les suivants:

Point d'arrêt	Largeur d'écran
xs	≤575px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px

Exemple d'utilisation de la classe réactive de bootstrap

Créez un conteneur qui est disposé pour trois colonnes sur des écrans moyens et grands et des colonnes simples sur de petits écrans:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-lg-4">列1</div> <div class="col-md-4 col-lg-4">列2</div> <div class="col-md-4 col-lg-4">列3</div> </div> </div></code>