Bagaimanakah nombor dalam notasi grid Bootstrap (col-md-4, col-xs-1, col-lg-2) mentakrifkan lebar dan penjajaran elemen?

Memahami Notasi Grid dalam Bootstrap: col-md-4, col-xs-1, col-lg-2

Bootstrap yang baharu sistem grid menggunakan tatatanda yang mudah tetapi berkesan untuk mengawal susun atur elemen: col--, di mana asterisk (*) mewakili nombor. Notasi ini bukan sahaja mentakrifkan lebar elemen tetapi juga penjajaran mereka pada saiz skrin yang berbeza.

Cara Nombor Mentakrifkan Penjajaran Grid

Nombor dalam kelas grid (col- xs-1, col-lg-2, dsb.) menentukan bilangan "lajur" sesuatu elemen akan diduduki dalam grid. Bootstrap membahagikan ruang yang tersedia kepada 12 lajur yang sama, jadi kelas col-md-4 menentukan bahawa elemen harus menjangkau 4 daripada 12 lajur tersebut.

Cara Menggunakan Nombor

Untuk menggunakan nombor ini, cuma tambah kelas grid pada elemen yang diingini. Sebagai contoh, untuk membuat lajur yang merangkumi 4 lajur pada skrin sederhana (md), anda akan menggunakan kelas col-md-4. Untuk kawalan yang lebih halus, anda boleh menentukan nombor yang berbeza untuk saiz skrin yang berbeza, seperti col-xs-1 col-md-4, yang akan menjadikan elemen itu menduduki 1 lajur pada skrin lebih kecil (xs) dan 4 lajur pada skrin sederhana (md ).

Apa yang Diwakili oleh Nombor

Nombor dalam kelas grid mewakili lebar sesuatu elemen berbanding dengan ruang yang ada. Sebagai contoh, col-xs-1 bermakna elemen akan mengambil 1/12 daripada lebar yang tersedia pada skrin lebih kecil. Begitu juga, col-lg-2 bermaksud elemen akan menduduki 2/12 daripada lebar yang tersedia pada skrin besar.

Keutamaan Kelas Grid

Adalah penting untuk ambil perhatian bahawa grid kelas untuk saiz skrin tertentu digunakan bukan sahaja untuk saiz itu tetapi juga untuk saiz skrin yang lebih besar. Contohnya, kelas col-xs-6 terpakai pada semua skrin daripada kecil hingga besar. Walau bagaimanapun, jika anda menentukan kelas grid untuk saiz skrin yang lebih besar, ia akan mengatasi kelas grid untuk saiz skrin yang lebih kecil.

Kesimpulan

Memahami maksud nombor dalam kelas col-md-4, col-xs-1, dan col-lg-2 adalah penting untuk mengurus reka letak elemen dalam Bootstrap dengan berkesan. Dengan memanfaatkan kelas ini, anda boleh membuat reka bentuk web yang responsif dan boleh disesuaikan yang melaraskan dengan lancar kepada saiz skrin yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah nombor dalam notasi grid Bootstrap (col-md-4, col-xs-1, col-lg-2) mentakrifkan lebar dan penjajaran elemen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!