Apa Itu Bootstrap??
Bootstrap adalah open-source framework (kerangka kerja pemrograman) front-end (library) yang bebas (gratis) untuk merancang situs web dan aplikasi web. Framework ini berisi template desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. Tidak seperti kebanyakan framework web lainnya, framework ini hanya fokus pada pengembangan front-end saja.
2. Setelah proses download selesai. Lalu buat folder baru. Buka This PC > Local Disk (C:) > xampp > htdocs. Setelah itu buat new folder yaitu praktikum. Di dalam folder tersebut terdapat folder asset. Dan di dalam folder tersebut ada folder css dan js.
3. Buka Text editor, yaitu Sublime.
4. Save script di link bawah ini!!!
a. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css (save di folder css).
b. https://code.jquery.com/jquery-3.3.1.slim.min.js (save di folder js).
c. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js (save di folder js).
d. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js (save di folder js).
5. Setelah selesai kita men-save link yg diatas. Lalu kita buka Sublime > file > lalu buat script seperti dibawah ini!! Lalu save kan "index.php".
<!DOCTYPE html>
<html>
<head>
<title>praktikum</title>
<link rel="stylesheet" type="text/css" href="asset/css/coba.css">
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>
<h1>Yashhh</h1>
<script type="text/javascript" src="asset/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="asset/js/pooper.min.js"></script>
<script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
</body>
</html>
#Nb: Pastikan susunannya runtut!!
Dan tampilannya seperti dibawah ini~
6. Menambahkan grid pada program. Fungsinya yaitu untuk membagi wilayah antar kolom tersebut.
<!DOCTYPE html>
<html>
<head>
<title>praktikum</title>
<link rel="stylesheet" type="text/css" href="asset/css/coba.css">
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>
<h1>Yashhh</h1>
<div class="row">
<div class="col-6">Yashhh</div>
<div class="col-6"></div>
</div>
<script type="text/javascript" src="asset/js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="asset/js/pooper.min.js"></script>
<script type="text/javascript" src="asset/js/bootstrap.min.js"></script>
</body>
</html>
Sekian & Terimakasih
Wassalamu'alaikum...
Tidak ada komentar:
Posting Komentar