11 komponen dalam Bootstrap 4 untuk membuat website

16 December 2017

Dengan HTML saja tidak akan cukup membuat website yang sempurna dan kaya akan fitur. Kamu membutuhkan satu style yang dapat membawa website menjadi lebih hidup. Bootstrap 4 menawarkan cukup banyak class dan style yang bisa kamu kostum sesuai dengan yang kamu mau.

Dalam artikel ini, kita akan mengenal dan membahas beberapa komponen pada Bootstrap 4, seperti typography, tables, list-groups, jumbotron dan sebagainya yang umum ditemukan dalam website. Melalui class-class ini, Bootstrap menolong kita menambahkan banyak fitur untuk website kita dengan mudah dan cepat.

Ada banyak komponen yang disediakan oleh Bootstrap 4, seperti:

Typography

Untuk tipografi, Bootstrap 4 menggunakan Helvetica Neue, Helvetica, Arial dan Sans-serif untuk jenis font bawaan. Ini semua adalah standar font dan juga sebagai bawaan dalam semua komputer.

Semua body text memiliki font size yang ditetapkan sebesar 1rem atau 16 pixel dan line height 1.5.

Heading

Semua 6 tag heading mempunyai style dalam Bootstrap 4 dengan font weight sebesar 500, line height sebesar 1.1 dan berikut adalah urutan sizenya:

Bagaimana menggunakannya, lihat dibawah ini.

Mengenal Komponen-komponen Dalam Bootstrap 4

Dengan kode di atas, kamu akan mendapatkan hasil seperti gambar di bawah ini.

Mengenal Komponen-komponen Dalam Bootstrap 4

Kamu dapat juga menggunakan heading sebagai class untuk tag HTML apapun. Lihat kode di bawah.

Mengenal Komponen-komponen Dalam Bootstrap 4

Hal lainnya yang kamu dapat lakukan dengan heading adalah menggunakan 4 display class untuk mengatur ukuran setiap heading. Bootsrap 4 memiliki 4 class yakni:

Mari kita lihat bagaimana ini bekerja.

Mengenal Komponen-komponen Dalam Bootstrap 4

Lihat hasil pada gambar di bawah ini.

Mengenal Komponen-komponen Dalam Bootstrap 4

List Groups

Bootstrap 4 menawarkan dukungan dan style untuk tiga jenis list: ordered “ol”, unordered “ul” dan definition list “dl”. Di bawah adalah daftar class yang kamu dapat pakai untuk list:

Mari lihat contohnya.

Mengenal Komponen-komponen Dalam Bootstrap 4

Maka kamu akan mendapatkan hasil seperti ini.

Mengenal Komponen-komponen Dalam Bootstrap 4

Tables

Bootstrap 4 menangani table layout dalam cara yang lebih baik dari versi sebelumnya.

Ada lima opsi table class yang kita dapat tambahkan untuk merubah tampilan sesuai dengan keinginan.

Berikut adalah cara menggunakannya.

Table Striped

Cara menggunakannya adalah dengan memasukan nama class .table-striped di samping class .table di dalam attribute yang sama.

Mengenal Komponen-komponen Dalam Bootstrap 4

Berikut adalah hasilnya.

Mengenal Komponen-komponen Dalam Bootstrap 4

Table-bordered

Cara menggunakannya adalah dengan memasukan nama class .table-bordered di samping class .table di dalam attribute yang sama.

Berikut adalah hasilnya.

Mengenal Komponen-komponen Dalam Bootstrap 4

Table-hover

Cara menggunakannya adalah dengan memasukan nama class .table-hover di samping class .table di dalam attribute yang sama.

Berikut adalah hasilnya.

Mengenal Komponen-komponen Dalam Bootstrap 4


Sumber : Jasa Pembuatan Website dan Sistem Informasi http://klatenweb.com
Selengkapnya : http://klatenweb.com/read/2017/12/16/1239/11-komponen-dalam-Bootstrap-4-untuk-membuat-website.html