Rumahweb Blog
banner blog - Apa itu Bootstrap dan Cara Menggunakannya untuk Pemula

Apa itu Bootstrap dan Cara Menggunakannya untuk Pemula

Bootstrap 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.

Apa itu Bootstrap

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.

BasisBootstrap 4Bootstrap 5
Grid System5 class (xs, sm, md, lg, xl).6 class (xs, sm, md, lg, xl, xxl).
WarnaWarna terbatas.Memiliki extra warna dengan palet yang lebih baik.
JqueryMemiliki jquery dan semua plugin terkait.Jquery dihilangkan, digantikan dengan vanilla JS dan plugin yang sesuai.
Internet ExplorerSupport IE 10 dan 11.Tidak support IE 10 dan 11.
Form elementsRadio buttons & checkboxes memiliki tampilan berbeda di beberapa OS dan browser.Tidak ada perubahan tampilan di beberapa OS maupun browser.
Utilities APITidak dapat memodifikasi utilities.bebas untuk memodifikasi.
GutterMenggunakan class .glutter dengan font size dalam satuan px.Menggunakan class .g* dengan font size dalam satuan rem
Vertical ClassesKolom dapat diposisikan relatif.Kolom tidak dapat diposisikan relatif.
Bootstrap IconsTidak memiliki ikon sendiri, biasanya menggunakan font awesome.Sudah memiliki ikon sendiri.
JumbotronSupport.Tidak support.
Card deckTersedia. Digunakan untuk membuat cards dengan ukuran yang sama.Card deck dihilangkan.
NavbarMemiliki 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 GeneratorJekyll 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.

Cara Menggunakan Bootstrap

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>

Navbar

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?

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 4

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Promo Hosting Murah Rumahweb

Fredric Lesomar