Perbahasan Rangka Kerja CSS Grid Vs CSS

mata teras

susun atur grid CSS dan kerangka CSS seperti bootstrap digunakan secara berbeza dalam pembangunan web. Grid CSS membolehkan pemaju untuk membina susun atur halaman yang kompleks menggunakan kod CSS asli, sementara Bootstrap menyediakan komponen yang direka pra-direka untuk membuat laman web dengan cepat dan cekap.
Walaupun CSS mesh menyediakan fleksibiliti dan kemerdekaan, bootstrap tetap relevan dalam pembangunan front-end dengan komponen siap sedia, kemudahan penyesuaian, dan kepraktisan sebagai alat prototaip. Ia amat berguna untuk pemaju laman web warisan yang dibina dengan bootstrap.
Pilihan susun atur grid CSS dan kerangka CSS bergantung kepada keperluan khusus projek. CSS mesh sangat sesuai untuk reka bentuk berasaskan mesh yang kompleks, dan bootstrap menjimatkan masa dan usaha dengan komponen dan gaya yang telah direka pra-direka. Mereka juga boleh digunakan bersama untuk memanfaatkan kedua -dua alat.

Pengekodan susun atur web tidak lagi menyakitkan dengan bantuan standard CSS canggih seperti susun atur grid CSS dan Flexbox. Jika sokongan penyemak imbas untuk Grid dan Flexbox agak baik, maka soalan tidak dapat dielakkan akan timbul: Mengapa saya harus mempertimbangkan untuk belajar dan menggunakan kerangka CSS dalam kerja pembangunan saya?

Dalam artikel ini, saya akan memberi tumpuan kepada Bootstrap, kerana ia boleh dikatakan paling popular dari semua perpustakaan CSS UI yang tersedia.

Pada pendapat saya, walaupun hari ini, masih terdapat banyak sebab untuk belajar dan menggunakan bootstrap.

Berikut adalah beberapa sebab.

Apakah grid CSS?

Rachel Andrew (seorang penceramah dan penulis yang terkenal dalam kaitan grid CSS) mentakrifkannya seperti berikut:

Grid adalah sistem grid. Ia membolehkan anda menentukan lajur dan baris dalam CSS tanpa menentukannya dalam tag. Anda tidak memerlukan alat untuk membantu anda membuatnya kelihatan seperti grid, anda sebenarnya mempunyai grid!

Pelaksanaan standard CSS ini menyediakan pemaju dengan keupayaan yang sangat diperlukan untuk membina susun atur halaman menggunakan kod CSS asli, yang tidak bergantung pada tag HTML kecuali sebagai elemen pembungkus yang mengandungi grid. Bayangkan potensi fleksibiliti dan kreativiti dalam reka bentuk web!

Contohnya, anda tidak memerlukan kelas tersuai atau garis tambahan dalam tag untuk membina susun atur mudah ini:

kod html adalah seperti berikut:

Bagi CSS, anda akan membina susun atur visual anda di sini. Dalam contoh mudah ini, hanya beberapa baris kod yang diperlukan:

<div class="grid">
  <header>页眉内容</header>
  <main>主要内容</main>
  <aside>侧边栏</aside>
  <footer>页脚</footer>
</div>

itu sahaja, anda sudah selesai! tidak teruk.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 150px 50px;
}

header, footer {
  grid-column: span 12;
}

main {
  grid-column: span 8;
}

aside {
  grid-column: span 4;
}

Apakah bootstrap?

Pada masa penulisan, 3.6% daripada keseluruhan internet menggunakan bootstrap:

Di laman web Bootstrap, anda akan dapati definisi berikut:

Bootstrap adalah toolkit sumber terbuka yang dibangunkan menggunakan HTML, CSS, dan JS. Gunakan pembolehubah dan campuran SASS kami, sistem mesh responsif, sejumlah besar komponen pra-bina, dan pemalam berasaskan jQuery yang kuat untuk cepat prototaip idea anda atau membina keseluruhan aplikasi anda.

Dengan kata lain, Bootstrap menyediakan komponen siap sedia yang membolehkan anda membuat laman web yang indah dalam masa yang singkat.

Hanya tulis tag yang sepadan dan aplikasi anda akan kelihatan hebat dengan segera.

Bootstrap juga menjadikannya sangat mudah untuk menyesuaikan penampilan dan gaya dan membolehkan anda memilih dan memilih komponen yang anda inginkan untuk projek anda.

Mengapa anda masih perlu menggunakan bootstrap apabila anda mempunyai grid?

Aduan terbesar mengenai Bootstrap selalu menjadi kambing. Alasannya ialah ia mengandungi kod CSS tambahan yang tidak digunakan dalam banyak projek. Aduan kedua terbesar adalah bahawa gaya komponen bootstrap sangat terperinci, yang boleh menyebabkan beberapa masalah ketika menimpa peraturan CSS tertentu.

