Bootstrap dan Yayasan adalah dua kerangka depan kegemaran saya, terutama untuk prototaip laman web yang cepat. Kedua-duanya datang dengan komponen siap sedia yang mempercepat aliran kerja saya. Di luar perbezaan kecil mereka, kebanyakan ciri asas mereka kelihatan serupa dengan saya.

Dalam artikel ini, saya akan merangkumi asas -asas grid mereka. Pertama, saya akan menunjukkan kepada anda bagaimana mereka berstruktur, menggambarkan komponen utama mereka, dan bagaimana mereka membezakan bergantung pada saiz skrin. Kemudian, saya akan meneruskan contoh sebenar yang akan membantu anda meletakkan pengetahuan yang diperoleh.

mari kita mulakan!

Kunci Takeaways

Kedua-dua bootstrap dan asas adalah kerangka depan yang popular dengan ciri-ciri asas yang sama, tetapi mereka berbeza dalam struktur grid dan pilihan penyesuaian mereka.
Bootstrap Menentukan empat titik putus pertanyaan media berasaskan piksel untuk susun atur responsif, sementara Yayasan termasuk lima pertanyaan media berasaskan EM. Kedua-dua rangka kerja menawarkan grid 12-kolumn pertama yang terdiri daripada baris dan lajur.
Grid Bootstrap memerlukan elemen pembalut untuk baris, yang sepatutnya mempunyai kelas sama ada bekas atau cfluid. Grid Yayasan, sebaliknya, sedikit lebih mudah dan tidak memerlukan elemen pembalut.
Yayasan menyokong ciri grid tambahan yang dipanggil grid blok, yang membolehkan penciptaan lajur bersaiz sama dengan markup minimum. Bootstrap tidak menawarkan ciri yang serupa.

Membandingkan pertanyaan media

Sebelum menganalisis struktur grid Bootstrap dan Yayasan, mari kita lihat terlebih dahulu pada titik putus yang kedua -duanya menawarkan susun atur responsif. Ini digunakan untuk menetapkan bilangan grid yang ada yang ditawarkan setiap kerangka.

Bootstrap Menentukan empat titik putus pertanyaan media berasaskan piksel. Jadual di bawah menunjukkan kepada mereka:

skrin saiz viewport lebar kontena awalan kelas Skrin kecil tambahan Yayasan termasuk lima pertanyaan media berasaskan EM. Ini ditunjukkan dalam jadual berikut:

skrin saiz viewport awalan kelas (grid lalai) awalan kelas (grid blok) Skrin kecil ≤ 40EM (640px) .small-* .column (s) .small-block-grid-* Skrin sederhana ≥ 40.063EM (641px) .medium-* .column (s) .medium-block-grid-* Skrin besar ≥ 64.063EM (1025px) .large-* .column (s) .Large-block-grid-* Skrin Xlarge ≥ 90.063EM (1441px) Tidak diaktifkan Tidak diaktifkan Skrin xxlarge ≥ 120.063EM (1921px) Tidak diaktifkan Tidak diaktifkan Untuk memberi anda idea bagaimana pertanyaan media ini berfungsi, saya cadangkan anda melihat demo bootstrap dan demo asas yang berkaitan. Tetapi jika anda masih sedikit keliru, bahagian yang akan datang akan menjelaskan perkara.

NOTA: Grid Yayasan untuk XLarge dan XXLarge Screens secara lalai dinyahaktifkan. Jika anda ingin menggunakannya, anda perlu "Uncomment" dan menetapkan nilai-nilai-XL-HTML-grid-kelas dan $ termasuk-XL-HTML-block-grid-classes variables to True. Anda boleh menemui pembolehubah tersebut dalam separa _settings.scss.

struktur grid

Bootstrap dan Yayasan masing-masing menawarkan grid 12-lajur pertama yang terdiri daripada baris dan lajur. Lajur bersarang di dalam baris. Mereka skala sehingga 12 untuk setiap baris. Barisan boleh bersarang di dalam lajur juga.

Kedua -dua rangka kerja dilengkapi dengan banyak kelas yang telah ditetapkan yang boleh anda gunakan untuk menetapkan saiz lajur anda. Seperti yang disebutkan di atas, Bootstrap termasuk empat titik break dan asas pertanyaan media mempunyai lima. Untuk setiap grid, terdapat awalan kelas yang berbeza yang boleh digunakan untuk menetapkan saiz lajur (lihat dua jadual).

