Le bootstrap est-il réactif ?

bootstrap est réactif. Bootstrap fournit un système de grille fluide réactif, axé sur les appareils mobiles, qui utilise différents attributs de classe pour différents écrans. Pendant le développement, vous pouvez uniquement écrire un ensemble de code pour l'utiliser sur les téléphones mobiles, les tablettes et les PC sans avoir à en tenir compte. requêtes des médias.

L'environnement d'exploitation de cet article : système Windows 7, version bootstrapv4.4.1, ordinateur Dell G3.

Qu'est-ce que la réactivité ?

Le responsive web design est une méthode qui permet aux utilisateurs d'obtenir de bons effets visuels lors de la navigation sur un site Web sur des appareils de différentes tailles. Par exemple, vous parcourez d'abord un site Web sur un écran d'ordinateur, puis vous le parcourez sur un smartphone. La taille de l'écran du smartphone est beaucoup plus petite que celle de l'écran de l'ordinateur, mais vous ne ressentez aucune différence entre les deux. presque pareil, ce qui signifie que le site Web fait un excellent travail en matière de conception réactive.

Le bootstrap est-il réactif ?

bootstrap est réactif.

Bootstrap fournit un système de grille fluide réactif et axé sur les mobiles. À mesure que la taille de l'écran ou de la fenêtre d'affichage augmente, le système sera automatiquement divisé en 12 colonnes. Le système de grille est utilisé pour créer des mises en page à travers une série de lignes et de colonnes.

La mise en page réactive de Bootstrap utilise son système de grille et utilise différents attributs de classe pour différents écrans. Pendant le développement, vous ne pouvez écrire qu'un seul ensemble de codes pouvant être utilisé sur les téléphones mobiles, les tablettes et les PC, sans avoir à envisager d'utiliser des requêtes multimédias (écrire différents codes pour différents appareils).

Le principe de mise en œuvre du système de grille est de définir la taille du contenant, de le diviser en 12 parties égales (il peut aussi être divisé en 24 ou 32 parties, mais 12 parties est le plus courant), puis ajustez les marges intérieures et extérieures, et enfin combinez la requête multimédia pour créer un puissant système de grille réactif. Le système de grille du framework Bootstrap divise le conteneur en 12 parties égales.

Comment fonctionne le système de grille Bootstrap :

"Row" doit être contenu dans .container (largeur fixe) ou .container-fluid (100% de largeur) pour pouvoir pour lui donner un alignement et un rembourrage appropriés.

Créez un ensemble de "colonnes" dans le sens horizontal à travers des "lignes".

Votre contenu doit être placé dans "column", et seule "column" peut être un élément enfant direct de la ligne

Similaire à .row Les classes prédéfinies comme .col-xs-4 peuvent le faire. être utilisé pour créer rapidement des dispositions de grille. Les mixins définis dans le code source de Bootstrap peuvent également être utilisés pour créer des dispositions sémantiques en utilisant "column(). column)" définit l'attribut padding pour créer un espace (gouttière) entre les colonnes. une marge de valeur négative pour l'élément .row pour compenser le remplissage défini pour l'élément .container, il s'agit indirectement de "ligne". La "colonne" incluse compense le remplissage. La valeur négative de

est la raison pour laquelle le contenu dans. l'exemple suivant est aligné.

Les colonnes du système raster sont représentées par la plage qu'elles couvrent. Par exemple, trois colonnes de largeur égale peuvent être créées en utilisant trois .col-xs-4 >Si une "ligne" contient. plus de 12 "colonnes", les éléments des "colonnes" supplémentaires seront disposés dans leur ensemble sur une autre ligne

Les classes de grille s'appliquent aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt. et les classes de grille sont remplacées pour les appareils à petit écran. Par conséquent, toutes les classes de grille .col-md-* appliquées sur un élément s'appliquent aux appareils dont la largeur d'écran est supérieure ou égale à la taille du point d'arrêt et remplacent la classe de grille pour. Appareils à petit écran. Par conséquent, l'application de n'importe quel .col-lg-* sur l'élément n'affecte pas également les appareils à grand écran

Recommandé : 🎜>tutoriel vidéo 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!