Berdasarkan versi terkini perpustakaan komponen depan yang popular ini, kritikan ini tidak boleh dipertahankan: Bootstrap adalah benar-benar modular, jadi anda hanya perlu memasukkan bahagian yang anda perlukan. Di samping itu, struktur fail SASS menjadikannya sangat mudah untuk menyesuaikan gaya asal yang sesuai dengan keperluan anda.

Sebab utama untuk menentang bootstrap ialah menggunakan css mesh, CSS mempunyai sistem mesh sendiri, yang tidak mempunyai sebarang kebergantungan luaran, dan sekali belajar, ia membolehkan pemaju dengan mudah membina pelbagai susun atur.

Walaupun saya peminat grid CSS, saya fikir Bootstrap masih mempunyai tempat dalam pembangunan front-end dan masih akan menjadi masa yang akan datang.

Berikut adalah sekurang -kurangnya tiga sebab.

bootstrap bukan sekadar sistem grid

Ya, sebab utama untuk menggunakan bootstrap adalah sistem grid yang mudah, yang menjadikan bangunan laman web responsif menjadi angin. Walau bagaimanapun, Bootstrap juga mempunyai beberapa komponen yang hebat, seperti komponen kad baru yang serba boleh, yang boleh anda gunakan untuk memaparkan pelbagai jenis kandungan seperti teks, imej, dan video, dan bar navigasi responsif keluar dari kotak. Anda juga boleh memilih skema warna pratetap pilihan anda untuk kebanyakan komponen.

bagaimana dengan banyak komponen ini? Menggunakan bootstrap, menambah tooltip, karusel, atau butang drop-down dinamik hanya menulis markup yang sepadan. Jika kemahiran JavaScript anda bukanlah titik kuat anda, anda masih boleh memanfaatkan komponen ini tanpa menulis satu baris kod JavaScript.

Di samping itu, jika anda bukan pakar CSS, anda masih boleh menggunakan kuasa bootstrap untuk reka bentuk web semasa mempelajari teknik.

bootstrap adalah alat prototaip yang hebat

Kadang -kadang anda hanya perlu menyediakan pelanggan dengan prototaip yang tersedia. Bootstrap membolehkan anda melakukan ini dengan serta -merta, dan memerlukan sedikit kod tersuai. Ini bukan sahaja terpakai kepada sistem grid, tetapi juga kepada semua komponen luar yang disediakannya.

Hanya tambahkan sedikit tanda dan prototaip anda akan mempunyai bar navigasi responsif yang bergaya atau kotak penggera yang bagus.

memproses laman web warisan yang dibina dengan bootstrap

Tugas yang sama untuk pemaju adalah untuk menangani laman web sedia ada yang ditulis oleh pemaju lain. Tidak dapat dinafikan bahawa sebilangan besar laman web bergantung pada bootstrap untuk membina bahagian depan mereka. Jika anda perlu refactor dan mengekalkan asas kod, ia akan menjadi sangat mudah untuk mengetahui cara menggunakan rangka kerja. Ia bukan secara kebetulan bahawa banyak maklumat pekerjaan termasuk bootstrap dalam senarai kemahiran yang diperlukan.

Kesimpulan

semua dalam semua, bootstrap tidak akan hilang dalam jangka pendek. Versi terkini telah diperbaiki dari versi terdahulu, dari Cleverly menggunakan Sass Mixin dan pemetaan untuk penyesuaian mudah, untuk pengenalan komponen baru, kelas utiliti dan lebih banyak arkitek modular.

digabungkan dengan dokumentasi yang sangat baik dan kemudahan penggunaan, Bootstrap tetap menjadi pesaing yang kuat dalam ekosistem depan.

apa pendapat anda? Adakah projek seterusnya anda akan dibina menggunakan bootstrap atau grid CSS?

Jika anda telah mendengar tentang Bootstrap tetapi telah melambatkan pembelajarannya kerana ia kelihatan terlalu rumit, maka pelajari kursus pengantar Bootstrap 4 kami dengan cepat dan mudah belajar tentang kuasa Bootstrap.

FAQs Mengenai susun atur grid CSS dan kerangka CSS

Apakah perbezaan utama antara susun atur grid CSS dan kerangka CSS?

