Rabu, 30 November 2016

Cara Membuat layout dengan bootstrap

<!-- start;header -->
<link rel="stylesheet" href="./bootstrap.css">
<script src="./bootstrap.min.js"></script>
<style>
.row {margin-bottom:20px;}
header { background:#333333; margin: 0 0 20px;}
.body_1{background:#eeeeee; height:50px; width:100%; }
.body_2{background:#eeeeee; height:250px; width:100%; }
.body_3{background:#eeeeee; height:200px; width:100%; margin:0 0 20px; }
footer {width:100%; background:#333333; padding:20px 0 20px;}
.footer-bottom {background:#000000;widht:100%; padding:15px 0 15px}
.footer-bottom p {color:#eeeeee;}
</style>
<header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_1"></div>
</div>

<div class="col-lg-8 col-md-8 col-sm-12">
<div class="body_1"></div>
</div>
</div></div>
</header>
<!-- end: header -->

<!-- start: container artikel -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="body_1" style="background:#eeeeee; height:300px; margin:0 0 20px">SLIDER</div>
<!-- start: galery artikel -->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_2"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_2"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_2"></div>
</div>

</div></div>

<!-- start: sidebar -->
<div class="col-lg-4 col-md-4 col-sm-12">

<div class="col-md-12 body_3">
<div class="body_3"></div>
</div>

<div class="col-md-12 body_3">
<div class="body_3"></div>
</div>

<div class="col-md-12 body_3">
<div class="body_3"></div>
</div>

</div>
</div></div>
</article>

<section>
<footer>
<div class="container">
<div class="row">

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_3"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_3"></div>
</div>

<div class="col-lg-4 col-md-4 col-sm-12">
<div class="body_3"></div>
</div>

</div></div>
</footer>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Dibuat Oleh : s-widodo.com
</p>
</div>
</div></div></div>
</section>

Tidak ada komentar:

Posting Komentar