Pengertian dan Cara Menggunakan Bootstrap – Bootstrap adalah framework yang digunakan untuk mempermudah dan mempercepat pembuatan halaman website. Mengapa bisa mempercepat dan mempermudah? Karena Bootstrap menyediakan CSS dan Javascript yang sangat mudah dikembangkan.
Pada artikel mendatang, kita akan belajar lebih dalam tentang Bootstrap. Namun, sebelum kita mulai, tentu saja kita harus mengetahui apa itu Bootstrap dan kelebihan – kelebihan nya.
Baca juga: Cara Membuat Website dan Toko Online, Gratis!
Kelebihan Bootstrap
Banyak dari kita bertanya – tanya kenapa sangat banyak yang menggunakan Bootstrap dalam membuat website. Berikut adalah kelebihan – kelebihan Bootstrap yang menjadikan banyak yang menggunakannya dalam pembuatan website:
- Menggunakan Bootstrap akan menghemat waktu.
- Mobile Friendly.
- Tampilan yang Modern.
- Responsive design.
Cara Menggunakan Bootstrap
Ada beberapa cara untuk menggunakan Bootstrap, seperti menginstall dengan menggunakan Bower, Composer, NPM, atau menggunakan Bootstrap CDN agar lebih mudah. Berikut adalah contoh perintah untuk menginstall bootstrap,
[js]
// Install Bootstrap menggunakan Bower
bower install bootstrap
// Install Bootstrap menggunakan NPM
npm install bootstrap
// Install Bootstrap menggunakan Composer
composer require twbs/bootstrap
[/js]
Menggunakan Bootstrap CDN:
[html]
[/html]
Kita juga bisa mendownload file Bootstrap di (getbootstrap.com).
- Download file di getbootstrap.com
- Ekstrak file zip yang sudah didownload. Kira – kira file list file nya seperti ini.
bootstrap/ └── dist/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map
Setelah itu kita panggil file – file tersebut.
[html]
[/html]
Contoh Penggunaan Bootstrap
[html]
Pengertian dan Cara Menggunakan Bootstrap | codelatte.id
[/html]
Hasilnya akan menjadi seperti ini:
See the Pen Pengertian dan Cara Menggunakan Bootstrap by Abay (@abaykan) on CodePen.
Bootstrap pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan bootstrap sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat.
Untuk meng-online kan hasil coding kalian, tentunya kalian membutuh kan domain, kan? Jangan sampai membeli domain pada tempat yang salah! Untuk membeli domain dengan kualitas yang terjamin, aktivasi instan dan fitur – fitur menarik lainnya, saya sarankan kalian beli domain murah pada situs yang terpercaya.
Demikian artikel tentang Pengertian dan Cara Menggunakan Bootstrap. Pada artikel selanjutnya kita akan belajar lebih dalam tentang Bootstrap.
Bagi kalian yang bingung menggunakan class pada Bootstrap, bisa melihat list nya yang sudah saya sediakan di arc.codelatte.id/bs-cheatsheet.
Mantep artikelna kang. Lengkaaap
Kalau mau menggunakan secara offline caranya gimana?
Untuk penggunaan secara offline, bisa download file bootstrap nya.
gw ga ngerti 🙁
Buatin yang framework materializenya juga dong huuu
cukup membantu
Menurut ane ni web,terlalu membantu
bagus
keren
Sangat membantu sekali, gampang dipahami bagi pemula seperti saya, ditunggu artikel terbarunya gan👍
Mantap gan
Terimakasih untuk artikelnya, bagus dan sangat bermanfaat, tetap semangat ya kak