- Bootstrap -
STEP 1. Mendownload Bootstrap
Langkah awal yang harus kita lakukan sebelum memulai pembahasan kali ini adalah mendownload framework Bootstrapnya terlebih dahulu, teman-teman dapat mendownloadnya dengan mengklik tombol download dibawah ini atau dapat langsung mengunjungi website resmi Bootstrap tersebut.
Setelah proses download selesai buka folder program teman-teman buat folder baru dengan nama "asset" dan buat di dalam folder assetnya folder "css" dan "js".
STEP 2. Menambahkan Css dan JavaScript
Pertama kita buka sublime kita dan buat script css terlebih dahulu,
body{color:grey;}
#Warna opsional :), save didalam folder css dengan format "mystyle.css"Setelah selesai, save code script yang ada dari ke-4 link dibawah ini
1. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css (save di folder css)
2. https://code.jquery.com/jquery-3.3.1.slim.min.js (save di folder js)
3. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js (save di folder js)
4. https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js (save di folder js)
Note: Pastikan susunan scriptnya berurutan seperti yang dicontohkan
STEP 3. Menambahkan Grid pada Program
Kita harus tau bahwasanya jumlah kolom keseluruhan layar browser kita adalah 12 kolom
Sekian tutorial dari saya, jika ada kesalahan mohon maaf (^.^)v.
Setelah selesai mendownload(men-save) code script diatas, buka "index.php" kita dan buat script seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
<link rel="stylesheet" type="text/css" href="asset/css/mystyle.css">
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>
<h1>Hei Dude</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>
Note: Pastikan susunan scriptnya berurutan seperti yang dicontohkan
STEP 3. Menambahkan Grid pada Program
Kita harus tau bahwasanya jumlah kolom keseluruhan layar browser kita adalah 12 kolom
Dan fungsi grid disini adalah untuk membagi wilayah antara kolom tersebut, dari gambar diatas kita akan membagi kolomnya menjadi 2 bagian (6 kolom kiri dan 6 kolom kanan), memakai script seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Keinformations</title>
<link rel="stylesheet" type="text/css" href="asset/css/mystyle.css">
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
</head>
<body>
<h1>Hei Dude</h1>
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.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>
Thank you for your visit :))
ReplyDelete