Grid Bootstrap juga memerlukan elemen pembalut untuk baris. Ini sepatutnya mempunyai kelas sama ada bekas atau cemas. Unsur dengan kelas kontena mempunyai lebar tetap, yang berbeza-beza bergantung pada viewport (lihat jadual pertama di atas), manakala elemen dengan kelas cecair kontena berkembang untuk mengisi seluruh lebar tetingkap penyemak imbas.

lajur! = 12?

Mungkin bilangan lajur dalam grid tidak betul -betul 12. Dalam kes sedemikian, bootstrap akan mengapung lajur terakhir ke kiri, sementara Yayasan akan mengapungnya ke kanan. Jika anda ingin mengatasi tingkah laku lalai Yayasan, tambahkan kelas akhir ke lajur terakhir.

Untuk melihat perbezaan tindakan ini, anda boleh melihat contoh bootstrap dan contoh asas.

Kelas Utiliti

kedua -dua kerangka menawarkan kelas tambahan yang memberi anda fleksibiliti yang hebat untuk menyesuaikan grid mereka.

Kelas penglihatan membolehkan anda menunjukkan atau menyembunyikan kandungan berdasarkan saiz skrin tertentu. Kelas mengimbangi membolehkan anda memusatkan lajur yang tidak lengkap atau menyesuaikan jumlah jarak di antara mereka. Terdapat juga kelas yang menentukan urutan lajur di seluruh peranti yang berbeza.

Contoh semua kelas yang berbeza ini boleh ditunjukkan dalam demo bootstrap ini dan demo asas ini.

blok grid

Di luar grid lalai, Yayasan menyokong ciri grid lain, yang dipanggil Blok Grid. Ini membolehkan anda membuat lajur bersaiz yang sama dengan markup minimum. Untuk menggunakannya, tentukan baris sebagai elemen UL dan lajur di dalamnya sebagai elemen li. Kemudian tentukan saiz lajur dengan menggunakan kelas yang berkaitan (lihat jadual ke -2 di atas) ke elemen UL.

Pada ketika ini anda mungkin berfikir, apakah perbezaan antara grid biasa dan grid blok? Mari kita lihat dua daripadanya:

1. Tidak seperti grid lalai, yang menggunakan lebar maksimum untuk setiap baris, grid blok selalu mengisi lebar tetingkap penuh.
2. Grid blok hanya boleh digunakan untuk item bersaiz yang sama.

lebih baik menunjukkan bagaimana grid membezakan, inilah demo.

menggunakan grid

Sekarang kita mempunyai pemahaman yang baik tentang grid kedua -dua rangka kerja ini, mari kita lihat bagaimana kita boleh menggunakannya untuk membina halaman bootstrap dan halaman asas yang sepadan.

tangkapan skrin di bawah menunjukkan susun atur pertama yang akan kita bina:

Bermula dengan bootstrap, kami menentukan elemen dengan kelas bekas. Seperti yang dibincangkan sebelum ini, kelas ini menetapkan lebar tetap ke elemen dengan nilai bergantung pada saiz skrin (lihat jadual Bootstrap). Kemudian, kami menambah elemen dengan kelas baris kepadanya.

Sekarang, kami sudah bersedia untuk menubuhkan lajur kami. Untuk skrin besar, kami mahu empat lajur bersaiz sama. Jadi kita menentukan empat elemen Div masing-masing dengan kelas Col-LG-3. Walau bagaimanapun, untuk peranti kecil dan sederhana kami lebih suka mempunyai dua lajur setiap baris. Atas sebab ini, kami menggunakan kelas Col-SM-6. Akhirnya, untuk peranti tambahan kecil kami mahu lajur disusun. Ini adalah tingkah laku lalai kerangka mudah alih pertama, dan oleh itu, tidak perlu menentukan kelas Col-XS-12.

Inilah caranya HTML kelihatan:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

mari kita teruskan dengan asas.

Grid Yayasan sangat mirip dengan Bootstrap, tetapi ia sedikit lebih mudah. Pertama, kita perlu menentukan elemen dengan kelas baris yang akan mengandungi lajur kita. Kelas ini menetapkan unsur max-width kepada 62.5rems (1000px). Seterusnya, kami menambah lajur. Untuk mencapai matlamat ini, kami menentukan elemen div masing -masing dengan kelas lajur atau lajur, dan menetapkan lebar mereka menggunakan kelas grid yang sepadan (lihat jadual Yayasan di atas). Sekali lagi, untuk peranti kecil kita tidak perlu menentukan kelas kecil-12.

