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 Menggunakan Font Awesome.
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,
- // Install Bootstrap menggunakan Bower
- bower install bootstrap
- // Install Bootstrap menggunakan NPM
- npm install bootstrap
- // Install Bootstrap menggunakan Composer
- composer require twbs/bootstrap
Menggunakan Bootstrap CDN:
- <!-- Letakkan di dalam tag <head> -->
- <!-- Bootstrap CSS -->
- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
Kita juga bisa mendownload file Bootstrap di (getbootstrap.com).
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.
- <!-- Letakkan didalam tag <head> -->
- <link href="direktori/css/bootstrap.min.css" rel="stylesheet">
- <script src="direktori/js/bootstrap.min.js"></script>
Contoh Penggunaan Bootstrap
- <h1>Pengertian dan Cara Menggunakan Bootstrap | codelatte.org</h1>
- <button type="button" class="btn btn-primary">Primary</button>
- <button type="button" class="btn btn-secondary">Secondary</button>
- <button type="button" class="btn btn-success">Success</button>
- <button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-warning">Warning</button>
- <button type="button" class="btn btn-info">Info</button>
- <button type="button" class="btn btn-light">Light</button>
- <button type="button" class="btn btn-dark">Dark</button>
- <button type="button" class="btn btn-link">Link</button>
Hasilnya akan menjadi seperti ini:
Demikian artikel tentang Pengertian dan Cara Menggunakan Bootstrap. Pada artikel selanjutnya kita akan belajar lebih dalam tentang Bootstrap.
Sumber : https://codelatte.org
EmoticonEmoticon