Pengenalan Framework “Bootstrap”

Published in

Amikom Computer Club

6 min readMar 20, 2021

Tentang Bootstrap

Sebuah library framework CSS yang bersifat open-source khusus untuk pengembangan frontend website. Bootstrap juga merupakan salah satu framework HTML, CSS, dan JS. Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen, seperti navigasi, sistem grid, dan tombol (button)

Kegunaan Bootstrap

Mempercepat waktu untuk proses pembuatan frontend website
Mempermudah dalam proses pembuatan frontend website
Menampilkan website dengan lebih modern
Membuat website lebih terstruktur

Kelebihan Bootstrap

Efisien waktu

Bootstrap menyediakan banyak sekali library berisi berbagai macam script yang sudah siap saji, untuk dapat dipakai oleh programmer ketika mengembangkan frontend websitenya. Sehingga developer tidak perlu menghabiskan waktu lama untuk menulis berbagai script CSS dari awal.

Fleksibel

Hal tersebut karena frame dalam boostrap dapat digunakan sesuai keinginan dan bebas dimodifikasi oleh pengguna. Kita dapat lebih mudah untuk memodifikasi berbagai script yang sudah ada di dalam boostrap sesuai kreatifitas.

Mobile Friendly

Tampilan boostrap sudah mendukung segala jenis resolusi, baik di layar tablet, smartphone, komputer, maupun laptop.

Dilengkapi dengan Javascript

Bootstrap sudah dilengkapi dengan library JavaScript yang sesuai dengan struktur dari bahasa pemrograman Javascript standar. Sehingga dengan adanya komponen tersebut akan membuat website lebih powerfull dan interaktif.

File dalam Bootstrap

Bootstrap.css

Bootstrap.css adalah framework yang mengatur dan mengelola layout website. Jika HTML bertugas mengatur konten dan struktur halaman website, maka CSS bertugas untuk mengatur layout halaman website. Oleh karena itu, HTML dan CSS harus bekerjasama untuk melakukan tindakan tersebut.

Bootstrap.js

Di dalam bootstrap terdapat file JavaScript yang bertanggung jawab atas interaktivitas website. Bootstrap membutuhkan jQuery (library JavaScript) untuk membuat desain yang tampilannya bersifat responsif.

Instalasi Bootstrap

Bootstrap dapat diinstall dengan beberapa cara, yaitu dapat diinstall dengan composer, bower, menggunakan npm, secara offline, dan online. Yang paling banyak digunakan adalah cara menginstall bootstrap secara offline dan online.

A. Install bootstrap secara offline

Download bootstrap pada link berikut: https://getbootstrap.com/getting-started/
Klik pada bagian “Getting Strated”. Pilih menu Download. Atau bisa juga dengan klik menu Download pada bagian navbar pojok kanan atas.

3. Letakkan file yang sudah didownload pada folder yang kamu inginkan

4. Ekstrak file .zip yang telah didownload

5. Hubungkan file html dengan bootstrap.css. Masukan perintah berikut pada bagian<head>:

<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>

6. Hubungkan file html dengan bootstrap.js. Masukan perintah berikut pada bagian <head>:

<script type=”text/javascript” src=”js/bootstrap.min.js”></script>

B. Install bootstrap secara online

Install bootstrap secara online dapat dilakukan dengan cara memanggil link bootstrap dan meletekan link tersebut pada bagian <head> di halaman HTML.

Praktik Menggunakan Bootstrap

Membuat navbar

Apa itu navbar? Navbar atau Navigation Bar adalah sebuah balok navigasi yang terletak pada bagian atas halaman website. Navbar berisi menu-menu navigasi yang memiliki fungsi-fungsi tertentu. Bagaimana cara membuat navbar dengan bootstrap? Berikut adalah caranya:

1. Jangan lupa letakkan file .html dalam folder yang sama dengan folder bootstrap.

2. Klik menu “Docs” pada navbar.

3. Cari navbar pada kolom “Search docs”.

Atau bisa juga dengan klik “Components” lalu pilih Navbar, seperti gambar di bawah ini:

4. Pilih navbar yang kamu inginkan.

Berikut adalah hasil membuat navbar dengan bootstrap:

Membuat tabel

Untuk membuat table dengan bootstrap kita hanya perlu memasukan class-class table bootstrap. Berikut adalah beberapa class table yang sering digunakan untuk membuat atau mendesign table dalam bootstrap:

Berikut adalah langkah-langkah membuat table dengan bootstrap:

Buat tag <table> dalam <body>. Jangan lupa untuk memberikan class pada tag <table>, misalnya seperti gambar di bawah ini:

2. Gunakan class-class yang lain. Jangan lupa isi tabel sesuai keinginan.

Berikut adalah hasil membuat table dengan bootstrap:

Membuat button (tombol)

Untuk membuat tombol pada bootstrap kita harus menambahkan class “btn”. Berikut adalah beberapa class yang digunakan untuk membuat tombol atau button:

· .btn

Class untuk membuat tombol secara standar atau biasa.

· Daftar classs btn berdasarkan ukurannya:

· Daftar classs btn berdasarkan warnanya:

Berikut adalah hasil membuat tombol dengan bootstrap:

Membuat list

List adalah daftar urutan kata atau kalimat perbaris atau perkolom. Untuk membuat list dengan bootstrap kita menambahkan class “list-group” pada bagian element pembuka. Lalu, menambahkan class “list-group-item” pada tiap tiap tag pembuka. Berikut adalah contoh codingnya:

Berikut adalah hasil membuat list dengan bootstrap:

Membuat ikon

Untuk menampilkan icon, bootstrap sudah memberikan fasilitas “Icons” pada menu navbar. Pada menu “Icons” tersebut akan menampilkan berbagai macam icon, dimana kita dapat menggunakannya secara gratis.

Berikut langkah-langkah membuat icon dengan bootstrap:

Klik menu “Icons” pada navbar

2. Pilih icon yang diinginkan. Ada tiga metode untuk menggunakan icon di bootstrap. Yang pertama dengan mencopy HTML file icon. Yang kedua dengan mendeklarasikan class dari icon tersebut. Yang ketiga dengan mendownload file icon.

Berikut adalah hasil membuat icon dengan bootstrap:

Membuat pagination

Pagination adalah teknik untuk menampilkan data ke dalam beberapa halaman. Untuk membuat pagination dengan bootstrap kita menambahkan class “pagination” pada bagian element pembuka, seperti contoh di bawah ini: