composer require twbs/bootstrap
Install Bootstrap secara online
Install Bootstrap secara online menjadi salah satu opsi yang banyak dipilih oleh web developer. Pada cara ini file-file Bootstrap tersimpan di server luar. Di bawah ini ada tiga contoh untuk menginstall Bootstrap secara online. Anda bisa memilih salah satu dan meletakkannya di bagian <head> di halaman HTML Anda. Berikut syntax yang bisa Anda simak.
|
<!— Latest compiled and minified CSS —>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css” integrity=“sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7” crossorigin=“anonymous”>
<!— Optional theme —>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css” integrity=“sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r” crossorigin=“anonymous”>
<!— Latest compiled and minified JavaScript —>
<script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js” integrity=“sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS” crossorigin=“anonymous”></script>
|
Install Bootstrap secara offline
Selain secara online, install Bootstrap secara offline juga sering dilakukan oleh developer. Sebab dengan cara ini kita tetap bisa bekerja dengan Bootstrap walaupun tidak terhubung dengan internet. Sebab file framework Bootstrap sudah tersimpan pada PC kita.
Berbeda dengan cara online yang file-file Bootstrap-nya tersimpan di server luar sehingga kita membutuhkan koneksi internet untuk mengaksesnya. Caranya download framework CSS Bootstrap, lalu ekstrak pada project yang sedang Anda kerjakan. Contohnya http://localhost/contohsaja/bootstrap/.
Menghubungkan Bootstrap dengan HTML atau PHP
Setelah itu untuk menghubungkan Bootstrap buat file HTML atau PHP yang akan disambungkan dengan Bootstrap. Misalnya kita buat file dengan nama index.php.
Perlu diketahui bahwa Bootstrap membutuhkan jquery. Sebab bagian javascript Bootstrap menggunakan jquery. Sehingga jangan lupa untuk menambahkan file jquery pada folder js Bootstrap. Atau letakkan di sembarang tempat, asalkan direktori saat menghubungkan file CSS dan js nanti sesuai.
Berikut adalah kode yang perlu dimasukkan dalam file index.php:
|
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap</title>
<link rel=“stylesheet” type=“text/css” href=“css/bootstrap.css”>
<script type=“text/javascript” src=“js/jquery.js”></script>
<script type=“text/javascript” src=“js/bootstrap.js”></script>
</head>
<body>
<h1>Cara Menggunakan Bootstrap </h1>
<button class=“btn btn-danger”>TOMBOL MERAH</button>
<button class=“btn btn-primary”>TOMBOL BIRU</button>
</body>
</html>
|
Untuk menghubungkan file html atau php dengan Bootstrap.css kita gunakan kode:
<link rel=”stylesheet” type=”text/css” href=”css/bootstrap.css”>
Setelah itu hubungkan file html atau php dengan bootstrap.js dan jquery.js. Jangan lupa untuk meletakkan jquery.js pada bagian atas, sebab Bootstrap bekerja dengan bantuan jquery. Script yang perlu dimasukkan adalah sebagai berikut:
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/bootstrap.js”></script>
Perlu diketahui, class “btn” pada element <button> yang tertulis pada kode di atas merupakan class bootstrap yang dapat dipakai untuk membuat tombol. Sedangkan “btn-danger” dan “btn-primary” digunakan untuk menentukan warna tombol yang akan dibuat.
