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

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>

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>

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>

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!