Comment implémenter le bootstrap adaptatif

Adaptatif : quelle que soit la taille de l'écran, essayez de ne pas envelopper les lignes, mais simplement de les mettre à l'échelle horizontalement.

Le mode « clôture » du Boostrap (apprentissage recommandé : Tutoriel vidéo Bootstrap)

Boostrap adaptatif La base de la fonction 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 la taille d'affichage de chaque élément, qui est le nombre de colonnes requis. S'il dépasse la plage, il changera automatiquement de carrière. La taille de chaque colonne est automatiquement allouée uniformément par Boostrap en fonction de la taille du navigateur actuel.

Fonction adaptative de Boostrap

En fait, après avoir compris le mode clôture, la fonction adaptative est beaucoup plus simple Selon la taille du navigateur, Boosttrap a quatre classes de clôture. noms Fourni pour l'utilisation, l'utilisation est la même que celle de 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 ligne.

sm : col-sm-1 ~ col-sm-12, plusieurs colonnes ne peuvent être sur une seule ligne lorsque la largeur des 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 de l'appareil est supérieure à 992, il sera présenté en mode 1:1:10.

Bien sûr, vous pouvez également utiliser les quatre, et la subdivision doit être prudente. 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é.

Quant à la façon dont cela se fait, vous n'avez pas à vous en soucier. Il vous suffit de considérer la conception du style de présentation de votre page Web sur le téléphone mobile ou le style de présentation sur le PC. laissez-le à Boostrap.

Pour des articles plus techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

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!