Kita lanjutkan bagian kedua dari artikel Mendesain Web dengan Bootstrap. Lanjutan dari artikel pertama Starter Template Bootstrap.Kali ini coba kita pelajari Grid Layout, yaitu Layout ala Bootstrap yang membagi Layar Web menjadi 12 Kolom yang bisa kita bagi-bagi sesuka kita. Kemudian Grid tersebut bisa kita letakkan di flow container yang bersifat responsif terhadap lebar layar Web Browser sehingga jika ditampilkan di layar Web Desktop, Tablet maupun Smartphone bisa menyesuaikan bentuknya.
Ok, dari file Starter Template bisa dikembangkan sehingga menjadi file grid.html berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<style>
/*.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 40px;
line-height: 40px;*/
}
</style>
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png">
</head>
<body>
<div class="container-fluid">
<h2>Bootstrap starter template</h2>
<p>Dokumen kosong dengan library Bootstrap siap digunakan.</p>
<h2>Live fluid grid example</h2>
<p>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</p>
<div class="container-fluid">
<div class="row-fluid show-grid">
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
<div class="span1"><h4>Fluid</h4>The fluid grid system uses percents</div>
</div>
<div class="row-fluid show-grid">
<div class="span3"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
<div class="span3"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
<div class="span3"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
<div class="span3"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
</div>
<div class="row-fluid show-grid">
<div class="span4"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
<div class="span4"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
<div class="span4"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
</div>
<div class="row-fluid show-grid">
<div class="span4"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths</div>
<div class="span8"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</div>
</div>
<div class="row-fluid show-grid">
<div class="span6"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</div>
<div class="span6"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</div>
</div>
<div class="row-fluid show-grid">
<div class="span12"><h4>Live fluid grid example</h4>The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices.</div>
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
Hasilnya sebagai berikut :
Desain selengkapnya dapat didownload disini. Klik link ini, kemudian klik File-Download (Unduh)
Semoga berhasil :)
