Tutorial Bootstrap : Pengenalan Bootstrap, Grid System, Typography, dan Color

Bootstrap : Pengenalan Bootstrap, Grid System, Typography, dan Color

Assalamu'alaikum W. W.
A. Pendahuluan

Halo, pada kesempataan kali ini saya akan menjelaskan apa itu bootstrap dan bagaimana cara menggunakaannya, dan juga pengaturan Grid, Typography, dan Color.

1.Pengertian

Bootstrap adalah sebuah framework yang bersifat open source. Bootstrap adalah sebuah framework yang digunakan untuk membuat sebuah website dinamis dengan menggunakan bahasa script CSS. Bootstrap dapat membantu developer dan designer dalam membuat sebuah tampilan website dengan cepat dan mudah tanpa harus membuatnya dari awal.
2.Latar Belakang
Mencari cara agar dapat membuat front end website dengan bagus, responsive, dan efektif. Tanpa harus membutuhkan waktu yang lama.
3.Maksud dan Tujuan
Paham dan dapat menggunakan Bootstrap, sehingga pengembangan front end dapat dilakukan dengan mudah.
B. Alat dan Bahan

- PC

- Text Editor

- Web Browser
C. Jangka Waktu Pelaksanaan

-

D. Penjelasan

Pengenalan Bootstrap
Apa itu bootstrap ??
- Bootstrap adalah framwork front-end gratis untuk pengembangan website agar lebih cepat dan mudah 

- Bootstrap mencakup template desain berbasis HTML dan CSS untuk typografi, form, button , tablel, nav, dan banyak lainnya, serta plugin JavaScript opsional. 

- Bootstrap juga memberi Anda kemampuan untuk membuat desain website responsive dengan lebih mudah.

Pada saat ini bootstrap sudah sampai ke versi 4.

Perbedaan Bootstrap 4 dab Bootstrap 3 :

- Bootstrap 4 adalah versi terbaru dari Bootstrap; dengan komponen baru, stylesheet lebih cepat dan lebih responsive.
- Bootstrap 4 mendukung semua browser dan platform utama. Namun, Internet Explorer 9 dan ke bawah tidak didukung.

Kenapa menggunakan Bootstrap ?

- Mudah digunakan : Sangat membantu untuk orang - orang yang hanya mengerti dasar - dasar CSS dan HTML.

- Lebih banyak fitur responsive : Pada versi ini sudah dapat responsive Hanphone, Tablet, dan Laptop.

-  Bootstrap dapat berjalan di sebua browser versi terbaru.

Di mana kita bisa mendapatkan bootstrap ?  

- Menyertakan bootstrap dengan CDN.

- Download bootstrap di getbootstrap.com.

 CDN adalah cara menyertakan bootstrap dengan cara online.

Grid System
    Pada grid bootstrap memiliki 12 kolom di dalam halaman. Anda dapa mengatur penggunaan kolom tersebut, entah mau dipakai semua atau hanya beberapa.
Pengaturan grid di bootstrap :

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 1

rentang 4

rentang 4

rentang 4

rentang 4

rentang 8

rentang 6

rentang 6

rentang 12

 
 Class dalam bootstrap untuk mengatur grid.

• .col- (Untuk perangkat kecil, yang lebar layarnya kurang dai 576px)

• .col-sm- (Untuk perangkat kecil, yang lebar layarnya sama atau lebih besar dari 576px)
• .col-md- (Untuk perangkat berukuran sedang, yang lebar layarnya sama atau lebih besar dari 768px )
• .col-lg- (Untuk perangkat berukuran besar, yang lebar layarnya sama atau lebih besar dari 992px )
• .col-xl- (Untuk perangkat berukuran sangat besar, yang lebar layarnya sama atau lebih besar dari 1200px )

Contoh penggunaan :

Typography

Pengaturan Default Bootstrap 4
Bootstrap 4 menggunakan ukuran font default 16px, dan tline-hegiht-nya adalah 1,5.
Font-family defaultnya adalah "Helvetica Neue", Helvetica, Arial, sans-serif.
Selain itu, semua elemen <p> memiliki margin-top: 0 dan margin-bottom: 1rem (16px secara default).

Kita langsung aja ke contoh penggunaan :

Color
Bootstrap memiliki penglompokan untuk warna teks yaitu:

• .text-muted
• .text-primary 
• .text-success
• .text-info
• .text-warning
• .text-danger
• .text-secondary
• .text-white
• .text-dark
• .text-light:

Bootstrap juga memiliki pengelompokan warna untuk bakground, yaitu :

• .bg-primary 
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger
• .bg-secondary
• .bg-dark .bg-light.

Kita langsung saja ke cara pemakaian agar anda mengetahui perbedaannya :

Warna teks :

Warna Background :

E. Kesimpulan

>Untuk membuat sebuah website yang bagus, kita juga harus memikirkan front-end dari website tersebut, unuk membuat front-end yang bagus kita dapat menggunakan Bootstrap agar lebih cepat dan lebih indah juga
>Untuk membuat sebuah website yang bagus, kita harus dapat menggunakan grid dengan baik agar penempatan website bisa lebih bagus.
>Untuk membuat sebuah website yang bagus, kita harus paham typografinya dulu, karena typografi termasuk dasar dalam membuat sebuah website.
>Untuk membuat sebuah website yang bagus, kita harus mempertimbangkan pemilihan warna agar dapat sesuai dengan isi website tersebut.
F. Referensi
https://id.wikipedia.org/wiki/PHP_Bootstrap
https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp
https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp
https://www.w3schools.com/bootstrap4/bootstrap_typography.asp
https://www.w3schools.com/bootstrap4/bootstrap_colors.asp

Wasalamu'alaikum W. W.

Share this post