VIVINRAHAYU: Bootstrap Grid

Assalamualaikum wr.wb

A. JUDUL

   Bootstrap Grid

B. PENDAHULUAN

   1. Pengertian

      Bootstrap adalah front-end framework yang solek,bagus dan luar biasa yang mengedepankan tampilan untuk mobile device(Handphone,Smartphone, dll), guna mempercepat dan mempermudah pengembangan website.

   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 .container .

Melanggarnya, inilah cara kerjanya:

Wadah menyediakan sarana untuk memusatkan dan mendatar pad isi situs Anda. Gunakan .container untuk lebar piksel responsif atau .container-fluid for width: 100% di semua area viewport dan perangkat.
Baris adalah bungkus untuk kolom. Setiap kolom memiliki padding horisontal (disebut selokan) untuk mengendalikan ruang di antara keduanya. padding ini 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 width tertentu akan secara otomatis layout sebagai kolom lebar yang sama. Misalnya, empat contoh .col-sm masing-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 .
width kolom ditetapkan dalam persentase, jadi ukurannya selalu cair dan berukuran relatif terhadap elemen induknya.
Kolom memiliki padding horizontal untuk membuat selokan di antara kolom individual, namun Anda dapat menghapus margin dari baris dan padding dari kolom dengan .no-gutters pada 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-4 grid didasarkan pada kueri media minimum lebar, yang berarti mereka menerapkannya pada satu titik .col-sm-4 dan semua yang di atasnya (misalnya, .col-sm-4 berlaku untuk perangkat kecil, menengah, besar, dan ekstra besar, namun bukan titik xs pertama ).
Anda dapat menggunakan kelas grid yang telah ditentukan (seperti .col-4 ) atau Sass mixin untuk markup semantik yang lebih banyak.

   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.

   4. Hasil yang Diharapkan

Tabel tabel dapat tertata dengan baik
Memberikan tampilan yang menarik

C. ALAT DAN BAHAN

Laptop
Browser

D. JANGKA WAKTU PELAKSANAAN

       3 Jam

E. PEMBAHASAN

         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.

F. HASIL YANG DI DAPATKAN

Tabel yang dibuat lebih menarik

G. KESIMPULAN

   Dengan menggunakan bootstrap dalam pembuatan tabel akan lebih menarik.

H. REFERENSI