access_time
hourglass_empty
person_outline

Apa Itu Bootstrap dan Fungsinya? Panduan Bagi Pemula

Sebagai seorang front-end developer, Anda harus berkutat dengan CSS untuk menampilkan desain website yang menarik. Namun, di satu waktu, Anda pasti pernah merasa bosan harus menulis sintaks CSS berulang kali, bukan? Selain CSS, ternyata ada framework Bootstrap yang akan mempermudah pekerjaan Anda. Di artikel ini, kami akan membahas apa itu bootstrap, fungsi dari bootstrap, dan cara menggunakannya.

Apa Itu Bootstrap?

Apa itu bootstrap

Bagi developer, framework bukanlah hal baru. Terlebih lagi framework memiliki kumpulan sintaks untuk berbagai task sehingga mereka bisa membuat website secepat mungkin. Karena dengan adanya framework, developer tidak perlu menjalankan perintah dan fungsi dasar.

Banyaknya user yang menggunakan library di framework mengharuskan adanya perubahan di berbagai aspek. Hal ini menurunkan konsistensi framework dan menjadi kelemahan tersendiri. Bootstrap pun hadir dan menjawab permasalahan ini.

Bootstrap adalah framework open-source khusus front end yang awalnya dibuat oleh Mark Otto dan Jacob Thornton untuk mempermudah dan mempercepat pengembangan web di front end.

Bootstrap memiliki semua jenis HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen, seperti navigasi, sistem grid, carousel gambar, dan tombol (button).

Framework ini memang menghemat waktu developer karena tidak perlu mengelola template berkali-kali. Namun, fungsi utama dari Bootstrap adalah untuk membuat situs yang responsif. Interface website akan bekerja secara optimal di semua ukuran layar baik di layar smartphone maupun layar komputer/laptop.

Developer tak perlu lagi mendesain situs khusus untuk perangkat tertentu. Trafik dan jangkauan audiens versi desktop tidak akan hilang dan tetap diarahkan ke website versi mobile.

User dan komunitas Bootstrap semakin berkembang. Developer dan designer website bisa bertukar informasi dan juga berdikusi mengenai patch framework terbaru.

3 File Utama Bootstrap

Karena berisikan sekumpulan sintaks yang menjalankan fungsi spesifik, Bootstrap memiliki berbagai tipe file di dalamnya. Berikut tiga file utama yang mengelola interface user dan fungsionalitas website.

Bootstrap.css

Bootstrap.css adalah framework yang mengatur dan mengelola layout website. HTML mengatur konten dan struktur halaman web, sedangkan CSS berurusan dengan layout situs. Oleh karena itu, kedua struktur ini harus bekerja bersama-sama untuk melakukan tindakan tertentu.

Dengan CSS, Anda bisa menghadirkan tampilan yang seragam di banyak halaman website. Semua ini berkat keberadaan fungsinya. Anda pun tak perlu lagi menghabiskan waktu berjam-jam lamanya hanya untuk mengubah, misalnya, lebar desain.

Jika menggunakan CSS, yang perlu dilakukan adalah merujuk atau mengarahkan halaman web ke file CSS. Nantinya semua perubahan dapat dilakukan di satu file saja.

Fungsi CSS tidak terbatas hanya di gaya teks saja, tetapi juga dapat digunakan untuk membuat aspek lainnya di halaman web, seperti tampilan tabel dan gambar.

Sayangnya, CSS punya banyak declaration dan selector. Jadi, Anda butuh waktu untuk mengingat keduanya.

Bootstrap.js

File ini merupakan bagian inti dari Bootstrap. Di dalamnya terdapat file JavaScript yang bertanggung jawab atas interaktivitas website.

Developer menggunakan jQuery untuk menghemat waktu karena tidak perlu menulis sintaks JavaScript berulang kali. jQuery sendiri adalah open source yang populer dan juga library JavaScript lintas platform yang memperbolehkan usernya untuk menambah berbagai fungsionalitas ke website.

