Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan.
Bootstrap merupakan framework untuk membangun desain web secara responsif dan cepat. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Sehingga, user akan mendapatkan pengalaman yang lebih baik dalam berselancar tanpa mempertimbangkan perangkat apa yang harus digunakan, dan apabila kita menggunakan bootstrap, kita tinggal menggunakan nama class (untuk css) dan library (javascript) yang sudah ditentukkan oleh bootstrap tanpa perlu menulis kode dari 0 (awal) sehingga, bisa menghemat waktu dalam pengembangan website untuk urusan UI (User Interface). Bootstrap memiliki tampilan yang indah dan dapat di customisasi.
Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis, tentunya harus didukung dengan teknologi lain dalam pengembangannya.
Cara menggunakan Bootstrap
- Bootstrap v4.4.1
Anda harus memiliki file distribusi Bootstrap Download dapat dikunjungi pada artikel sebelumnya atau dapat di download pada situs resmi bootstrap https://getbootstrap.com/
- Code editor atau PHP editor
Anda harus memiliki code editor contoh Notepad ++, Macromedi Dreamweaver all versi, sublime text dsb.
- Xampp
Setelah semua dipersiapkan saatnya memulai untuk belajar bootstrap. Baik, ikuti tahap-tahapnya berikut ini:
- Buat Folder BaruBuatlah folder baru, beri nama "Belajar_Bootstrap".
- Copy seluruh file Bootstrap ke dalam Folder Baru TersebutCopy folder css, dan js yang ada pada Bootstrap yang telah kita download tadi, ke dalam folder baru tersebut (Belajar_Bootstrap)
- Buat file HTMLBuat file baru di notepadd++ (atau code editor kesayangan Anda) kemudian copy code snippet yang saya sediakan dibawah ini, kemudian save dan berilah nama: index.html dan simpanlah file tersebut ke folder "Belajar_Bootstrap" yang telah dibuat diatas. Berikut kodenya:
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <h1>Hello, world!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html> Uji Coba
ketik pada url :localhost/Belajar_Bootstrap/index.html dan pastikan xampp berjalan pada MySQL dan Apache.
- Struktur File dan folder
Setelah Anda melakukan langkah-langkah yang telah dijabarkan di atas, maka file dan folder seharusnya mengikuti struktur sebagai berikut:
Belajar_Bootstrap/
├── index.html
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── 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
├── 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
│ └── jquery-3.3.1.min.js