A. JUDUL
BootStrap: Grid
BootStrap: Grid
B. PENDAHULUAN
1. Pengertian
Grid adalah susunan kerangka yang dibangun atas garis dengan posisi vertikal dan horizontal, grid dipergunakan sebagai alat bantu untuk menyusun atau mengatur objek dalam kontek perencanaan dalam ruang gambar dua dimensi. Sistem grid adalah kemampuan dasar yang harus dimengerti dan dipahami oleh seorang desainer.
Grid adalah susunan kerangka yang dibangun atas garis dengan posisi vertikal dan horizontal, grid dipergunakan sebagai alat bantu untuk menyusun atau mengatur objek dalam kontek perencanaan dalam ruang gambar dua dimensi. Sistem grid adalah kemampuan dasar yang harus dimengerti dan dipahami oleh seorang desainer.
2. Latar Belakang
Contoh di atas menciptakan tiga kolom dengan lebar yang sama pada perangkat berukuran kecil, sedang, besar, dan ekstra besar dengan menggunakan kelas grid standar kami. Kolom tersebut dipusatkan di halaman dengan orang tua
Melanggarnya, inilah cara kerjanya:
Contoh di atas menciptakan tiga kolom dengan lebar yang sama pada perangkat berukuran kecil, sedang, besar, dan ekstra besar dengan menggunakan kelas grid standar kami. Kolom tersebut dipusatkan di halaman dengan orang tua
.container . Melanggarnya, inilah cara kerjanya:
- 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.
3. Maksud danTujuan
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.
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.
4. Hasil yang
Diharapkan
- Tabel tabel dapat tertata dengan baik
- Memberikan tampilan yang menarik
C. ALAT dan BAHAN
- PC
- Browser
D. JANGKA WAKTU
2 jam
2 jam
E. LANGKAH-LANGKAH
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.
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. HASIL yang
DIDAPAT
Table yang kita buat ada efect warna, dan lebih tampil menarik.
Table yang kita buat ada efect warna, dan lebih tampil menarik.
G. PENEMUAN
PERMASALAHAN
Ketika aku manggil aku keliru manggil, harusnya aku panggi dengan class, padahal yang ada adalah 75.000.
Ketika aku manggil aku keliru manggil, harusnya aku panggi dengan class, padahal yang ada adalah 75.000.
H. KESIMPULAN
Dengan menggunakan boorstrap pembentukan tabel, baris, dan kolom menjadi lebih baik dan lebih menarik.
I. REFERENSI
Dengan menggunakan boorstrap pembentukan tabel, baris, dan kolom menjadi lebih baik dan lebih menarik.
I. REFERENSI
Tidak ada komentar:
Write komentar