Maison > interface Web > tutoriel CSS > le corps du texte

Comment utiliser les colonnes Push/Pull Bootstrap 3 pour créer différentes mises en page pour des écrans plus petits ?

DDD
Libérer: 2024-10-30 17:32:31
original
333 Les gens l'ont consulté

How to Use Push/Pull Bootstrap 3 Columns to Create Different Layouts for Smaller Screens?

Push/Pull Bootstrap 3 colonnes sur des écrans plus petits uniquement

Dans le domaine du responsive design, il peut être souhaitable de modifier la disposition des éléments en fonction de la taille de l’écran. Bootstrap 3 propose des utilitaires push et pull pour ajuster dynamiquement l'ordre et la position des colonnes.

Un tel cas est celui où vous souhaitez conserver une disposition différente des colonnes sur des écrans plus petits tout en préservant la disposition d'origine sur des bureaux plus grands. Prenons l'exemple suivant :

Mise en page initiale :

<code class="html"><div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div></code>
Copier après la connexion

Mise en page souhaitée sur des écrans plus petits :

<code class="html"><div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div></code>
Copier après la connexion

Solution :

Pour réaliser cette mise en page, nous pouvons utiliser l'approche suivante :

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>
Copier après la connexion

Cette solution donne la priorité à la mise en page mobile en définissant l'ordre et les positions des colonnes pour les plus petites écrans. Ensuite, sur des bureaux plus grands, nous appliquons des utilitaires push et pull pour réorganiser les colonnes dans la disposition de bureau souhaitée.

Cette approche permet des mises en page flexibles et réactives qui s'adaptent à différentes tailles d'écran tout en conservant la disposition des colonnes souhaitée.

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!

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
À 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!