susun atur grid CSS dan kerangka CSS seperti bootstrap adalah alat reka bentuk web yang kuat, tetapi mereka mempunyai tujuan yang berbeza. Susun atur Grid CSS adalah modul CSS yang membolehkan anda membuat susun atur web yang kompleks menggunakan baris dan lajur. Ia adalah ciri asli CSS, yang bermaksud ia tidak memerlukan perpustakaan atau plugin tambahan untuk berfungsi. Sebaliknya, rangka kerja CSS adalah perpustakaan yang telah disediakan untuk mempermudah proses reka bentuk web. Mereka datang dengan komponen yang direka sebelum ini seperti butang, bentuk dan bar navigasi yang boleh disesuaikan dan digunakan semula dengan mudah.

Adakah susun atur grid CSS lebih baik daripada kerangka CSS?

Sama ada susun atur grid CSS adalah "lebih baik" daripada kerangka CSS bergantung kepada keperluan khusus projek. Susun atur grid CSS menyediakan lebih banyak fleksibiliti dan kawalan ke atas susun atur web, menjadikannya pilihan yang sangat baik untuk reka bentuk berasaskan grid kompleks. Walau bagaimanapun, kerangka CSS seperti Bootstrap dapat menjimatkan masa dan usaha anda dengan menyediakan komponen dan gaya yang direka pra-direka. Jika anda sedang menjalankan projek besar atau perlu memulakan laman web dengan cepat, rangka kerja CSS mungkin menjadi pilihan yang lebih baik.

susun atur grid CSS dan kerangka CSS boleh digunakan bersama?

Ya, susun atur grid CSS dan kerangka CSS boleh digunakan bersama -sama. Malah, banyak pemaju menggunakan susun atur grid CSS untuk membuat susun atur keseluruhan laman web, dan kemudian menggunakan rangka kerja CSS untuk membuat komponen individu di halaman ini. Pendekatan ini membolehkan anda memanfaatkan kedua -dua alat.

Apakah beberapa alternatif untuk susun atur grid CSS dan kerangka CSS?

Terdapat banyak alternatif untuk susun atur grid CSS dan kerangka CSS. Beberapa alternatif yang popular untuk susun atur grid CSS termasuk susun atur Flexbox dan CSS pelbagai kolumn. Ini juga modul CSS asli yang membolehkan penciptaan susun atur fleksibel. Beberapa alternatif yang popular untuk kerangka CSS termasuk Yayasan, Bulma, dan Tailwind CSS. Ini adalah rangka kerja CSS lain yang menawarkan fungsi dan gaya yang berbeza.

Bagaimana memilih antara susun atur grid CSS dan kerangka CSS?

Apabila memilih antara susun atur grid CSS dan kerangka CSS, pertimbangkan keperluan projek dan kemahiran dan keutamaan anda sebagai pemaju. Jika anda memerlukan banyak kawalan ke atas susun atur dan lebih suka menggunakan CSS, anda mungkin lebih suka susun atur grid CSS. Jika anda lebih suka menggunakan komponen yang telah direka sebelum dan ingin melancarkan laman web dengan cepat, rangka kerja CSS mungkin menjadi pilihan yang lebih baik.

Adakah bootstrap rangka kerja CSS?

Ya, bootstrap adalah kerangka CSS. Ia adalah salah satu rangka kerja CSS yang paling popular yang terdapat hari ini, yang terkenal dengan reka bentuk responsif, komponen yang direka sebelum ini dan pelbagai dokumentasi.

Apakah beberapa kelebihan menggunakan susun atur grid CSS?

susun atur grid CSS menawarkan beberapa kelebihan. Ia membolehkan untuk membuat susun atur kompleks dengan baris dan lajur, ia adalah ciri asli CSS, yang bermaksud ia tidak memerlukan perpustakaan atau plugin tambahan, dan ia menyediakan banyak fleksibiliti dan kawalan ke atas susun atur web.

Apakah beberapa kelebihan menggunakan kerangka CSS?

rangka kerja CSS menyediakan beberapa kelebihan. Mereka boleh menjimatkan masa dan usaha anda dengan menyediakan komponen dan gaya yang direka bentuk, mereka sering didokumentasikan dan disokong oleh komuniti pemaju, dan mereka dapat membantu memastikan laman web anda responsif dan pada semua peranti.

Bagaimana untuk memulakan dengan susun atur grid CSS?

Untuk memulakan susun atur grid CSS, anda perlu memahami asas -asas HTML dan CSS. Dari sana, anda boleh mengetahui lebih lanjut mengenai susun atur grid CSS melalui tutorial, dokumentasi, dan amalan dalam talian.

Bagaimana untuk memulakan dengan kerangka CSS?

Untuk memulakan rangka kerja CSS, anda juga perlu memahami asas -asas HTML dan CSS. Dari sana, anda boleh memilih rangka kerja CSS yang sesuai dengan keperluan anda, memuat turunnya, dan mula meneroka dokumentasi dan ciri -cirinya.

Atas ialah kandungan terperinci Perbahasan Rangka Kerja CSS Grid Vs CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!