Friday, November 6, 2015

Grid dan Layout

Posted by Unknown on 9:17 PM No comments
Pengertian Grid System

Grid adalah struktur dua dimensi yang terdiri dari sumbu horisontal dan sumbu vertikal sehingga akan tersusun kolom dan baris. sistem grid pada awalnya digunakan dalam dunia desain percetakan.

Dalam dunia web Grid sangat efektif untuk menghasilakn layout yang tetap menggunakan HTML dan CSS, sehingga dalam desain web sistem grid adalah komponen yang sangat penting.

bootstrap memiliki sistem grid tersendiri yang merupakan sistem grid variasi dari 960 grid sistem, yang memiliki lebar grid 940px dan kolom maksimal 12 kolom pada lebar layar dekstop.

kelibahan dari sistem grid pada bootstrap antara lain, memiliki sintaks yang sederhana dan mempunyai fitur responsive, yang berarti layout yang dibuat dengan bootstrap dapat beradaptasi terhadap ukuran laya mobie devices mulai dari komputer, tablet maupun heandphone

Dasar Gird

Untuk membuat baris horisontal Bootstrap menggunakan kelas CSS.row dan untuk membuat kolom menggunakan CSS.spanx, untuk nilai x menunjukan banyaknya jumlah kolom yang akan ditampilkan misal, span1 makan akan menghasilkan 12 kolom, lalu span2 akan menghasilkan 6 kolom dan seterusnya.
grid+bootstrap
Dasar grid pada bootstrap





<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.css" rel="stylesheet"/>
<title>Belajar Bootstrap</title>
</head>
<div class="container-fluid">
  <h1>Belajar Membuat Grid!</h1>
  <p>contoh membuat kolum pada bootstrap</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:#00CC33"> Belajar membuat kolom 1 </div>
 <div class="col-sm-4" style="background-color:#FF0000"> Belajar membuat kolom 2 </div>
 <div class="col-sm-4" style="background-color:#0000FF"> Belajar membuat kolom 3 </div>
</div>
<body>
<script src="js/bootstrap.min.js"> </script>
</body>
</html>







</pre>   









Hasilnya seperti ini 







membuat+grid+bootstrap











semoga dapat menambah wawasan rekan-rekan semua




















































No comments
                        :
                      
















Post a Comment































                        

                      







Subscribe to:

Post Comments
                        (
                        Atom
                        )