Belajar Web Design : Mengenal Bootstrap

Belajar Web Design

Pada postingan kali ini, kita akan membahas tentang Bootstrap.

Apakah itu Bootstrap???

Oke, Bootstrap adalah sebuah framework yang dibuat untuk mempermudah dalam membuat tampilan sebuah website.

Bootstrap ini bisa dibilang seperti template yang sudah jadi dan siap pakai hingga customnya.

Jadi, dengan bantuan dari Bootstrap bisa menjadikan pembuatan website lebih efektif dan efisien.

Bootstrap ini juga dilengkapi dengan JQuery dan Poper, yaitu library dari Javascript.
Sehingga menungkinkan konten dalam website memiliki efek-efek khusus alias websitenya jadi lebih hidup keliatannya.

Bahkan, bukan cuma itu aja.

Bootstrap juga sangat responsive, jadi tampilan websitenya bisa berubah menyesuaikan ukuran perangkat apapun yaitu laptop, tablet, maupun smartphone.

Instalasi Bootstrap

Untuk memulai pembuatan web menggunakan Bootstrap ini kita bisa kunjungi situs web resminya yaitu disini (https://getbootstrap.com/).

Seperti gambar di atas, tepatnya halaman awal Bootstrap.

Disitu kita lihat ada dua menu tombol yang besar, yaitu “Get Started” dan “Download”.

Pada menu “Get Started”, isinya adalah dokumentasi dari penggunaan Bootstrap.

Bahkan langkah Instalasinya ada pada menu “Get Started” ini.

Lalu pada menu “Download”, kita bisa download file-file pendukung Bootstrap.

Jadi, kalo mau menggunakan Bootstrap dengan cara offline, bisa klik pada menu “Download”.

Tapi jika mau online, ikuti aja instruksinya pada menu “Get Started” atau “Documentation” pada atas menu.

-Cara Online

Dengan cara ini, memang agak menghemat ruang memori pada project.

Hanya aja, dengan cara ini kitanya harus tetap terhubung ke internet.

Minimal jaringan wifi gitu.

  1. Klik menu “Get Started” atau “Documentation”.

2. Pada menu ini, terdapat langkah-langkah pemasangan.
Tapi untuk mempercepat pemasangannya, ada jalan pintasnya yaitu klik aja menu “Starter Template” pada menu sebelah kanan.

3. Klik copy.

4. Buat file dengan format HTML, lalu paste script yang tadi kita copy dari Bootstrap.

<!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.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Belajar Bootstrap</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

5. Dari script kode tersebut, maka akan tampil seperti berikut ini.

Cara Offline

Cara offline, disini kita harus download komponen-komponen pendukung Bootstrap.

Dengan cara ini, kita bisa gunakan Bootstrap dalam keadaan tidak terkoneksi dengan internet.

  1. Kunjungi websitenya (https://getbootstrap.com/). Lalu klik “Download”.

2. Klik “Download” seperti tanda panah merah.

3. Ekstrak Here pada file “.zipnya”. Disitu ada folder yaitu “css” dan “js”.

4. Copykan kedua folder tersebut dalam project kita.

5. Pada folder tersebut, tidak ada file “jquery.js” dan “poper.js”. Maka dari itu, kita bisa mendownloadnya pada situs resminya masing-masing.

6. Jika sudah dapat, tinggal panggil semua file pendukungnya. Seperti berikut ini.

<!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="css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Belajar Bootstrap</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

7. Maka hasilnya juga sama.

Gimana??? Mudah kan???

Selamat mencoba dan semoga bermanfaat, ya.

No related posts.