|
|
Metode dan Algoritma | Membuat Layout Grid dan Container dengan Bootstrap . Anda bisa melakukan konsultasi tentang Membuat Layout Grid dan Container dengan Bootstrap melalui form di samping kanan !!!
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 :)
ActionScript AS3 ASP.NET AJAX C / C++ C# Clipper COBOL ColdFusion DataFlex Delphi Emacs Lisp Fortran FoxPro Java J2ME JavaScript JScript Lingo MATLAB Perl PHP PostScript Python SQL VBScript Visual Basic 6.0 Visual Basic .NET Flash MySQL Oracle Android
Related Post :
Judul: Membuat Layout Grid dan Container dengan Bootstrap
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh hank2
Anda sedang membaca artikel tentang
Membuat Layout Grid dan Container dengan Bootstrap, Semoga artikel tentang Membuat Layout Grid dan Container dengan Bootstrap ini sangat bermanfaat bagi teman-teman semua, jangan lupa untuk mengunjungi lagi melalui link
Membuat Layout Grid dan Container dengan Bootstrap.
{ 0 komentar... Views All / Send Comment! }
Posting Komentar