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.
Jika sudah selesai terdownload silahkan diekstrak dahulu sprti screenshot di bawah ini
Setelah diekstrak akan ada folder baru,
Sekarang rename folder hasil ekstrak menjadi folder “assets” agar lebih mudah pemanggilannya di html
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
Kita sudah berhasil menggunakan bootstrap, jika tanpa bootstrap tampilan akan seperti dibawah ini.. fonts akan terlihat polos
Tinggal kita selanjutnya akan membuat design seperti apa, saya akan contohkan sedikit tentang cara penggunaannya. Kita akan membuat desain sederhana seperti ini
Yang pertama kita akan bagian membuat header / navbar
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
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
Yang pertama kalian buat dulu <div class=”container mt-5″> di bawah tag </nav> sprti di gambar
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
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
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
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,
Sisi kiri sudah jadi selanjutnya kita isi sisi kanan dengan listgroup, lihat document bootstrapnya disini, copy codenya sprti tadi
Kemudian paste ke dalam area <div class=”col-lg-4″> ,karena saya membuat dua list jadi saya copykan 2 kali
Setelah sisi kanan kita isi coba kita akses..
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.
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.
