Apakah sistem 12 grid bootstrap?

Dalam bootstrap, sistem 12-grid merujuk kepada membahagikan reka letak halaman kepada 1 hingga 12 lajur yang sama lebar, mentakrifkan lebar lajur melalui pengiraan perkadaran dan mentakrifkan reka letak halaman modular melalui bilangan lajur , ialah sistem grid yang responsif dan mengutamakan mudah alih.

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3

Apakah itu 12-grid sistem bootstrap

Bootstrap menyediakan sistem grid bendalir yang diutamakan mudah alih yang responsif yang akan dibahagikan secara automatik kepada sehingga 12 lajur apabila saiz skrin atau port pandangan meningkat.

Apakah Grid?

Dalam reka bentuk grafik, grid ialah struktur (biasanya dua dimensi) yang terdiri daripada satu siri garis lurus bersilang (menegak, mendatar) yang digunakan untuk menyusun kandungan. Ia digunakan secara meluas untuk susun atur reka bentuk dan struktur kandungan dalam reka bentuk cetakan. Dalam reka bentuk web, ia adalah kaedah untuk mencipta susun atur yang konsisten dengan cepat dan menggunakan HTML dan CSS dengan berkesan.

Ringkasnya, grid dalam reka bentuk web digunakan untuk menyusun kandungan, menjadikan tapak web mudah dinavigasi dan mengurangkan beban pada pengguna.

Apakah itu Sistem Grid Bootstrap?

Bootstrap termasuk sistem grid cecair responsif, diutamakan mudah alih yang menskalakan sehingga 12 lajur dengan sewajarnya apabila peranti atau saiz port pandangan meningkat. Ia mengandungi kelas yang dipratentukan untuk pilihan susun atur mudah, serta kelas campuran yang berkuasa untuk menjana lebih banyak susun atur semantik.

Sistem grid merujuk kepada membahagikan reka letak halaman kepada lajur yang sama lebar, dan kemudian memodulasi reka letak halaman dengan menentukan bilangan lajur. Sistem grid Bootstrap menggunakan corak lajur 1-12 dan menggunakan pengiraan berkadar untuk menetapkan lebar lajur yang anda tentukan.

Sebagai contoh, jika anda ingin menggunakan mod reka letak dua lajur untuk baris ini, maka lebar setiap lajur ialah 50% daripada bekas luar Tidak kira apa peranti yang anda gunakan untuk menyemak imbas, ia akan menjadi dipaparkan dalam perkadaran ini. Walau bagaimanapun, jika lebar peranti lebih kecil daripada lebar minimum yang anda tetapkan, kedua-dua lajur akan menjadi satu lajur bersebelahan.

Sistem grid Bootstrap

Menggunakan sistem grid dalam Bootstrap adalah sangat mudah dan mudah, cuma perkenalkan kelas mereka yang telah ditetapkan ke dalam div anda.

Mari kita lihat dahulu beberapa kelas grid yang boleh digunakan dalam Bootstrap:

1 .col-xs-* Ini ialah kelas skrin ultra-kecil (

2.col-sm-* Ini ialah kelas peranti skrin kecil (≥768px dan

3.col-md-* Ini ialah kelas peranti sederhana (≥992px dan

4. col-lg-* Ini ialah kelas peranti yang besar (≥1200px).

Cadangan berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Apakah sistem 12 grid bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!