Perbezaan antara Grid CSS dan Bootstrap

Kebanyakan masa, kami menggunakan Grid CSS apabila kami memerlukan keperluan susun atur yang ketat dan mahu kandungan mengalir pada halaman mengikut keperluan ini.

Sistem grid Bootstrap adalah berdasarkan sistem susun atur CSS Flexbox, dan Grid CSS dipengaruhi oleh id berasaskan cetakan. Bootstrap ialah pesaing langsung kepada CSS Grid, dan perbandingan penting boleh dibuat antara sistem susun atur grid kedua-dua rangka kerja.

Jika kita ingin mengawal reka letak dalam arah baris atau lajur, kita harus menggunakan grid berasaskan Flexbox yang disediakan oleh Bootstrap. Sebaliknya, jika anda ingin mengawal reka letak pada baris dan lajur, Grid CSS harus digunakan sebagai penyelesaian.

Apakah Grid CSS?

Serangkaian garis menegak dan mendatar yang bersilang difahamkan sebagai grid. CSS3 boleh menggunakan susun atur grid untuk membahagikan halaman kepada bahagian yang berbeza.

Harta grid menyediakan sistem susun atur grid berasaskan baris dan lajur. Ia menghapuskan keperluan untuk susun atur elemen dan terapung dalam reka bentuk web. Reka letak grid menyediakan cara untuk mencipta struktur grid menggunakan CSS dan bukannya HTML.

Reka letak Grid CSS amat berkesan untuk membahagikan halaman kepada bahagian utama atau mewujudkan saiz, kedudukan dan perhubungan hierarki antara banyak komponen HTML berdasarkan kawalan primitif.

Sila lihat contoh−

<div class="grid_container">
   <div class="grid_items">01</div>
   <div class="grid_items">02</div>
   <div class="grid_items">03</div>
   <div class="grid_items">04</div>
   <div class="grid_items">05</div>
   <div class="grid_items">06</div>
   <div class="grid_items">07</div>
   <div class="grid_items">08</div>
   <div class="grid_items">09</div>
</div>

Ia berfungsi dengan cara yang serupa dengan jadual kerana ia membolehkan pengguna menyusun item ke dalam baris dan lajur Walau bagaimanapun, berbeza dengan jadual, grid CSS menjadikan reka bentuk reka letak benar-benar mudah Dengan menggunakan atribut grid-template-rows dan grid-template-columns, kami dapat menentukan lajur dan baris yang muncul pada grid.

Apakah itu Bootstrap?

Apabila bercakap tentang mereka bentuk tapak web yang responsif dan mesra pengguna pada peranti mudah alih, rangka kerja HTML, CSS dan JavaScript yang dikenali sebagai Bootstrap adalah pilihan yang paling popular. Ia tidak memerlukan sebarang bayaran untuk memuat turun atau menggunakan alat tersebut rangka kerja hadapan yang menjadikan proses membangunkan tapak web lebih mudah dan cekap.

Ia mengandungi templat reka bentuk berdasarkan HTML dan CSS untuk tipografi, borang, butang, jadual, navigasi, modal, karusel gambar dan banyak lagi perkara lain. Selain itu, ia menyokong pemalam yang ditulis dalam JavaScript. Ia memudahkan anda membina reka bentuk yang responsif.

Apakah itu Bootstrap Grid?

Struktur grid yang Bootstrap gunakan adalah responsif, yang bermaksud lajur tersebut. akan menyusun semula diri mereka berdasarkan saiz skrin − Jika bahan distrukturkan dalam tiga lajur, ia mungkin kelihatan lebih baik pada skrin besar namun, jika elemen kandungan bertimbun di atas satu sama lain, ia mungkin kelihatan lebih baik pada skrin kecil; skrin .

Terdapat empat kelas yang disertakan dalam sistem grid Bootstrap −

• xs (untuk telefon − skrin kurang daripada 768px lebar)

• (untuk 768px eskrin lebih besar daripada 6 tablet esks ✒ ✎ lebar) )

• md (untuk komputer riba kecil − skrin sama dengan atau lebih besar daripada 992px lebar)

