Pengenalan, Instalasi, Fitur Bootstrap
- Pengenalan Bootstrap
a. Pengertian Bootstrap
Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript.
b. Fungsi Bootstrap
- Mempercepat waktu untuk proses pembuatan frontend website
- Mempermudah dalam proses pembuatan frontend website
- Menampilkan website dengan lebih modern dan terstruktur
c. Kelebihan Bootstrap
- Bisa digunakan untuk membantu mempercepat ketika membuat front-end pada website.
- Bootstrap memiliki tampilan yang modern sehingga bisa membuat website memiliki tampilan yang menarik.
- Bootstrap akan membuat tampilan website lebih responsif. Jadi, ketika menggunakan smartphone ataupun komputer untuk membuat website, maka ia akan menyesuaiakan dengan ukuran layar.
- Boostrap juga akan membuat website Anda lebih ringan ketika dibuka.
2. Cara instalasi Bootstrap
Apabila ingin menggunakan Bootstrap, kita harus menginstallnya terlebih dahulu sebelum menggunakannya. Untuk menginstallnya terdapat dua cara yaitu secara online maupun secara offline. Berikut cara menginstall Bootstrap :
A. Install bootstrap secara offline
- Pertama buka website bootstrap pada link berikut : https://getbootstrap.com/
- Pilih menu Download. Atau bisa juga dengan klik menu Download pada bagian navbar pojok kanan atas.
2. Lalu klik tombol download pada menu Compiled CSS dan JS
3. Letakkan file zip bootstrap yang sudah didownload pada folder yang kamu inginkan, lalu jangan lupa ekstrak file zip bootstrap
4. Kemudian buka file html yang kita buat, lalu hubungkan file html dengan bootstrap.css. Masukan perintah berikut pada bagian <head>:
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.min.css”>
Ingat! File bootstrap dan html harus berada di satu folder yang sama, dan penamaan href disesuaikan dengan folder yang kita taruh filenya
5. Hubungkan file html dengan bootstrap.js. Masukan perintah berikut pada bagian <head>:
<script type=”text/javascript” src=”js/bootstrap.min.js”></script>
Selesai, bootstrap dapat digunakan pada HTML kita secara offline
B. Install bootstrap secara online
- Untuk install bootstrap secara online dapat dilakukan dengan cara memanggil link bootstrap. Pertama klik bagian Getting Started lalu klik Introduction lalu scroll ke bawah bagian starter template lalu copy
2. Letakkan copy link tersebut pada bagian <head> di halaman HTML. Selesai, bootstrap dapat digunakan pada HTML kita secara offline
3. Pengenalan Fitur di Bootstrap
Utilities
A. Float and Positions
Float digunakan untuk mengatur posisi elemen secara horizontal, Value yang bisa anda gunakan untuk property float ini ada left,right,inherit, dan none. Untuk dokumentasi lengkap bisa dilihat di : https://getbootstrap.com/docs/5.1/utilities/float/
Berikut cara menggunakan float sederhana di bootstrap
Output :
Cara mengatur responsive float
Responsive float berfungsi untuk menata penempatan konten dilayar yang berbeda
Output :
Bisa dilihat perbedaan nya ketika ukuran layar nya berbeda
Clearfix Float
Clearfix berguna untuk membersihkan float, mengapa float harus dibersihkan ? karena agar elemen yang dibawah nya tidak mengikuti aturan float yang diatas. Untuk dokumentasi lengkap bisa dilihat di :
https://getbootstrap.com/docs/5.1/helpers/clearfix/
Seperti ini contohnya :
Output :
Ini belum dikasih class float-end, float-start, lihatlah masih terdapat background warna hijau.
Dan jika diberi class float, maka akan seperti ini
Output :
Lihatlah, text nya bisa berpindah secara horizontal karena diberi class float tapi sayang background hijau nya hilang kan ? huhu.
Nah untuk mengatasi nya maka harus diberikan class clearfix seperti ini :
Output :
And tadaaa, lihatlah background hijau ada kembali dan posisi elemen sudah menggunakan float
- Basic Component
Secara default kalo teman teman menulis div dengan class container maka akan ada kotak ditengah tengah halaman yang menyisakan ruang dikiri dan kanan
Jika teman teman ingin membuat penuh satu halaman maka gunakan :
B. Membuat 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, lalu copy code nya dan paste ke dalam <body> html.
Berikut adalah contoh tampilan navbar dan dibawah nya code yang harus di copy dan paste ke bagian <body> html
C. 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:
1. Buka docs bootstrap ‘table’ lalu pilih tabel mana yang ingin kamu gunakan, selanjutnya copy code nya
2. Selanjutnya paste ke text editor, jangan lupa menggunakan class=”table”
Hasil tabel menggunakan bootstrap
D. Membuat button
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.
Tampilan komponen button di bootstrap
Daftar classs btn berdasarkan ukurannya:
Daftar classs btn berdasarkan warnanya:
Berikut adalah hasil membuat tombol dengan bootstrap:
E. 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:
F. Membuat Icon
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:
1. 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 contoh koding (dengan copy HTML) :
Berikut hasil membuat icon dengan bootstrap :
G. 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
Berikut hasil kodingan pagination dengan bootstrap :
