Pengertian dan Kegunaan Bootstrap Menurut Para Ahli

Apa itu Bootstrap?

Menurut para ahli mengatakan bahwa, Bootstrap adalah kerangka kerja front-end gratis untuk pengembangan web yang lebih cepat dan mudah. Bootstrap mencakup template desain berbasis HTML dan CSS untuk tipografi, bentuk, tombol, tabel, navigasi, modals, korsel gambar dan banyak lainnya, serta plugin JavaScript opsional. Bootstrap juga memberikan sobat kemampuan untuk membuat desain responsif dengan mudah.

Apa itu Desain Web Responsif?

Desain web responsif adalah perihal yang terkait tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.

Bootstrap sendiri dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada Agustus 2011 di GitHub dan pada bulan Juni 2014 Bootstrap adalah proyek No.1 di GitHub!

Nah, apa saja keuntungan jika menggunakan Bootstrap?

Mudah digunakan dan siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap. Salah satu fitur responsif pada Bootstrap adalah,dapat menyesuaikan dengan ponsel, tablet, dan desktop.

Dalam Bootstrap 3, gaya seluler pertama adalah bagian dari kerangka inti Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan Opera).

Di mana tempat mendapatkan Bootstrap? Ada dua cara untuk mulai menggunakan Bootstrap di situs web kalian sendiri yaitu:

Kalian bisa mengunduh Bootstrap dari Getbootstrap dan sertakan Bootstrap dari CDN. Bilamana kalian ingin mengunduh dan menginangi Bootstrap sendiri, buka Getbootstrap kembali, dan ikuti petunjuk di sana.

Atau jika kalian tidak ingin mengunduh dan menginangi Bootstrap sendiri, kalian dapat menyertakannya dari CDN (Jaringan Pengiriman Konten).

MaxCDN menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Kalian juga harus menyertakan jQuery seperti berikut:

Contoh MaxCDN:

CSS:

< link rel = " stylesheet " href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " >

JQUERY:

< script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / script >

JAVASCRIPT:

< script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " > < / script >

Sudah banyak para pengembang dan pengguna lainnya yang telah memanfaatkan dan juga mengunduh Bootstrap dari MaxCDN.

JQuery

Bootstrap menggunakan jQuery untuk plugin JavaScript (seperti modals, tooltips, dll). Namun, jika kalian hanya menggunakan bagian CSS dari Bootstrap, kamu tidak perlu jQuery.

Contoh Membuat Suatu Halaman Web Pertama Dengan Bootstrap.

Tambahkan Doctype HTML5.

Bootstrap menggunakan elemen HTML dan properti CSS yang memerlukan doctype HTML5.

Selalu sertakan doctype HTML5 di awal halaman, bersama dengan atribut lang dan set karakter yang benar:

Sebagai contohnya:

< html lang = "en" >

< head >

< meta charset = "utf-8" >

< meta content = " width=device-width, initial-scale=1 " name = " viewport " >

< link rel = " stylesheet " href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " >

< script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < / script >

< / head >

< body >

< h1 >< / h1 >

< p >< / p >

< script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js " > < / script >

< / body >

< / html >

Bootstrap 3.

Bootstrap 3 ini sudah dirancang khusus untuk responsif terhadap perangkat seluler. Gaya pertama seluler adalah bagian dari kerangka inti.

Untuk memastikan rendering yang tepat dan menyentuh zoom, tambahkan tag:

 < meta > berikut di dalam elemen < head >:

< meta name = " viewport " content = " width = device-width, initial-scale = 1" >

Width = bagian lebar perangkat menetapkan lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

Initial-scale = 1 adalah suatu bagian untuk menetapkan tingkat zoom awal ketika halaman pertama kali dimuat oleh browser.

Dan yang terakhir,

Wadah

Bootstrap juga membutuhkan wadah elemen yang mengandung untuk membungkus isi situs.

Ada dua class container untuk dipilih:

Yang saya ketahui, class container ini menyediakan wadah lebar tapi tetap responsif. Sedangkan class container-fluida menyediakan wadah lebar penuh, yang mencakup keseluruhan lebar viewport.

Itulah sedikit pembahasan kali ini tentang, Pengertian dan Kegunaan Bootstrap Menurut Para Ahli. Sedikit kurangnya mudah-mudahan informasi ini dapat bermanfaat.

Akhir kata saya ucapkan, terimakasih.