Berikut adalah HTML berdasarkan grid Yayasan:

<span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="medium-6 large-3 columns"</span>></span>
</span>        <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Pada ketika ini saya harap anda telah mula menjadi lebih akrab dengan sistem grid dua kerangka. Tetapi mungkin satu lagi contoh akan membantu menjadikannya lebih jelas.

Dalam kes seterusnya, kami akan menyusun footer. Perwakilan grafik berikut menunjukkan bagaimana kita mahu menggayakannya:

di sini kita akan memilih mod susun atur yang berbeza berbanding dengan contoh sebelumnya.

Untuk saiz skrin sederhana dan ke atas (atau kecil dan naik untuk grid Bootstrap), kami mahu memaparkan tiga lajur. Walau bagaimanapun, perhatikan bahawa terdapat baris bersarang di lajur terakhir. Ini terdiri daripada dua lajur. Kami akan menetapkan lebar mereka menjadi 50% daripada lebar baris untuk semua peranti. Akhirnya, kami akan menyesuaikan penglihatan ikon yang muncul dalam lajur bersarang.

inilah kod untuk bootstrap:

dan dengan asas:

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><div</span> class<span>="row"</span>></span>
</span>    <span><span><span><div</span> class<span>="col-sm-4"</span>></span>
</span>      <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="col-sm-4"</span>></span>
</span>      <span><!-- content -->
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="col-sm-4"</span>></span>
</span>      <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-xs-6"</span>></span>
</span>          <span><span><span><a</span> href<span>="#"</span>></span>
</span>            <span><span><span><p</span>></span>Let's meet and discuss<span><span></p</span>></span>
</span>            <span><span><span><i</span> class<span>="fa fa-map-marker fa-2x visible-lg"</span>></span><span><span></i</span>></span>
</span>          <span><span><span></a</span>></span>
</span>        <span><span><span></div</span>></span><!-- .col-xs-6 -->
</span>        <span><span><span><div</span> class<span>="col-xs-6"</span>></span>
</span>          <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>      <span><span><span></div</span>></span><!-- .row -->
</span>    <span><span><span></div</span>></span><!-- .col-sm-4 -->
</span>  <span><span><span></div</span>></span><!-- .row -->
</span><span><span><span></div</span>></span><!-- .container --></span>

<span><span><span><div</span> class<span>="container"</span>></span>
</span>    <span><span><span><div</span> class<span>="row"</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>        <span><span><span><div</span> class<span>="col-sm-6 col-lg-3"</span>></span>
</span>            <span><!-- content -->
</span>        <span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span><span><span><span></div</span>></span></span>

Nota: Daripada grid blok, kita boleh menggunakan grid lalai asas untuk membuat baris bersarang.

Kesimpulan

Jika anda mahukan lebih banyak maklumat mengenai sistem grid Bootstrap, anda mungkin juga ingin membaca artikel Syed Fazle Rahman Memahami Sistem Grid Bootstrap.

untuk menyimpulkan, dalam artikel ini, saya memperkenalkan struktur grid kedua -dua bootstrap dan asas. Kemudian kami melihat bagaimana untuk memanfaatkan grid mereka dalam projek sebenar. Seperti yang anda lihat, kedua -dua grid kelihatan serupa dan boleh disesuaikan lagi.

Saya harap anda suka membaca artikel ini dan mungkin anda boleh menggunakan apa yang anda pelajari di sini untuk projek anda sendiri. Seperti biasa, jangan ragu untuk berkongsi pendapat anda mengenai kerangka ini dalam komen di bawah.

Soalan Lazim (Soalan Lazim) di Bootstrap vs Foundation

