Cara Membuat Themas Web dengan Bootstrap

Jika kemarin kemarin sudahdi bahas , apa itu bootstrap dan bla bla bla, maka kali ini saya akan coba share bagaimana membuat themes web dengan bootstrap .

Pertama : Download bootstrap

Kedua : Buat struktur folder , bisa di lihat pada postingan sebelumnya Cara meload CSS Bootstarp Responsive

ketiga : Membuat Mockup desaign, misalnya seperti ini

Keempat : Saatnya Koding HTML + CSS + JS
Buatlah file dengan nama index.html di folder coba1, dan isi dengan kode-kode html seperti dibawah :

Struktur utama koding di bootstrap

Berikut ini adalah pemanggilan library2 bootstrap dan jquery :

<html>
<head>
<title>Testing Bootstrap[files-parwito]</title>


<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>





   

    


    

    

    









--><br />
<br />
Kode HTML Bagian Header Navigation:

<div class="page-header">
<img alt="Feedly" height="700" src="asset/img/ok.png" />

<br />
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="http://www.blogger.com/blogger.g?blogID=4000928777700727880#"><img alt="home" height="25" src="asset/img/home21.png" width="25" /></a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4000928777700727880#">Link</a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=4000928777700727880#">Link</a></li>
</ul>
<form class="navbar-search pull-right">
<input class="search-query" placeholder="Search" type="text" />
            </form>
</div>
</div>


</div>

Kode HTML Bagian sidebae:

<div class="span15 sidebar">
<h3>
Sidebar</h3>
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Admin</a></li>
<li><a href="#">Report</a></li>
<li><a href="#">Kelas</a></li>
<li><a href="#">More</a></li>
<li><a href="#">More</a></li>
<li><a href="#">More</a></li>
</ul>
</div>

<div class="span10">

</div>

Kode HTML Bagian menu utama:

<div class="hero-unit">
<h3>
Hello, world!</h3>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.<br />
<a class="btn btn-primary btn-large" href="http://www.blogger.com/blogger.g?blogID=4000928777700727880">Learn more »</a></div>

Kode HTML Bagian Menu tambahan:

<div class="row">
<div class="span4">
<h2>
Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <br />
<a class="btn" href="http://www.blogger.com/blogger.g?blogID=4000928777700727880#">View details »</a></div>
<div class="span4">
<h2>
Heading</h2>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. <br />
<a class="btn" href="http://www.blogger.com/blogger.g?blogID=4000928777700727880#">View details »</a></div>
<div class="span4">
<h2>
Heading</h2>
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.<br />
<a class="btn" href="http://www.blogger.com/blogger.g?blogID=4000928777700727880#">View details »</a></div>
</div>

Kode HTML Bagianfooter

<hr />
<footer>
<center>
<div class="row">
<div class="container">
© <a href="http://files-parwito.blogspot.com/">[Files-parwito]</a>
</div>
</div>
</center>
</footer>

Hasil akhir kurang lebih seperti ini , kalo ada yang kurang silahkan koment di bawah :