Cara Menggunakan Bootstrap Beserta Pengertiannya

5/5 (39)

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,

// 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 -->

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> -->
<script src="direktori/js/bootstrap.min.js"></script>

Contoh Penggunaan Bootstrap

<h1>Pengertian dan Cara Menggunakan Bootstrap | codelatte.org</h1>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-light" type="button">Light</button>
<button class="btn btn-dark" type="button">Dark</button>
<button class="btn btn-link" type="button">Link</button>

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

3 tanggapan untuk “Cara Menggunakan Bootstrap Beserta Pengertiannya

  • 4 Agustus 2018 pada 5:36 AM
    Permalink

    Mantep artikelna kang. Lengkaaap

    Balas
  • 29 September 2018 pada 8:56 PM
    Permalink

    Kalau mau menggunakan secara offline caranya gimana?

    Balas
    • 29 September 2018 pada 9:00 PM
      Permalink

      Untuk penggunaan secara offline, bisa download file bootstrap nya.

      Balas

Tinggalkan Balasan

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