Berikut contoh fungsi dan kegunaan jQuery:

  • Menjalankan permintaan Ajax, seperti mengurangi (subtract) data dari lokasi lain secara dinamis.
  • Membuat widget menggunakan koleksi plugin JavaScript.
  • Membuat animasi menggunakan CSS property.
  • Membuat konten website terlihat lebih dinamis.

Walaupun Bootstrap dengan CSS property dan elemen HTML-nya bisa berfungsi normal, tetap saja framework ini mebutuhkan jQuery untuk membuat desain yang responsif. Jika tidak, Anda hanya bisa menikmati CSS yang statis dan datar.

Untuk informasi selengkapnya tentang jQuery, Anda bisa membaca artikel ini.

Glyphicons

Ikon berperan penting pada front-end website. Bahkan terkadang ikon dikaitkan dengan tindakan tertentu serta data yang ada di dalam interface user. Untuk task ini, Bootstrap menggunaan Glyphicons.

Bootstrap menawarkan Glyphicons Halflings yang bisa dipakai secara gratis. Versi gratisnya punya tampilan yang standard tapi sudah lebih dari cukup dengan adanya fungsi-fungsi yang penting.

Jika menginginkan ikon yang lebih stylish, Glyphicons menyediakan berbagai set premium yang akan membuat website terlihat lebih menarik dan juga sesuai dengan niche.

Masing-masing ikon serta ikon yang dikhususkan untuk suatu tema dapat diunduh secara gratis di sejumlah website, seperti Flaticon, GlyphSearch, dan Icons8.

Tampilan sebagian ikon dapat dimodifikasi dengan CSS, sedang sebagian lainnya sudah default. Pilih dan gunakan ikon yang sesuai dengan konsep dan tema website.

Cara Menggunakan Bootstrap

Lihat contoh di bawah ini untuk mendapatkan gambaran bagaimana cara menggunakan Bootstrap.

<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

Pengkodean (encoding) untuk dokumen HTML. Untuk contoh di atas, UTF-8 mengacu pada Unicode.

meta charset="utf-8"

Tentukan karakter yang digunakan untuk menulis website.

meta http-equiv="X-UA-Compatible"

Tentukan versi Internet Explorer yang akan me-render halaman. Dengan mode Edge, IE diatur agar menggunakan mode paling tinggi.

meta name="viewport"

Pastikan halaman memiliki ratio 1:1 dengan ukuran viewport.

link href="css/bootstrap.min.css" rel="stylesheet"

Di bagian ini tambahkan Bootstrap core CSS.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

Muat jQuery melalui Google CDN. jQuery lebih baik dimuat dari CDN melalui HTTP karena file-nya dapat di-cache untuk setahun.

src="js/bootstrap.min.js

Tambahkan Bootstrap core JavaScript. Peletakan sintaks ini harus selalu di bawah atau setelah jQuery sintaks agar bisa berfungsi dengan baik. Proses lainnya dapat dilakukan melalui URL Google atau unduh manual.

Kesimpulan

Bootstrap adalah framework front-end gratis yang belakangan ini semakin populer di kalangan front-end developer. Selain mudah digunakan, framework ini juga mempersingkat pekerjaan developer sehingga tidak perlu menulis sintaks secara manual dan berulang kali.

Framework ini juga fleksibel dan mendukung hampir semua keperluan pengembangan front-end website. Fungsi Bootstrap tidak terbatas pada tampilan website yang menarik saja, tapi juga memberikan fitur responsif agar halaman website bisa bekerja secara optimal di semua ukuran layar perangkat.

Sekarang Anda sudah mengetahui pengertian Bootstrap dan cara menggunakannya. Inilah saat yang tepat untuk mulai memakainya!

Penulis

Author

Ariata C. / @ariata

Ariata suka sekali menulis dan menerjemahkan, dan sekarang ini bekerja sebagai translator di Hostinger Indonesia. Lewat artikel dan tutorial yang diterbitkan di blog Hostinger, Ariata ingin membagikan pengetahuan tentang website, WordPress, dan hal terkait hosting lainnya kepada para pembaca.

Tutorial terkait

Ketik balasan

Komentar*

Nama*

Email*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Jadilah bagian dari Hostinger!