BOOTSTRAP 4

  1. Pengertian Bootstrap

Bootstrap merupakan salah satu teknologi dalam pemubuatan web yang memudahkan dalam hal desain tampilan website. Bootstrap adalah library atau kumpulan beberapa style CSS yang sering digunakan pada pembuatan halaman web pada umumnya, sehingga designer lebih mudah dalam layouting web page karena hanya tinggal memanggil nama class-class yang telah disediakan. Versi bootstrap yang terbaru adalah Bootstrap 4. Bootstrap juga mendukung halaman web yang responsive sehingga lebih mudah dalam pembuatan layout web untuk desktop maupun perangkat mobile.

2. Penggunaan Bootstrap

Untuk memulai penggunaan bootstrap, kita harus pastikan halaman web yang dibuat telah terkoneksi dengan library bootstrap. Pada modul ini, kita perlu mengunduh library Bootstrap versi 4 dan kita letakkan pada direkrori local kita. Perhatikan contoh berikut ini!.

Berdasarkan penggalan script di atas, terdapat beberapa file eksternal yang dihubungkan ke halaman HTML. Sebelum itu, pastikan kita telah mengatur viewport seperti halnya pada pengaturan halaman responsive pada modul sebelumnya. File yang pertama dihubungkan adalah file bootrstrap.min.css. File tersebut merupakan library dari Bootstrap itu sendiri. Selanjutnya terdapat pemanggilan file jquery.min.js. File tersebut merupakan file yang berisi library javascript yang akan mendukung kinerja bootstrap. Begitu pula dengan fungsi pemanggilan popper.min.js dan bootstrap.min.js, file javascript tersebut yang akan menentukan kinerja dari bootstrap. Untuk konfigurasi bootstrap cukup dengan penggalan script di atas, selanjutnya untuk pemanfaatan dari bootstrap, silahkan ikuti latihan-latihan di bawah ini dengan seksama.

LATIHAN BOOTSTRAP COLOR

LATIHAN BOOTSTRAP GRID

LATIHAN BOOTSTRAP BUTTON

LATIHAN BOOTSTRAP ALERT

LATIHAN BOOTSTRAP CARD

LATIHAN NAVIGATION BAR

LATIHAN BOOTSTRAP SLIDER

LATIHAN BOOTSTRAP MODAL

LATIHAN BOOTSTRAP TABLE

TERIMAKASIH 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s