Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7 - Belajar Bootstrap Bag.2

Belajar Bootstrap Untuk Pemula

- Bagian 2 - GRID SYSTEM

Apa Itu Grid System ?

Grid System adalah sistem pembuatan layout sebuah website berdasarkan baris dan kolom. Berikut cara kerja dari Grid System.

• Baris atau Class .row harus di letakan di dalam Class .container atau Class .container-fluid.
• Class . row digunakan untuk membuat sebuah kolom horizontal.
• Isi Content harus ditempatkan didalam kolom dengan Class .col-xs-*, col-sm-*, col-md-*, col-lg-* .
• System Grid seperti Class .row dan Class .col-md-* biasa digunakan untuk membuat layout kolom berbentuk kotak dengan cepat dan juga menjadi lebih simantik.
• Grid System diciptakan dengan menentukan 12 kolom yg tersedia di sebuah tampilan website, Sebagai contoh : di dalam Class .row anda ingi membuat 4 kolom yg sama, maka anda bisa menggunakan Class .col-md-3 .

Pembagian Kolom dalam Grid System Bootstrap

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7 - Grid System

Ilustrasi Grid System Bootstrap.

Sekarang, buat lah sebuat html file lalu copas script dibawah ini :

See the Pen Bootstrap Grid System by Rendi Febrian (@rendi-febrian) on CodePen.

Maka hasil dari code tersebut akan menjadi :

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Sekarang coba kalian kecilkan / resize ukuran browser kalian. Maka akan berubah seperti ini :

Jika Ukuran browser kurang dari 1200px

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Jika Ukuran browser kurang dari 992px

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Jika Ukuran browser kurang dari 788px

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7

Jagat-Info.com


Penulis : Jagat Info
Link : https://www.jagat-info.com/2018/10/belajar-bootstrap-v3.3.7-untuk-pemula-bag-2.html

Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7 - Belajar Bootstrap Bag.1

Bootstrap.com

- Bagian 1 - Pengenalan Apa Itu Bootstrap.

Apa itu Website Responsive?

Website responsive adalah sebuah website yg mempunyai kemampuan menyesuaikan tampilan atau layout nya secara baik dan otomatis saat diakses atau dibuka di sebuah perangkat yg berbeda-beda. Contoh : Smartphone , Tablet dan juga Desktop.

Lalu, Apa itu Bootstrap?

Bootstrap adalah Front-End Framework yg digunakan untuk membuat sebuat website yg responsive. Bootstrap lebih mengutamakan tampilan web diperangkat(diakses) oleh mobile device. Bootstrap juga sudah menyediakan kumpulan komponen dasar pada web yg telah di rancang sedemikian rupa.

Bootstrap ini adalah Front-End Framework yg berbasis HTML,CSS, dan Javascript.

Untuk membuat sebuah tampilan sebuah website menjadi responsive, Bootstrap memiliki metode yg dinamakan Grid, Grid ini berfungsi mengatur kolom di dalam website agar mudah diatur atau responsive. Sistem Grid di dalam Bootstrap ada 4 tingkatan class, Yaitu :

• XS ( untuk tampilan ponsel )
• SM ( untuk tampilan tablet )
• MD ( untuk tampilan desktop )
• LG ( untuk tampilan desktop yg lebih besar )

Di dalam sebuah website, website memilika kolom sebanyak 12, Berikut dibawah ini contoh gambaran grid/kolom pada bootstrap yg digunakan di sebuah website.

Contoh website responsive. anda bisa buka :

https://www.w3schools.com . 

Pada mode desktop akan tampil seperti dibawah ini :

Sekarang anda coba alihkan ke mode mobile atau bisa tekan CTRL+SHIFT+M pada keyboard.

Akan tampil seperti dibawah ini :

Untuk contoh website responsive anda bisa lihat di koleksi bootstrap di http://expo.getbootstrap.com .

Untuk lanjut ke bagian selanjutnya anda harus menyiapkan 2 hal berikut :

1. Code Editor atau Text Editor ( contoh : Atom editor, Sublime Text , dll )
2. Download File Bootstrap v3.3.7 ( download disini : https://getbootstrap.com/docs/3.3/ )

Terkait :

• Belajar Bootstrap Untuk Pemula - Tutorial Bootstrap 3.3.7 - Belajar Bootstrap Bag.2

Ditulis : Jagat Info.

Sumber : Dumetschool , Kursus Web Programing .

Link : https://www.jagat-info.com/2018/10/belajar-bootstrap-v3.3.7-untuk-pemula-bag1.html