Belajar Bootstrap Part 3 Grid Layout 2 Megenai Container dan Container-fluid - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Thursday, June 30, 2016

Belajar Bootstrap Part 3 Grid Layout 2 Megenai Container dan Container-fluid





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 :

  1. container : column berada di tengah tapi tidak full width
  2. 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