Bootstrap menyediakan sistem grid streaming yang responsif dan mobile. Ketika layar atau ukuran viewport meningkat, sistem akan secara otomatis dibagi menjadi hingga 12 kolom.
Sistem grid mirip dengan tabel dengan baris dan kolom. Itu harus ditempatkan dalam wadah dengan jenis set ke wadah. Ini bisa berupa div dan konten ditempatkan di kolom. Kisi -kisi dalam desain web digunakan untuk tata letak konten, membuat situs web mudah dijelajahi. Berikut ini adalah contoh menggunakan tata letak grid bootstrap.
<div> <div> col2 </div> <div> col10 </div> </div>
Efek tampilan adalah sebagai berikut:
Gaya kelas = "baris" ditambahkan untuk mewakili baris, dan gaya class = "col-sm-2" ditambahkan untuk mewakili kolom. Sistem membagi seluruh layar menjadi 12 bagian, COL-SM-2 berarti bahwa kolom mencakup 2 bagian, dan rasio COL-SM-10 berarti bahwa kolom mencakup 10 bagian. Efek yang ditampilkan akan seperti yang ditunjukkan pada gambar di atas, menunjukkan bahwa ada dua kolom dalam satu baris, kolom pertama menyumbang 2 bagian dan kolom kedua menyumbang 10 bagian.
Bootstrap adalah kerangka kerja front-end yang responsif, yang tercermin dalam sistem grid, yang merupakan perangkat yang sesuai dengan ukuran tampilan yang berbeda, dan dapat menyajikan efek tampilan yang berbeda. Seperti yang ditunjukkan di bawah ini:
<div> <div> .col-xs-12 .col-md-8 </div> <viv> .col-xs-6 .col-md-e4 </div> </div>
COL-MD-8 berarti bahwa daftar ini menyumbang 8 bagian di bawah layar menengah seperti desktop dan laptop biasa. COL-XS-12 berarti kolom ini menyumbang 12 salinan di bawah layar kecil seperti tablet. Kode di atas menunjukkan bahwa ada dua kolom di baris dan baris berikutnya dari desktop dan laptop biasa. Kolom pertama menyumbang 8 bagian, kolom kedua menyumbang 4 bagian, dan baris berikutnya dan kolom berikutnya menyumbang untuk 2 kolom, kolom pertama menyumbang 12 bagian, dan kolom kedua menyumbang 6 bagian. Dengan cara ini, efek yang berbeda dicapai pada perangkat tampilan yang berbeda. Anda dapat mensimulasikan kedua situasi ini dengan mengubah ukuran browser.
Gambar berikut menunjukkan bagaimana sistem grid Bootstrap bekerja pada beberapa perangkat layar
Di atas adalah deskripsi lengkap dari dasar -dasar grid bootstrap ketiga yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!