Cara susun atur bootstrap

Menggunakan bootstrap untuk susun atur laman web memerlukan sistem grid yang membahagikan halaman ke dalam bekas, baris, dan lajur. Mula -mula tambahkan bekas, kemudian tambahkan baris di dalamnya, tambahkan lajur dalam baris, dan akhirnya tambah kandungan dalam lajur. Fungsi susun atur responsif Bootstrap secara automatik menyesuaikan susun atur mengikut titik putus (XS, SM, MD, LG, XL). Susun atur yang berbeza di bawah saiz skrin yang berbeza boleh dicapai dengan menggunakan kelas responsif.

Panduan susun atur bootstrap

Bagaimana cara menggunakan bootstrap untuk susun atur?

Bootstrap adalah rangka kerja CSS untuk perkembangan pesat laman web dan aplikasi mudah alih yang responsif, mudah alih. Ia menyediakan pelbagai kelas dan komponen yang telah dibina untuk penciptaan susun atur laman web yang mudah.

Struktur susun atur bootstrap

Bootstrap menganjurkan kandungan menggunakan sistem grid yang membahagikan halaman ke dalam baris mendatar dan lajur menegak. Struktur mesh asas adalah seperti berikut:

• Kontena: Mengandungi keseluruhan kandungan halaman.
• Baris: Menentukan baris mendatar yang mengandungi lajur.
• Lajur: Menentukan lebar kandungan dalam baris.

Langkah untuk membuat susun atur

1. Tambah bekas: Buat bekas menggunakan <div class="container"> .<li> <strong>Tambah baris:</strong> Buat baris dalam bekas, menggunakan <code><div class="row"> .<li> <strong>Tambah lajur:</strong> Tambah lajur berturut-turut, menggunakan <code><div class="col-*"> , di mana <code>* menentukan lebar lajur (contohnya, col-6 mewakili lajur yang menyumbang lebar 6/12 berturut-turut).
2. Tetapkan Kandungan: Tambah Kandungan ke lajur.

Susun atur responsif bootstrap

Ciri susun atur responsif Bootstrap membolehkan laman web menyesuaikan secara automatik berdasarkan saiz penyemak imbas atau peranti. Bootstrap menggunakan titik putus untuk menentukan julat saiz skrin dan menyesuaikan susun atur untuk setiap titik putus. Titik putus adalah seperti berikut:

Titik putus	Lebar skrin
xs	≤575px
sm	≥576px
md	≥768px
lg	≥992px
xl	≥1200px

Contoh menggunakan kelas responsif bootstrap

Buat bekas yang dibentangkan untuk tiga lajur pada skrin sederhana dan besar dan lajur tunggal pada skrin kecil:

 <code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-lg-4">列1</div> <div class="col-md-4 col-lg-4">列2</div> <div class="col-md-4 col-lg-4">列3</div> </div> </div></code>