简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Tutoriel d'amorçage > le corps du texte

Comment implémenter une mise en page réactive dans bootstrap

藏色散人
Libérer： 2023-02-09 11:38:34
original
5848 Les gens l'ont consulté

Dans bootstrap, le système de grille peut être utilisé pour implémenter une mise en page réactive. La méthode de mise en œuvre est la suivante : 1. Créer une mise en page à travers une série de combinaisons de lignes et de colonnes ; 2. Choisir différentes mises en page en fonction des différents écrans ; Tailles. Option de grille, puis réalisez une mise en page automatique.

Comment implémenter une mise en page réactive dans bootstrap

L'environnement d'exploitation de ce tutoriel : système Windows 7, bootstrap version 3, ordinateur Dell G3

bootstrap implémente une mise en page réactive :

Vous pouvez utiliser le système de grille dans bootstrap pour implémenter une mise en page réactive.

Bootstrap fournit un système de grille fluide réactif et mobile qui est automatiquement divisé en 12 colonnes maximum à mesure que la taille de l'écran ou de la fenêtre d'affichage augmente. Il contient des classes prédéfinies faciles à utiliser, ainsi que de puissants mixins pour générer des présentations plus sémantiques.

Principe du système de grille :

Tout d'abord, le système de grille est utilisé pour créer une mise en page à travers une série de combinaisons de lignes et de colonnes. Bootstrap sélectionne différentes options de grille en fonction des différentes tailles d'écran. Il existe quatre options de grille : écran ultra-petit (téléphone mobile), petit écran (tablette), écran moyen (ordinateur de bureau) et grand écran (ordinateur de bureau très grand). Le système de grille est divisé en 12 colonnes, c'est-à-dire que chaque ligne peut contenir jusqu'à 12 colonnes. Si le nombre de colonnes contenues dans un .row est supérieur à 12 (c'est-à-dire que les cellules de la grille dans une ligne dépassent 12 cellules), elle sera automatiquement composée. En bref, une ligne ne peut contenir qu'un maximum de 12 colonnes. l’analyse détaillée plus tard.

Dans Bootstrap3, l'écran est principalement divisé en trois types (expliqués ici par des lignes) :

.col-xs-* Écran ultra-petit, téléphone portable (largeur

.col-sm-* Petit écran, tablette (largeur ≥ 768px)

.col-md-* Écran moyen, moniteur de bureau (largeur ≥ 992px)

Quoi qu'il en soit type d'écran sur lequel il se trouve, le système de grille le divisera automatiquement en 12 colonnes

.col-xs-* et .col-sm- et .col-md-. Les paramètres suivants sont représentés dans le courant. écran. Le nombre de colonnes occupées.

Comment implémenter une mise en page réactive dans bootstrap

Lorsque vous utilisez le système de grille, vous devez effectuer les opérations suivantes dans la section : 

<head>
    <meta charset="UTF-8">
     <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/bootstrap.min.css">
     <!-- [if lt IE 9]>
         <script  src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif] -->
</head>
Copier après la connexion

1 Afin de garantir un dessin et une mise à l'échelle appropriés de l'écran tactile. , vous devez effectuer ce qui suit dans la balise de métadonnées Ajouter une fenêtre d'affichage

width=device-width width égale à la largeur de l'appareil

initial-scale=1.0 Taille d'affichage initiale - taille originale, c'est-à-dire pas de mise à l'échelle

2 , importez le fichier bootstrap.css [fichier CSS de base bootstrap, doit être importé], il existe deux façons d'importer :

Tout d'abord, importez directement le fichier .css local :

Deuxièmement, utilisez le service d'accélération CDN : 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
Copier après la connexion

3 Compatibilité :

bootstrap est basé sur CSS3 et n'est pas pris en charge pour IE8.

IE8 nécessite le. coopération de Response.js pour implémenter la prise en charge des requêtes multimédias (media query).

Recommandé : "Tutoriel vidéo bootstrap" "Tutoriel vidéo CSS"

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!

Étiquettes associées：
bootstrap
source：php.cn
Article précédent：Comment installer bootstrap à l'aide de la commande nuget Article suivant：Comment désactiver le modal bootstrap
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Comment résoudre le mystérieux espace vide en bas de page en CSS J'essaie de créer une page Web simple en utilisant Bootstrap et D3, mais je ne sais pas co...
Depuis 2024-04-06 20:22:15
0
1
454
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Le commutateur Bootstrap ne fonctionne pas correctement lorsque la page Web est redimensionnée Description :<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"c...
Depuis 2024-04-05 08:45:39
0
1
3443
Afficher les fichiers PDF AWS en mode Bootstrap dans Laravel J'ai téléchargé l'URL AWS comme https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6...
Depuis 2024-04-04 22:16:18
0
1
1450
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！