Bootstrap 4 merupakan tool untuk membuat tampilan responsive menggunakan HTML, CSS dan JS. Pada artikel kali ini kita akan membahas mengenai instalasi Bootstrap 4.
Secara teknik file-file yang diperlukan untuk kita mengembangkan tampilan responsive menggunakan Bootsrap 4 adalah
- Pada head: CSS Bootstrap: bootstrap.min.css
- Pada akhir body:
– JS Jquery: jquery-3.3.1.slim.min.js
– JS Popper: popper.min.js
– JS Bootstrap: bootstrap.min.js
Selanjutnya silahkan download ke empat file di atas pada:
1. https://getbootstrap.com/docs/4.2/getting-started/download/
2. https://popper.js.org/ .
3. https://jquery.com/download/
4. https://unpkg.com/popper.js/dist/umd/popper.min.js
5. https://unpkg.com/popper.js/dist/umd/popper.min.js.map
Kemudian silahkan letakkan keempat file di atas pada project anda.
Source code untuk percobaan di atas adalah:
<!doctype html>
<html><head>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<link rel=”stylesheet” href=”/bootstrap/bootstrap.min.css”>
</head><body>
<div class=”alert alert-success”>
Halo Dunia
</div><script src=”/bootstrap/jquery-3.3.1.slim.min.js”></script>
<script src=”/bootstrap/popper.min.js”></script>
<script src=”/bootstrap/bootstrap.min.js”></script>
</body></html>
Contoh hasilnya dapat diakses di https://bs4.aris.proweb.asia/halo.html dengan tampilan seperti gambar di bawah ini:
Sedangkan tampilan mobile dalam smartphone adalah seperti gambar di bawah ini:
Berkaitan dengan popper maka silahkan membaca https://stackoverflow.com/questions/47549298/webpack-installing-bootstrap-missing-popper-js-map untuk instalasi propper-js-map.
Informasi lebih lanjut silahkan mengunjungi
1. https://getbootstrap.com/docs/4.2/getting-started/introduction/ .
2. https://getbootstrap.com/docs/4.2/getting-started/download/ .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.