Apakah perbezaan utama antara bootstrap dan asas? Walau bagaimanapun, mereka mempunyai beberapa perbezaan utama. Bootstrap terkenal dengan ciri-ciri luas dan komponen pra-gaya, yang menjadikannya pilihan yang baik untuk pemula atau pemaju yang ingin cepat prototaip reka bentuk. Sebaliknya, asas lebih fleksibel dan disesuaikan, menjadikannya pilihan pilihan untuk pemaju yang mahukan lebih banyak kawalan ke atas reka bentuk mereka. Ia juga mempunyai sistem grid yang lebih kompleks berbanding dengan bootstrap. Walau bagaimanapun, Yayasan mengambil pendekatan pertama mudah alih, yang bermaksud ia direka dengan peranti mudah alih dalam fikiran dan kemudian skala untuk skrin yang lebih besar. Sebaliknya, Bootstrap pada mulanya direka untuk desktop-pertama tetapi sejak itu telah mengadopsi pendekatan mudah alih dari Bootstrap 3 dan seterusnya. Kedua -dua rangka kerja menawarkan reka bentuk yang responsif, tetapi pilihan antara kedua -dua sering datang ke keutamaan peribadi dan keperluan projek. Sistem grid untuk menyusun dan menyelaraskan kandungan, tetapi mereka melakukannya dengan cara yang sedikit berbeza. Bootstrap menggunakan sistem grid 12 lajur, yang mudah difahami dan digunakan. Yayasan, sebaliknya, menggunakan sistem grid fleksibel yang boleh disesuaikan untuk menggunakan bilangan lajur sehingga 12. Ini menjadikan sistem grid asas lebih fleksibel, tetapi juga sedikit lebih kompleks untuk digunakan.

Apakah perbezaan dalam pilihan penyesuaian antara bootstrap dan asas? Bootstrap menyediakan alat customizer yang membolehkan anda dengan mudah menyesuaikan komponen dan pembolehubahnya. Yayasan, sebaliknya, menggunakan sistem penyesuaian berasaskan SASS yang memberi anda lebih banyak kawalan ke atas reka bentuk, tetapi memerlukan pemahaman yang baik tentang SASS. ??> Kedua -dua Bootstrap dan Yayasan dilengkapi dengan satu set komponen JavaScript yang menambah fungsi ke laman web anda. Komponen JavaScript Bootstrap didasarkan pada jQuery, sementara Yayasan menawarkan dua versi: satu yang menggunakan jQuery dan satu yang menggunakan zepto.js, alternatif yang lebih ringan untuk jQuery. Komponen JavaScript kedua -dua kerangka modular, yang bermaksud anda boleh memasukkan hanya yang anda perlukan. Anda menggunakannya. Kedua -dua kerangka ini boleh disesuaikan untuk memasukkan hanya komponen yang anda perlukan, yang dapat membantu meningkatkan prestasi. Walau bagaimanapun, kerana asas lebih fleksibel dan disesuaikan, ia berpotensi membawa kepada laman web yang lebih ringan dan lebih cepat jika digunakan dengan betul. Mempunyai komuniti yang lebih besar dan lebih banyak sumber yang tersedia, termasuk pelbagai tema, templat, dan plugin pihak ketiga. Yayasan, sambil mempunyai komuniti yang lebih kecil, disokong oleh Zurb, sebuah syarikat reka bentuk yang menyediakan sokongan dan sumber profesional. Berhijrah dari satu kerangka ke yang lain boleh menjadi tugas yang kompleks, kerana ia melibatkan menulis semula HTML, CSS, dan berpotensi JavaScript anda. Walau bagaimanapun, kedua -dua bootstrap dan asas mempunyai konsep dan komponen yang sama, jadi jika anda sudah biasa dengan satu, pembelajaran yang lain harus agak mudah. ??> Kedua -dua Bootstrap dan Yayasan telah berusaha untuk diakses, tetapi mereka mendekatinya dengan cara yang berbeza. Bootstrap termasuk beberapa ciri kebolehaksesan dalam komponennya, dan menyediakan dokumentasi kebolehaksesan terperinci. Yayasan, sebaliknya, mempunyai satu set alat kebolehaksesan yang dibina ke dalam rangka kerja, dan juga menyediakan dokumentasi akses yang komprehensif.

Kerangka mana yang harus saya pilih: Bootstrap atau Yayasan? Jika anda mahukan rangka kerja dengan ciri-ciri yang luas, komponen pra-gaya, dan komuniti yang besar, bootstrap mungkin pilihan yang lebih baik. Jika anda lebih suka rangka kerja yang lebih fleksibel, disesuaikan, dan mengambil pendekatan pertama mudah alih, asas mungkin lebih sesuai.

Atas ialah kandungan terperinci Perbandingan Sistem Grid: Bootstrap 3 vs Yayasan 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!