Fredric LesomarBootstrap adalah salah satu bagian penting dalam project pengembangan website yang Anda kerjakan, karena terdapat banyak fitur dan fungsi yang bisa mempercantik tampilan website yang sedang dikembangkan.
Ada beberapa pekerjaan dalam dunia pemrograman. sesuai tugas masing-masing. Di antaranya front end, back end, dan full stack developer. Apabila Anda ingin menjadi front-end developer, maka artikel ini bisa menjadi alternatif pembelajaran pengembangan aplikasi web dengan menggunakan Bootstrap.
Lalu apa itu Bootstrap sebenarnya? Apakah mudah diterapkan dalam pengembangan website? Yuk simak artikel ini hingga selesai!
Apa itu Bootstrap?
Bootstrap adalah kerangka kerja CSS yang bersifat open source, yang berarti bebas digunakan untuk merancang situs web dan aplikasi web. Kerangka kerja Bootstrap berisi template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, komponen antarmuka lain, serta ekstensi opsional seperti JavaScript.
Bootstrap adalah framework yang dibuat oleh Mark Otto dan Jacob Thornton untuk mempermudah dan mempercepat pengembangan website di sisi front end. Bootstrap juga didesain untuk memiliki fleksibilitas pada perangkat desktop dan mobile, sehingga Anda tidak akan kesulitan dalam mengembangkan tampilan pada kedua perangkat tersebut.
Dalam perkembangannya, Bootstrap telah merilis dua versi terbaiknya. yaitu Bootstrap 4 dan Bootstrap 5. Meskipun demikian, kedua versi ini tidak terlalu banyak perbedaan sehingga masih dapat diandalkan jika Anda ingin mencoba lakukan mixed script.
Salah satu keunggulan lain dari Bootstrap adalah dukungan komunitas yang tersedia, apabila Anda mengalami kendala dalam melakukan pemrograman. Jadi, Anda tidak perlu khawatir dalam mencoba framework ini.
Fungsi Bootstrap
Setelah memahami pengertian Bootstrap, salah satu hal yang juga harus Anda ketahui sebelum menggunakan Bootstrap adalah fungsi dari Framework ini. Berikut beberapa fungsi dasar dari framework Bootstrap:
1. Membuat Tampilan User Friendly
Salah satu fungsi dari Bootstrap adalah mempercantik tampilan website dan menjadikannya “enak dipandang”, dengan penggunaan style CSS dan file element yang modern.
Selain itu Bootstrap sangat mudah diaplikasikan ke dalam project website yang sedang Anda kerjakan, karena memiliki dasar grid style.
2. Mempermudah Pekerjaan Front-end Developer
Pada dasarnya tujuan awal pembuatan dan pengembangan framework Bootstrap adalah agar Anda, para front-end developer tidak perlu bersusah payah dalam mengembangkan tampilan website atau aplikasi.
3. Menjadikan Tampilan Website Lebih Terstruktur karena Adanya Grid
Tentunya hal ini menjadi bagian terpenting dalam mendesain sebuah web aplikasi, memiliki framework yang jelas dan mudah di kustomisasi agar memiliki tampilan yang responsif.
4. Dukungan Elemen Website yang Lebih Baik
Elemen merupakan salah satu bagian yang harus diringkas dan di-setup sesederhana mungkin, tanpa mengurangi esensi website.
Pada Bootstrap, penambahan dan peletakan elemen-elemen website sudah disediakan. Mulai dari navigasi, menu dropdown, thumbnail, dan masih banyak lagi.
Perbedaan Bootstrap model 4 dan 5
Secara sederhana, sebenarnya Bootstrap 4 dan 5 tidak memiliki perbedaan yang cukup signifikan. Namun demikian, setiap versi tertentu memiliki perubahan di dalamnya, misalnya penambahan atau pengurangan package. Berikut ini tabel perbedaan Bootstrap 4 dan 5.
| Basis | Bootstrap 4 | Bootstrap 5 |
| Grid System | 5 class (xs, sm, md, lg, xl). | 6 class (xs, sm, md, lg, xl, xxl). |
| Warna | Warna terbatas. | Memiliki extra warna dengan palet yang lebih baik. |
| Jquery | Memiliki jquery dan semua plugin terkait. | Jquery dihilangkan, digantikan dengan vanilla JS dan plugin yang sesuai. |
| Internet Explorer | Support IE 10 dan 11. | Tidak support IE 10 dan 11. |
| Form elements | Radio buttons & checkboxes memiliki tampilan berbeda di beberapa OS dan browser. | Tidak ada perubahan tampilan di beberapa OS maupun browser. |
| Utilities API | Tidak dapat memodifikasi utilities. | bebas untuk memodifikasi. |
| Gutter | Menggunakan class .glutter dengan font size dalam satuan px. | Menggunakan class .g* dengan font size dalam satuan rem |
| Vertical Classes | Kolom dapat diposisikan relatif. | Kolom tidak dapat diposisikan relatif. |
| Bootstrap Icons | Tidak memiliki ikon sendiri, biasanya menggunakan font awesome. | Sudah memiliki ikon sendiri. |
| Jumbotron | Support. | Tidak support. |
| Card deck | Tersedia. Digunakan untuk membuat cards dengan ukuran yang sama. | Card deck dihilangkan. |
| Navbar | Memiliki properti inline-block. Warna default dropdown putih untuk kelas dropdown-menu-dark. | Tidak memiliki inline-block. Warna default dropdown hitam untuk kelas dropdown-menu-dark. |
| Static Site Generator | Jekyll software. | Hugo software. |
Cara Menggunakan Bootstrap
Setelah Anda mengetahui detail pengertian, fungsi, hingga perbedaan model Bootstrap di atas, selanjutnya kami akan merangkum cara penggunaannya secara mudah di web pada umumnya.
Pada artikel ini, kami akan menggunakan Bootstrap yang berjalan di CDN. Fungsi CDN Bootstrap adalah memanggil elemen yang diperlukan langsung dari sumber sites atau element berada, sehingga tidak membebani web Anda secara langsung.
Berikut script yang bisa Anda gunakan:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>Script diatas bisa Anda letakan di antara <head> … </head>. Seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<title>First Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
Jika Anda ingin menggunakan Navbar, maka Anda bisa menambahkan class seperti di bawah:
<nav class="navbar navbar-default">Kemudian dilanjutkan dengan penyusunan Grid seperti Container dalam Div:
<nav class="navbar navbar-default">
<div class="container">
...
</div>
</nav>
Button
Hal penting lain dalam website adalah adanya button/tombol yang difungsikan untuk redirecting ke halaman lain, atau website eksternal. Button juga bisa digunakan untuk menunjukkan elemen lain yang berada di dalam halaman website yang sama.
Contoh penggunaan button pada Bootstrap adalah seperti script di bawah:
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-plane"></span>Top</a>Script berikut dapat diletakkan pada posisi Grid mana saja yang diinginkan, sesuai keperluan. Pada contoh di atas, button digunakan untuk melakukan jump-back ke halaman atas website. Pada class tersebut juga sudah sisipkan ikon yang nantinya berfungsi sebagai penanda button itu sendiri.
Di Bootstrap, Anda dapat menggunakan Glyphicon untuk mempercantik tampilan. Detail script di atas, dapat anda download melalui link: Download contoh bootstrap
Bootstrap adalah salah satu framework yang dapat mempermudah front-end developer dalam mengembangkan suatu website. Tertarik untuk mencoba?
Alwan Rosyidi
Hairum Fellayati