Bootstrap dan fondasi adalah dua kerangka kerja front-end favorit saya, terutama pada prototipe untuk situs web yang berkembang cepat. Mereka semua menyediakan komponen siap pakai, mempercepat alur kerja saya. Kecuali beberapa perbedaan kecil, sebagian besar karakteristik dasar mereka tampaknya serupa.
Dalam artikel ini, saya akan memperkenalkan konstruksi dasar kisi -kisi mereka. Pertama, saya akan menunjukkan kepada Anda bagaimana mereka dibangun, menggambarkan komponen utama mereka, dan bagaimana mereka menunjukkan perbedaan dengan ukuran layar yang berbeda. Saya kemudian akan membantu Anda menambahkan pengetahuan melalui contoh praktik kehidupan nyata.
Mari kita mulai bersama!
Perbandingan 1: Perbandingan kueri media
Sebelum menganalisis struktur raster bootstrap dan fondasi, mari kita lihat breakpoint yang mereka sediakan untuk tata letak respons. Inilah yang disediakan setiap frame untuk mengatur jumlah raster yang tersedia.
Bootstrap menentukan 4 breakpoint kueri media berbasis 4 px. Ditampilkan sebagai berikut:
Foundation berisi 5 kueri media berbasis EM. Mereka ditampilkan di tabel berikut:
Untuk memberi Anda cara untuk memahami bagaimana kueri media bekerja, saya sarankan Anda memeriksa demo Bootstrap dan demo yayasan terkait. Tetapi jika Anda masih bingung, bagian selanjutnya akan menjelaskan semuanya.
Catatan: Mesh Yayasan dan layar super besar dinonaktifkan secara default. Jika Anda ingin menggunakannya, Anda harus "membatalkan" dan mengatur nilai-nilai dari dua variabel $ include-xl-html-grid-kelas dan $ include-xl-html-block-grid-class ke true. Anda dapat menemukan variabel -variabel ini di bagian _settings.scss.
Perbandingan 2: Struktur Grid
Baik Bootstrap dan Foundation menyediakan jaringan 12-kolom pertama yang bergerak yang terdiri dari baris dan kolom. Kolom bersarang dalam baris. Jumlah kolom di setiap baris adalah 12 kolom. Baris juga dapat bersarang di kolom.
Kedua kerangka kerja ini berisi banyak kelas yang telah ditentukan sebelumnya yang dapat Anda gunakan untuk mengatur ukuran kolom. Seperti disebutkan di atas, bootstrap berisi 4 breakpoint dan foundation kueri media berisi 5. Untuk setiap kisi, mereka memiliki awalan kelas yang berbeda yang dapat digunakan untuk mengatur ukuran kolom (lihat dua tabel di atas).
Garis kisi bootstrap juga membutuhkan elemen yang dienkapsulasi. Ini harus memiliki wadah atau kelas-container-fluid. Kelas kontainer dalam suatu elemen memiliki nilai tetap, dan nilainya tergantung pada jendela (lihat tabel pertama di atas), sedangkan kelas container-fluid dalam suatu elemen meluas ke seluruh lebar jendela browser.
Perbandingan 3: Kolom! = 12?
Ada kemungkinan bahwa jumlah kolom dalam sistem grid tidak sama dengan 12. Dalam hal ini, bootstrap akan mengapung kolom terakhir ke kiri, dan fondasi akan mengapungnya ke kanan. Jika Anda ingin mengesampingkan perilaku fondasi default, tambahkan kelas .end di kolom terakhir.
Perbandingan 4: Kelas Fungsional
Kedua kerangka kerja menyediakan kelas tambahan yang memungkinkan Anda untuk mendefinisikan jala mereka dengan sangat fleksibel.
Kelas yang terlihat memungkinkan Anda untuk memilih untuk menampilkan atau menyembunyikan konten di layar dengan ukuran tertentu. Kelas offset memungkinkan Anda untuk memusatkan kolom yang tidak lengkap atau menyesuaikan jarak di antara mereka. Tentu saja ada kelas lain yang dapat menentukan urutan kolom sesuai dengan perangkat yang berbeda.
Perbandingan Lima: Blok Grid
Selain jaringan default, Foundation mendukung fitur raster lain, yaitu blok kisi. Ini memungkinkan Anda untuk membuat kolom dengan ukuran yang sama dengan tanda terkecil. Untuk menggunakannya, tentukan baris sebagai elemen UL dan kolom di baris sebagai elemen LI. Kemudian tentukan ukuran kolom dengan menerapkan kelas yang relevan ke elemen UL (lihat tabel kedua di atas untuk detailnya).
Pada saat ini, Anda mungkin bertanya -tanya, apa perbedaan antara jaringan reguler dan blok kisi? Mari kita perhatikan dua perbedaan di antara mereka:
Berbeda dengan kisi -kisi default, (blok kisi) setiap baris memiliki lebar maksimum yang diterapkan, sehingga seluruh jendela browser selalu tertutup.
Blok mesh hanya dapat digunakan dalam proyek dengan ukuran yang sama.
Menggunakan kisi
Sekarang kita memiliki pemahaman yang baik tentang kisi -kisi dari dua kerangka kerja ini, mari kita lihat bagaimana kita dapat menggunakannya untuk membuat halaman bootstrap dan halaman fondasi yang sesuai.
Tangkapan layar berikut menunjukkan tata letak pertama yang akan kita bangun:
Dimulai dengan Bootstrap, kami mendefinisikan elemen dengan kelas wadah. Seperti dibahas sebelumnya, kelas ini akan menetapkan lebar tetap untuk elemen ini sesuai dengan ukuran layar (lihat tabel di Bootstrap untuk detailnya). Kemudian, kami menambahkan elemen dengan baris kelas ke dalamnya.
Sekarang kami siap mengatur kolom kami. Untuk layar besar, kami ingin 4 kolom dengan ukuran yang sama. Jadi kami mendefinisikan 4 elemen div masing-masing dengan kelas Col-LG-3. Namun, untuk perangkat kecil dan menengah kami lebih suka memiliki dua kolom di setiap baris. Untuk alasan ini, kami menggunakan kelas Col-SM-6. Akhirnya, untuk layar Ultra-Small kami ingin kolom ditumpuk. Ini adalah perilaku default untuk memindahkan kerangka kerja pertama, jadi tidak perlu mendefinisikan kelas Col-XS-12.
HTML terlihat seperti ini:
<dv> <div> <div> <!-Content-> </div> <viv> <!-Content-> </Div> <v> <!-Content-> </Div> <v> <!-Content-> </Div> <div> <!-Content-> </Div> <div> <!-konten-> </Div> </Div> </Div>
Mari kita terus melihat fondasi.
Mesh of foundation sangat mirip dengan mesh bootstrap, tetapi sedikit lebih sederhana. Pertama, kita harus mendefinisikan elemen dengan kelas baris, yang akan berisi kolom kita. Kelas ini menetapkan lebar maksimum elemen menjadi 62.5rem (1000px). Selanjutnya, kami menambahkan kolom. Untuk mencapai hal ini, kami menentukan bahwa setiap elemen div memiliki kelas kolom atau kolom, dan kemudian menggunakan kelas raster yang sesuai (lihat tabel di fondasi di atas untuk detail) untuk mengatur lebarnya. Demikian pula, untuk perangkat kecil, kita tidak perlu mendefinisikan kelas 12 kecil.
Ini adalah HTML berdasarkan raster fondasi :
<dv> <vet> <!-konten-> </div> <verv> <!-konten-> </div> <veT!-konten-> </div> <v> <!-konten-> </div> <v> <!-konten-> </Div> <div> <!-konten-> </Div> </Div> </Div>
Pada saat ini, saya pikir Anda telah mulai menjadi lebih akrab dengan sistem grid dari dua kerangka kerja ini. Tapi mungkin contoh lain dapat membantu Anda memahami lebih jelas.
Dalam contoh berikutnya, kami akan membangun footer. Diagram berikut menunjukkan gaya yang kami inginkan:
Di sini, kami akan memilih tata letak yang berbeda untuk dibandingkan dengan contoh sebelumnya. Untuk layar dengan layar menengah dan di atas (atau layar dengan layar kecil dan di atasnya di kisi bootstrap), kami ingin menampilkan tiga kolom. Namun, kami perhatikan bahwa ada barisan bersarang di kolom terakhir. Ini terdiri dari dua kolom. Kami akan mengatur lebar mereka ke setengah dari lebar baris di semua perangkat. Akhirnya, kami menyesuaikan visibilitas gambar yang muncul di baris bersarang.
Berikut ini kode di Bootstrap:
<dv> <div> <div> <!-Content-> </Div> <ver> <!-Content-> </Div> <ver> <div> <a href = "#"> <p> Mari bertemu dan diskusi </p> <i> </i> </a> </viv> <!-.col-xs-6-> </i> </a> </div> <!-.col-xs-6-> </i> </a> </div> <! </div> <!-.col-sm-4-> </div> <!-.row-> </div> <!-.container->
Ini kode untuk fondasi:
<div> <verv> <!-Content-> </div> <viv> <!-Content-> </div> <viv> <ul> <li> <a href = "#"> <p> Mari bertemu dan diskusi </p> <i> </i> </a> </li> <li> <!-konten-> </i> </i> </a> </li> <li> <!-konten-> </i> </i> </a> </li> <li> <!-Content-Content-> </i> </i> </a> </li> <li> <!-Content-Content-> </i> </i> </a> </li> <li> <!-Content-Content-> </i> </ul> </Divium .row ->
Catatan: Jika Anda ingin mengganti blok mesh, kami dapat menggunakan mesh default foundation untuk membuat baris bersarang.
sebagai kesimpulan
Jika Anda ingin informasi lebih lanjut tentang Sistem Grid Bootstrap, Anda dapat memeriksa artikel ini: "Bootstrap harus mempelajari setiap hari (tata letak)"
Akhirnya, dalam artikel ini, saya memperkenalkan struktur mesh bootstrap dan fondasi. Kemudian kami melihat dalam proyek nyata bagaimana menggunakan kisi -kisi mereka. Seperti yang Anda lihat, semua kisi serupa dan dapat ditentukan lebih lanjut.
Saya harap Anda menyukai artikel ini. Mungkin Anda bisa menerapkan apa yang telah Anda pelajari untuk proyek Anda. Untuk konten Bootstrap lainnya, silakan ikuti: "Tutorial Pembelajaran Bootstrap", terima kasih telah membaca.
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.