Pengertian dan Cara Menggunakan Bootstrap

5/5 (7)
Pengertian dan Cara Menggunakan Bootstrap
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.

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).

  • 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.

    <!-- 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:

    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.

    Bagi kalian yang bingung menggunakan class pada Bootstrap, bisa melihat list nya yang sudah saya sediakan di arc.codelatte.org/bs-cheatsheet.

    Please rate this

    Abay

    Cheers, I am Abay and I make things for fun. Gudang Garam and Coffee i can't live without. I love turning exciting ideas into horrible code. And .. i'm a lil' boy currently living Indonesia. Want to buy me a coffe? Let's talk, abay@codelatte.org

    Satu tanggapan untuk “Pengertian dan Cara Menggunakan Bootstrap

    • 4 Agustus 2018 pada 5:36 AM
      Permalink

      Mantep artikelna kang. Lengkaaap

      Balas

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *