Le bootstrap est-il adaptatif ?

Bootstrap est adaptatif ; adaptatif signifie que, quelle que soit la taille de l'écran, essayez de ne pas envelopper les lignes et de simplement l'adapter horizontalement via le système de clôture ; le système de grille le divise en parties en définissant la taille du conteneur. Pour 12 parties égales, le navigateur est divisé en lignes et colonnes pour réaliser une auto-adaptation.

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 5, ordinateur DELL G3

Le bootstrap est-il adaptatif ?

Bootstrap est adaptatif

Adaptatif signifie que quelle que soit la taille de l'écran, essayez de ne pas envelopper les lignes et de les mettre à l'échelle uniquement horizontalement. Boostrap est adaptatif grâce au « système de clôture ».

Le système de clôture est créé en définissant la taille du conteneur et en le divisant en 12 parties égales, à travers une série de lignes et de colonnes, et combiné avec des requêtes multimédias pour créer un puissant système de grille réactif.

La base de la fonction adaptative de Boosttrap est le mode "clôture", qui divise le navigateur en lignes et colonnes : un total de 12 colonnes, et le nombre de lignes est personnalisé. En fonction des éléments que vous souhaitez afficher, déterminez l'affichage. taille de chaque élément. Si le nombre de colonnes dépasse la plage, les lignes seront automatiquement modifiées. La taille de chaque colonne est automatiquement allouée uniformément par Boostrap en fonction de la taille du navigateur actuel.

Comment ça marche :

Les lignes de données (lignes) doivent être contenues dans .container (largeur fixe) ou .container-fluid (largeur 100%). Afin de lui donner un alignement et un rembourrage appropriés.

Créez un ensemble de colonnes dans le sens horizontal à travers des lignes. À mesure que la taille de l'écran ou de la fenêtre augmente, le système le divisera automatiquement en 12 colonnes maximum. .

Définissez l'attribut padding par colonne (ligne) pour créer l'espace entre les colonnes. Définissez une marge négative par .row pour compenser le remplissage défini par l'élément .container (l'introduction est que les colonnes (colonnes) contenues dans la ligne (ligne) décalent le remplissage, ce qui est la raison de la saillie vers l'extérieur dans les exemples suivants) .

S'il y a plus de 12 colonnes, les colonnes supplémentaires seront placées dans une nouvelle ligne

Fonction adaptative de Boostrap

En fait, après avoir compris le mode clôture, la fonction adaptative sera beaucoup plus simple en fonction de la taille. du navigateur, Boosttrap a quatre noms de classe de clôture Fourni pour l'utilisation, l'utilisation est la même que l'appel de style du sélecteur de nom de classe de feuille de style CSS :

xs : col-xs-1 ~ col-xs-12, plusieurs colonnes sont toujours sur une seule rangée.

sm : col-sm-1 ~ col-sm-12, plusieurs colonnes ne peuvent être sur une seule ligne lorsque la largeur en pixels du navigateur est supérieure ou égale à 768px.

md : col-md-1 ~ col-md-12, plusieurs colonnes ne peuvent être sur une seule ligne lorsque la largeur des pixels du navigateur est supérieure ou égale à 992px.

lg : col-lg-1 ~ col-lg-12, plusieurs colonnes ne peuvent être sur une seule ligne lorsque la largeur des pixels du navigateur est supérieure ou égale à 1200px.

Je poste un morceau de pseudo code :

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

Ce que cela signifie, c'est que lorsque la largeur du navigateur est comprise entre 768 et 992, il sera présenté en mode 4:4:4. Lorsque la largeur du navigateur est supérieure à 992, appuyez sur. Présentation en mode 1:1:10.

Bien sûr, vous pouvez également utiliser les quatre. Attention à la subdivision Dans tous les cas, Boostrap attribuera automatiquement les largeurs de colonnes en fonction de la largeur du navigateur pour correspondre au mode de présentation souhaité.

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!