Assalammu'alaikum wr. wb.
A. Pendahuluan
1. Pengertian
Grid adalh struktur dau dimensi yang terdiri dari sumbu horisontal dan sumbu vertikal , sehingga akan tersusun kolom dan baris.
2. Latar Belakang
Di dalam bootstrap, grid system dibagi dalam 12 kolom (
col-*) dimana dalam tiap barisnya (.row) yang diset dalam empat model xs (extra small), md (medium), sm (small), lg (large)
sesuai lebar dari layar monitor, sehingga selain membantu kita dalam
membuat layout web yang rapi, grid system bootstrap juga membantu kita
membuat layout web yang responsive.3. Maksud dan Tujuan
Sistem grid Bootstrap menggunakan serangkaian kontainer, baris, dan kolom untuk tata letak dan menyelaraskan konten. Ini dibangun dengan flexbox dan sangat responsif. Berikut adalah contoh dan sebuah tampilan mendalam tentang bagaimana grid datang bersama-sama.
B.Cara Kerja Grid
- Wadah menyediakan sarana untuk memusatkan dan mendatar pad isi situs Anda. Gunakan
.containeruntuk lebar piksel responsif atau.container-fluidforwidth: 100%di semua area viewport dan perangkat. - Baris adalah bungkus untuk kolom. Setiap kolom memiliki
paddinghorisontal (disebut selokan) untuk mengendalikan ruang di antara keduanya.paddingini kemudian ditangkal pada baris dengan margin negatif. Dengan cara ini, semua konten di kolom Anda sejajar secara visual di sisi kiri. - Dalam tata letak grid, konten harus ditempatkan di dalam kolom dan hanya kolom yang mungkin merupakan anak langsung dari baris.
- Berkat flexbox, kolom grid tanpa
widthtertentu akan secara otomatis layout sebagai kolom lebar yang sama. Misalnya, empat contoh.col-smmasing-masing akan secara otomatis 25% lebar dari breakpoint kecil dan ke atas. Lihat bagian kolom tata letak otomatis untuk contoh lainnya. - Kolom kelas menunjukkan jumlah kolom yang ingin Anda gunakan dari kemungkinan 12 per baris. Jadi, jika Anda menginginkan tiga kolom dengan lebar yang sama, Anda bisa menggunakan
.col-4. -
widthkolom ditetapkan dalam persentase, jadi ukurannya selalu cair dan berukuran relatif terhadap elemen induknya. - Kolom memiliki
paddinghorizontal untuk membuat selokan di antara kolom individual, namun Anda dapat menghapusmargindari baris danpaddingdari kolom dengan.no-gutterspada kotak.row. - Untuk membuat grid responsif, ada lima titik putus grid, satu untuk setiap breakpoint responsif : semua breakpoints (ekstra kecil), kecil, sedang, besar, dan ekstra besar.
-
.col-sm-4grid didasarkan pada kueri media minimum lebar, yang berarti mereka menerapkannya pada satu titik.col-sm-4dan semua yang di atasnya (misalnya,.col-sm-4berlaku untuk perangkat kecil, menengah, besar, dan ekstra besar, namun bukan titikxspertama ). - Anda dapat menggunakan kelas grid yang telah ditentukan (seperti
.col-4) atau Sass mixin untuk markup semantik yang lebih banyak.
C. Alat dan Bahan
>PC/Laptop
>Web Browser
D. Jangka Waktu Pelaksanaan
2 jam
E. Tahap Pelaksanaan
1. MenyiapkanPC dan Folder yang akan dipake
2. Menyiapkan library bootstrap
3. Memanggil alamat file pada bagian tag <head>
4. Memberi class pada elemen yang akan ditambahkan dengan bootstrap
5. Buka file lewat browser.
F. Kesimpulan
Dapat membantu kita dalam membuat tabel, baris, dan kolom menjadi rapi.
G. Referensi
- http://www.kursuswebsite.org/mengenal-grid-system-bootstrap/
- https://translate.google.com/translate?hl=id&sl=en&u=https://getbootstrap.com/docs/4.0/layout/grid/&prev=search
Wassalammu'alaikum wr. wb.
Hai, selamat datang di blog saya. Di blog ini saya berbagi tentang materi apa pun, misalnya : tentang instalasi cms open source. Semoga dalam isi blog ku ini bisa membantu kalian semua yang telah mengunjungi blog saya ini. Terima Kasih sudah mengunjungi blog saya.
0 komentar:
Posting Komentar