Iklan

›
Home  ›  Pengetahuan

Pengertian dan Cara Menggunakan Bootstrap

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.

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,
  1. // Install Bootstrap menggunakan Bower
  2. bower install bootstrap
  3. // Install Bootstrap menggunakan NPM
  4. npm install bootstrap
  5. // Install Bootstrap menggunakan Composer
  6. composer require twbs/bootstrap

Menggunakan Bootstrap CDN:
  1. <!-- Letakkan di dalam tag <head> -->
  2. <!-- Bootstrap CSS -->
  3. <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).
  • 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.
    1. <!-- Letakkan didalam tag <head> -->
    2. <link href="direktori/css/bootstrap.min.css" rel="stylesheet">
    3. <script src="direktori/js/bootstrap.min.js"></script>

    Contoh Penggunaan Bootstrap

    1. <h1>Pengertian dan Cara Menggunakan Bootstrap | codelatte.org</h1>
    2. <button type="button" class="btn btn-primary">Primary</button>
    3. <button type="button" class="btn btn-secondary">Secondary</button>
    4. <button type="button" class="btn btn-success">Success</button>
    5. <button type="button" class="btn btn-danger">Danger</button>
    6. <button type="button" class="btn btn-warning">Warning</button>
    7. <button type="button" class="btn btn-info">Info</button>
    8. <button type="button" class="btn btn-light">Light</button>
    9. <button type="button" class="btn btn-dark">Dark</button>
    10. <button type="button" class="btn btn-link">Link</button>

    Hasilnya akan menjadi seperti ini:
    See the Pen Pengertian dan Cara Menggunakan Bootstrap by Abay (@abaykan) on CodePen.
    Demikian artikel tentang Pengertian dan Cara Menggunakan Bootstrap. Pada artikel selanjutnya kita akan belajar lebih dalam tentang Bootstrap.
    Sumber : https://codelatte.org

    Article Top Ads

    Central Ads Article 1

    Middle Ads Article 2

    Article Bottom Ads