• lg (untuk komputer riba dan desktop − px lebar 1

  sama dengan atau
lebih besar daripada

Lihat yang berikut

Contoh −

<div class="row">
   <div class="col-xs-9 col-md-7">col-xs-9 and col-md-7</div>
   <div class="col-xs-3 col-md-5">col-xs-3 and col-md-5</div>
</div>

<div class="row">
   <div class="col-xs-6 col-md-10">col-xs-6 and col-md-10</div>
   <div class="col-xs-6 col-md-2">col-xs-6 and col-md-2</div>
</div>

<div class="row">
   <div class="col-xs-6">col-xs-6</div>
   <div class="col-xs-6">col-xs-6</div>
</div>

• Untuk penjajaran dan pelapik yang betul, baris mesti terkandung dalam ".bekas" (lebar tetap) atau ".bendalir bekas" (lebar penuh).

• Buat kumpulan lajur mendatar dengan menggunakan baris.

• Hanya lajur boleh bersifat sementara, kandungan hendaklah diletakkan di dalam lajur.

• Anda boleh membuat reka letak grid dengan cepat menggunakan kelas yang dipratentukan seperti ".row" dan ".col-sm-4".

• Peladam antara lajur mewujudkan jurang (ruang antara lajur). Gunakan margin negatif pada ".rows" untuk mengimbangi pelapik lajur pertama dan terakhir.

• Buat lajur grid dengan menentukan bilangan lajur untuk rentang (12 pilihan tersedia). Sebagai contoh, tiga lajur yang sama lebar boleh diwakili oleh tiga ".col-sm-4".

• Memandangkan lebar lajur dinyatakan dalam peratusan, ia sentiasa fleksibel dan berkadar dengan elemen induknya.

Perbezaan antara CSS Grid dan Bootstrap

Jadual di bawah menyerlahkan perbezaan utama antara CSS Grid dan Bootstrap -

Untuk membina reka letak, anda memerlukan teg div untuk setiap baris dan mentakrifkan hierarki kelas dalam setiap elemen div. Ini menjadikan kod lebih panjang. Kesimpulan Menggunakan Bootstrap memerlukan menulis lebih banyak HTML, manakala menggunakan Grid CSS memerlukan penulisan lebih banyak CSS. Bergantung pada keperluan reka bentuk, menggunakan Bootstrap mungkin bukan pilihan. Untuk susun atur yang lebih ringkas, Bootstrap ialah pilihan mudah yang boleh membantu anda bermula dalam masa yang munasabah. Ingat, Bootstrap adalah lebih daripada sekadar sistem grid; ia ialah kit alat bahagian hadapan yang komprehensif bagi kelas pratakrif untuk modal, petua alat, tetingkap timbul, bar kemajuan dan banyak lagi tunggu. Untuk mendapatkan hasil yang sama menggunakan Grid CSS, anda perlu menulis fail menggunakan JS atau JQuery.

Asas 🎜🎜#	Menanda	Ia mempunyai tanda yang lebih jelas dan lebih mudah dibaca. Susun atur grid tidak dilakukan dalam HTML, tetapi dalam CSS.
Responsif	Walaupun HTML tidak berubah, cuma tambahkan pelbagai pertanyaan media dan huraikan susun atur grid setiap elemen HTML .	Menggunakan hierarki kelas yang ditetapkan, anda boleh mereka bentuk reka letak kawasan kandungan secara bebas untuk pelbagai saiz peranti. Walau bagaimanapun, apabila bilangan kelas bertambah, pelabelan menjadi lebih rumit.
Kelajuan memuatkan halaman	disokong kuat oleh sebahagian besar penyemak imbas dan versi. Tidak perlu memuat turun apa-apa dan laman web dimuatkan dengan lebih cepat.	Disebabkan keperluan untuk memuat turun fail yang dilampirkan pada helaian gaya, laman web dimuatkan dengan perlahan.
Had Lajur	Ia menyediakan reka letak yang fleksibel tanpa had bilangan lajur. Jadi tidak sukar untuk mempunyai sebarang bilangan lajur.	Memandangkan grid dibahagikan kepada 12 lajur, susun atur yang tidak berjumlah 12 tidak boleh dilaksanakan.

Atas ialah kandungan terperinci Perbezaan antara Grid CSS dan Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!