Maison > interface Web > Tutoriel d'amorçage > Quand utiliser le bootstrap

Quand utiliser le bootstrap

(*-*)浩
Libérer: 2020-05-15 09:22:55
original
3465 Les gens l'ont consulté

Bootstrap est un framework front-end pour le développement rapide d'applications Web et de sites Web. Bootstrap est basé sur HTML, CSS et JAVASCRIPT.

Quand utiliser le bootstrap

Vous pouvez utiliser bootstrap lorsque vous souhaitez que la taille du contenu Web s'adapte automatiquement à la taille de l'écran, c'est-à-dire lorsque le contenu sur PC et différents téléphones mobiles (avec différentes tailles d'affichage) peut être affiché normalement. (Apprentissage recommandé : Tutoriel Bootstrap)

Une ligne peut occuper jusqu'à douze balises, qu'il s'agisse d'un grand écran ou d'un ultra-petit écran.

col-lg est généralement utilisé pour les appareils à grand écran (largeur min : 1 200 px) ;

col-md est généralement utilisé pour les appareils à écran moyen (largeur min : 1 200 px) ; 992px) ;

col-sm est généralement utilisé pour les appareils à petit écran (largeur minimale : 768px) ;

col-xs est utilisé pour les appareils ultra-petits (largeur maximale : ); 768px);

Quel est le nombre suivi de, c'est-à-dire combien de parties il occupe, par exemple 4, ce qui signifie que 3 peut être affiché sur une seule ligne ou 12, ce qui signifie que 1 peut être affiché sur une seule ; doubler.

Concernant l'utilisation, il serait préférable d'utiliser les quatre attributs dans les paramètres généraux, afin qu'ils puissent bien être affichés sur différents écrans.

Par exemple, si vous avez 12 balises de section, vous souhaitez qu'elles soient affichées de différentes manières sur différentes tailles d'écran. Pour les grands écrans, 6 seront affichées sur une seule ligne, pour les écrans moyens, 3 seront affichées. par ligne, et pour les petits écrans, affichez 2 à la suite, et affichez 1 à la suite pour les ultra-petits écrans.

Vous pouvez écrire ceci dans chaque balise de section :

<section class = “col-lg-2 col-md-4 col-sm-6 col-xs-12”></section>
Copier après la connexion

Pour plus d'articles 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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal