Pengertian Bootstrap

Bootstrap merupakan sebuah library atau kumpulan dari berbagai fungsi yang terdapat di framework CSS dan dibuat secara khusus di bagian pengembangan pada front-end website.Bootsrap termasuk ke dalam salah satu dari framework HTML,Javascript dan juga CSS yang sangat populer pada ranah web developer.

Perkembangan Bootstrap

Awalnya Bootstrap dikembangkan oleh pekerja atau programmer Twitter,yakni : Mark Octo dan Jacob Thornton sejak Tahun 2011.Pada waktu itu,programmer di Twitter menggunakan berbagai alat dan perpustakaan yang dikuasai untuk melakukan pekerjaan mereka,sehingga tidak ada standardisasi dalam penamaan kelas.Akibatnya sulit untuk dikelola,karena itu keduanya membuat alat atau kerangka kerja yang digunakan bersama di lingkungan internal Twitter.Sejak diluncurkan pada Bulan Agustus 2011,bootstrap sudah berkembang dari proyek berbasis CSS menjadi kerangka kerja yang lebih lengkap dan juga berisi plugin javascript,ikon,formulir dan tombol.

Pada Bulan Januari 2012,Bootstrap rilis Version 2.0, yang menyertakan fitur tata letak responsif dan sejak itu Bootstrap telah banyak digunakan sehingga menjadi proyek Github yang disalin dengan berat hingga 20.000 kali.Pada Bulan Agustus 2014,bootstrap kembali merilis versi terbaru, versi 3.0 yang telah mengakomodasi konsep mobile terlebih dahulu.Yang berarti dalam pembuatan dan pengembangan layar terkecil terlebih dahulu (mobile atau smartphone) dan secara bertahap di layar terbesar.Dan bootstrap merilis lagi versi 4.0 (sebelumnya pada tahun 2017 versi beta telah dirilis)sebagai penyempurnaan dokumentasi dan untuk menambahkan beberapa fitur tambahan yang saat ini sedang booming,yaitu dengan memberikan tampilan yang lebih baik untuk pengembang e-commerce dan lebih stabil,dengan ini maka versi 2.0 dan 3.0 tidak akan lagi didukung atau diperbarui dalam penggunaannya.

Fungsi Bootstrap

Bootstrap memiliki fungsi yang tentunya akan memudahkan pekerjaan kalian dalam memproses situs web.Beberapa fungsi yang dimiliki oleh bootstrap yakni :

• Bootstrap membantu dalam membuat dan merancang situs web cepat dan responsif.Artinya,tampilan web yang dibangun memakai bootstrap akan secara otomatis menyesuaikan ukuran layar di browser.
• Bootstrap membantu dalam menciptakan dan mengembangkan situs web yang dinamis atau statis,hanya perlu menentukan sesuai dengan kebutuhan kalian.
• Bootstrap menyediakan berbagai antarmuka kelas yang berguna untuk membantu situs web menjadi ringan dan cepat saat diakses.
• Boostrap membantu dalam membuat pengaturan tata letak halaman di situs web.Ini karena bootstrap dilengkapi dengan fitur yang disebut kisi.
• Dapat langsung menambahkan CSS dan kelas sendiri.Dengan begitu,bisa mendesain situs web sehingga memiliki tampilan yang lebih bervariasi.

Kelebihan Bootstrap

Kelebihan yang dimiliki oleh Bootstrap,yakni :

• Digunakan untuk membantu mempercepat saat membuat front-end di situs web.
• Memiliki tampilan modern sehingga dapat membuat situs web kalian memiliki penampilan yang menarik.
• Membuat situs web kalian terlihat lebih responsif.Jadi,ketika menggunakan ponsel cerdas atau komputer untuk membuat situs web,itu akan menyesuaikan dengan ukuran layar.
• Membuat situs web lebih ringan saat dibuka.Jadi mereka yang ingin mengakses situs web tidak perlu menunggu lama.Ini karena sebelumnya proses bootstrap dilakukan dengan rapi dan sistematis.
• Dengan bootstrap,bisa mendapatkan semua jenis warna,operasi penggunaan dan juga berbagai variabel yang kalian butuhkan.Jadi,tidak perlu khawatir karena hasilnya tentu tidak akan berbeda ketika membukanya di perangkat yang berbeda.
• Dikenal lebih lengkap,ini karena termasuk CSS,HTML dan Javascript.
• Open source,artinya tidak perlu harus mendapatkan lisensi dan bahkan dapat mengembangkan situs web kalian sesuai dengan kebutuhan atau kebutuhan kalian.
• Kerangka kerja yang dimiliki menggunakan Less,yakni Less adalah teknologi dari CSS yang terkenal dengan kesederhanaannya.

Kekurangan Bootstrap

Meski memiliki kelebihan,tentunya bootstrap memiliki kekurangan yakni :

• Karena menggunakan CSS3, bootstrap minimal.
• Karena terlalu fokus pada pengkodean,sehingga membuat kalian kurang kreatif mendesain situs web sesuai dengan yang di inginkan.
• Bootstrap tampaknya tidak dapat menampilkan situs web yang sama di semua browser.Maka hanya browser tertentu yang menunjukkan situs web boostrap sesuai ukurannya dengan layar dari perangkat yang dipakai.

Contoh Website Menggunakan Bootstrap

Bootstrap mendapatkan reputasi sebagai framework yang bagus bukan tanpa alasan.Lihat saja contoh beberapa web terkenal yang menggunakan bootstrap :

• creative-tim. com
• pixelsvibe. com
• resto-elephant. com
• mpoweryogastusio. com
• twitter. com
• lyft. com
• meteor. com
• mapsconnect.apple. com
• vogue. com
• wire. com

Fitur Bootstrap

• Penggunaan ulang komponen-komponen

Selain elemen HTML reguler,Bootstrap juga berisi elemen antarmuka yang umum digunakan.Komponen tersebut diimplementasikan dalam bentuk “class” CSS, yang harus diaplikasikan dalam elemen HTML tertentu pada halaman situs web.

• Komponen-komponen JavaScript

Bootstrap dilengkapi beberapa komponen JavaScript dalam bentuk plugin jQuery,mereka menyediakan tambahan elemen antarmuka untuk pengguna seperti : kotak dialog,tooltips dan carousels.Mereka juga memperluas fungsi dari beberapa elemen antarmuka yang sudah ada, termasuk sebuah fungsi auto-complete untuk bidang input.Di versi 1.3,plugin JavaScript berikut ini didukung oleh Bootstrap : Modal, Dropdown,Scrollspy,Tab,Tooltip,Popover,Alert,Button,Collapse,Carousel dan Typeahead.

Tiga File Utama Bootstrap

Berisi 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

Merupakan framework yang mengatur dan mengelola layout website.HTML mengatur konten dan struktur halaman web, sedangkan CSS berurusan dengan layout situs.Maka,kedua struktur ini harus bekerja bersama untuk melakukan tindakan tertentu.Dengan CSS,kalian bisa menghadirkan tampilan yang seragam di banyak halaman website.Semua ini berkat keberadaan fungsinya.Kalian juga tidak perlu lagi menghabiskan waktu berjam-jam untuk mengubahnya,misal : lebar desain.Jika menggunakan CSS, yang harus 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,namuan juga dapat digunakan untuk membuat aspek lainnya di halaman web,seperti  : tampilan tabel dan gambar.Namuan,CSS punya banyak declaration dan selector.Jadi,butuh waktu untuk mengingat keduanya.

• Bootstrap.js

Merupakan bagian inti dari Bootstrap,i 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 merupakan open source yang populer dan juga library JavaScript lintas platform yang memperbolehkan user untuk menambah berbagai fungsionalitas ke website.

Berikut beberapa 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.

Walau Bootstrap dengan CSS property dan elemen HTMLnya bisa berfungsi normal,namun framework ini tetap membutuhkan jQuery untuk membuat desain yang responsif.Jika tidak,kalian hanya bisa menikmati CSS yang statis dan datar.

• Glyphicons

Ikon berperan penting pada front-end website atau 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 gratis punya tampilan yang standard tapi sudah lebih dari cukup dengan adanya fungsi yang penting.Jika menginginkan ikon yang lebih stylish,Glyphicons menyediakan berbagai set premium membuat website terlihat lebih menarik dan sesuai dengan niche.Masing-masing ikon serta ikon yang dikhususkan untuk suatu tema dapat diunduh secara gratis di sejumlah website,seperti : Flaticon,Glyhsearch dan Icons8.Tampilan sebagian ikon dapat dimodifikasi dengan CSS,sedang sebagian lain sudah default.Pilih dan gunakan ikon yang sesuai dengan konsep dan tema website.

Cara Menggunakan Bootstrap

Contoh di bawah ini 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 vInternet Explorer yang me-render halaman.Dengan mode Edge,IE diatur agar menggunakan mode paling tinggi.

meta name=“viewport”

Pastikan halaman memiliki rasio 1:1 dengan ukuran viewport.

link href=“css/bootstrap.min.css” rel=“stylesheet”

Di bagian ini tambahkan Bootstrap core CSS.

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