Cara Menggunakan Tekan/Tarik Bootstrap 3 Lajur untuk Mencipta Reka Letak Berbeza untuk Skrin yang Lebih Kecil?

Tolak/Tarik Bootstrap 3 Lajur pada Skrin Yang Lebih Kecil Sahaja

Dalam bidang reka bentuk responsif, adalah wajar untuk mengubah reka letak elemen berdasarkan saiz skrin. Bootstrap 3 menawarkan utiliti tolak dan tarik untuk melaraskan susunan lajur dan kedudukan secara dinamik.

Salah satu kes sedemikian ialah apabila anda ingin mengekalkan susunan lajur yang berbeza pada skrin yang lebih kecil sambil mengekalkan reka letak asal pada desktop yang lebih besar. Pertimbangkan contoh berikut:

Reka Letak Awal:

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

Reka Letak Yang Diingini pada Skrin Yang Lebih Kecil:

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

Penyelesaian:

Untuk mencapai reka letak ini, kita boleh menggunakan pendekatan berikut:

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

Penyelesaian ini mengutamakan reka letak mudah alih dengan menetapkan susunan lajur dan kedudukan untuk lebih kecil skrin. Kemudian, pada desktop yang lebih besar, kami menggunakan utiliti tolak dan tarik untuk menyusun semula lajur ke dalam reka letak desktop yang diingini.

Pendekatan ini membolehkan reka letak yang fleksibel dan responsif yang menyesuaikan diri dengan saiz skrin yang berbeza sambil mengekalkan susunan lajur yang diingini.

Atas ialah kandungan terperinci Cara Menggunakan Tekan/Tarik Bootstrap 3 Lajur untuk Mencipta Reka Letak Berbeza untuk Skrin yang Lebih Kecil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!