Halo Balik lagi dengan om bewok, kali ini om bewok bakal melanjutkan tutorial dari http://www.bewoksatukosong.com/2016/06/belajar-bootstrap-part-3-grid-layout-1.html. nah selanjutnya kita belajar mengenai container dan container-fluid, Perbedaanya apa sih ? Sebelum kita melihat perbedaanya, kita lebih dulu ke penempatan nya. jadi penempatanya adalah di setelah body yang pasti sebelum div class row. Nah untuk melihat perbedaanya om bewok beri 2 contoh ya, yang pertama container lalu yang kedua container-fluid.
ctt kecil :
- container : column berada di tengah tapi tidak full width
- container-fluid : column full width
Pertama container, codingnya seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>container</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" style="background:#1abc9c">lorem ipsum</div>
<div class="col-md-1" style="background:red">helo</div>
<div class="col-md-1" style="background:blue">helo</div>
<div class="col-md-8" style="background:#1abc9c">helo</div>
</div>
</div>
</body>
</html>
Maka Hasilnya seperti dibawah ini :
 |
| Lihat Berada di tengah |
Kedua kita coba mengenai container-fluid. codinganya seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>container-fluid</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2" style="background:#1abc9c">lorem ipsum</div>
<div class="col-md-1" style="background:red">helo</div>
<div class="col-md-1" style="background:blue">helo</div>
<div class="col-md-8" style="background:#1abc9c">helo</div>
</div>
</div>
</body>
</html>
 |
| Lihat kiri kanan tidak ada yang kosong |
Itu saja tutorial kali ini, oh iya kenapa om bewok bahas grid layout di bagi - bagi biar keliatan byk posts an nya dong, bukan tapi biar teman - teman di sini ga pusing kalau langsung sekaligus semuanya, nah untuk itu om bewok sengaja menulis satu - satu.
Itu saja tutorial kali ini, tuturial selanjutnya penjelasan grid layout funal. jangan lupa ketinggalan ya, Bye
No comments:
Post a Comment