Tutorial penggunaan bootstrap untuk membuat website

Bootstrap adalah salah satu framework yang dikhususkan untuk pengembangan tampilan pada website, Bootstrap dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter pada tahun 2011. Pada saat ini Bootstrap telah berevolusi dari sebuah proyek yang hanya berbasis CSS menjadi sebuah tool ataupun framework yang lebih lengkap juga berisi Javascript Plugin, Icon, Forms dan Button.

Dengan bantuan Bootstrap, kita bisa membuat tampilan website yang responsive dengan cepat, mudah dan dapat berjalan sempurna pada browser-browser popular seperti Chrome, Firefox, Safari, Opera dan Internet Explorer. Sesuai dengan judul yakni Tutorial penggunaan bootstrap untuk membuat website maka langsung saja ke topik pembahasan.

Sebenarnya sangat mudah untuk penggunaan bootstrap, tentu saja tutorial kali ini untuk awam saja. bagi yang sudah faham skip aja ke artikel saya yang lain. 🙂

Cara penggunaan bootstrap yakni yang pertama kalian download dahulu file bootstrapnya di website resmi bootstrap getbootstrap.com Atau klik disini. Silahkan pilih versi bootstrapnya sampai pada saat ini(12/maret/2020) versi bootstrap yang terbaru rilis adalah versi 4.4, lihat screenshot dibawah.

1-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

2-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

3-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Jika sudah selesai terdownload silahkan diekstrak dahulu sprti screenshot di bawah ini

4-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

5-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Setelah diekstrak akan ada folder baru,

6-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Sekarang rename folder hasil ekstrak menjadi folder “assets” agar lebih mudah pemanggilannya di html

7-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

8-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Sekarang pindah folder “assets” tadi ke localhost/website kalian sebagai contohnya saya akan menggunakan bootstrap saya di localhost, pada contoh kali ini saya memulai website baru dan menggunakan bootstrap untuk desainnya, jadi pertama kali saya akan membuat file “index.php” dengan isi kode berikut :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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="assets/css/bootstrap.min.css" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

Dan coba kita jalankan

9-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Kita sudah berhasil menggunakan bootstrap, jika tanpa bootstrap tampilan akan seperti dibawah ini.. fonts akan terlihat polos

10-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Tinggal kita selanjutnya akan membuat design seperti apa, saya akan contohkan sedikit tentang cara penggunaannya. Kita akan membuat desain sederhana seperti ini

desain-bootstrap-sederhana-dekstop-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Yang pertama kita akan bagian membuat header / navbar

header-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Edit file index.php tadi yang sudah kita buat, hapus code <h1>Hello, world!</h1>
kemudian ganti dengan kode navbar yang sudah disediakan di dokumen bootstrap atau klik Disini, copy kemudian paste di bawah tag <body> sprti di dibawah ini

copy-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

paste-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Ganti “navbar-light bg-light” menjadi navbar-dark bg-dark dan btn-outline-success menjadi btn-primary fungsinya untuk mengubah warna background saja, tidak diganti juga gpp hehe. Sekarang jika kalian save dan kalian run seharusnya sudah muncul navbarnya. Selanjutnya kita buat layoutnya

body-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Yang pertama kalian buat dulu <div class=”container mt-5″> di bawah tag </nav> sprti di gambar

container-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Fungsi div container yakni untuk memberi area body content atau kalian bisa baca langsung keterangannya di bootstrap dokumen Disini, Saya tambahkan class “mt-5” yang artinya “margin top = 5” agar membuat spasi dari navbar. Langkah selanjutnya yakni kita membuat area sisi kanan dan kiri

kiri-kanan-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Pada area dalam container kita buat class <div class=”row”> ,Kemudian <div class=”col-lg-8″></div> untuk membuat sisi kiri dan <div class=”col-lg-4″> untuk membuat sisi kanan seperti yang dicontohkan pada dokumen bootstrap disini

row-dalamcontainer-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Jika kita jalankan dibrowser maka kita sudah membuat sisi kanan dan kiri tetapi belum ada isi kontennya, Sekarang kita buat dulu content sisi kiri dan kanan.. Yang kiri kita isi dengan card sprti yang sudah disediakan di dokumen bootstrap disini, copy code htmlnya sprti di screenshot

copycard-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Paste kedalam area <div class=”col-lg-8″></div> hapus atribut style=”width: 18rem;” atau tidak dihapus juga bisa tetapi tampilan akan berjejer ke samping, disini saya membuat 2 card list jadi saya paste 2 kali, oiya untuk gambarnya di isi terserah kalian saja,

sisikiri-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Sisi kiri sudah jadi selanjutnya kita isi sisi kanan dengan listgroup, lihat document bootstrapnya disini, copy codenya sprti tadi

copylistgroup-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Kemudian paste ke dalam area <div class=”col-lg-4″> ,karena saya membuat dua list jadi saya copykan 2 kali

pastelistgroup-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Setelah sisi kanan kita isi coba kita akses..

sudahjadi-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Sudah jadi bukan? tanpa repot2 kita membuat file css. Oh iya, tambahkan dahulu 2 baris script sprti screenshot di bawah ini agar dropdown navbarnya berfungsi.

script-scr-tutorial-penggunaan-bootstrap-untuk-membuat-website-lamongandev.com

Jadi keseluruhan scriptnya seperti dibawah ini,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!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="assets/css/bootstrap.min.css" crossorigin="anonymous">

    <title>Belajar bootstrap</title>
  </head>
  <body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-primary my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
 </nav>  

   <div class="container mt-5">

        <div class="row">
          <div class="col-lg-8">
            <!-- sisi kiri -->

            <div class="card">
              <img class="card-img-top" src="https://files.ariefendi.me/d/700x400imageblank.png" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>

            <div class="card mt-3">
              <img class="card-img-top" src="https://files.ariefendi.me/d/700x400imageblank.png" alt="Card image cap">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
           
          </div>

          <div class="col-lg-4">
            <!-- sisi kanan -->

            <ul class="list-group">
              <li class="list-group-item active">Cras justo odio</li>
              <li class="list-group-item">Dapibus ac facilisis in</li>
              <li class="list-group-item">Morbi leo risus</li>
              <li class="list-group-item">Porta ac consectetur ac</li>
              <li class="list-group-item">Vestibulum at eros</li>
            </ul>

            <ul class="list-group mt-5">
              <li class="list-group-item active">Cras justo odio</li>
              <li class="list-group-item">Dapibus ac facilisis in</li>
              <li class="list-group-item">Morbi leo risus</li>
              <li class="list-group-item">Porta ac consectetur ac</li>
              <li class="list-group-item">Vestibulum at eros</li>
            </ul>

          </div>
        </div>
   </div>
 



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="assets/js/bootstrap.js"></script>
     <script src="assets/js/bootstrap.min.js"></script>
  </body>
</html>

Tentu saja script diatas sudah otomatis responsive pada tampilan mobile.!

Jadi intinya adalah kita tidak perlu repot2 menulis banyak code html maupun cssnya, karena bootstrap sudah menyediakannya script maupun tutorial pada dokumennya, tinggal kita fahami lalu copy scripnya dan modif bila perlu.