Hotline: 082371377379 bermultimedia@gmail.com

Tutorial

You are here: Home / Kumpulan Tutorial

Cara Membuat Themas Web dengan Bootstrap


Senin, 10 Februari 2014 | 15:35:25 WIB | Dibaca: 8533 Kali
Boostsrap Ft. CSS Great Effect
Semua Tutorial Tutorial CSS

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>
&lt;!-- Bootstrap Load file </head></html>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="asset/css/bootstrap.min" rel="stylesheet"></link>
     <!-- Autor : Parwito
       Theme type : Test 1
       Url     : files-parwito.blogspot.com
       Thank to : http://bootswatch.com/
                  -->
<!--Body Mulai-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--Layout Utama Mulai-->
<!--HEADER Start-->
    
<!--Header End-->
   
   <!--Layout kedua mulai-->
    
    <!--Sidebar mulai-->
   
   
    <!--Sidebar Selesai-->
  
  
    <!--Kontes / isi Mulai--> 


    <!--Kontes / isi Selesai--> 
  
  
    
  <!-- Layout Kedua Selesai-->
<!-- Contoh Colom tambahan  -->
      
<!--Footer start-->
   
<!--Footer end-->
<!--Layout Utama Selesai-->
--&gt;<br />
<br />
Kode HTML Bagian Header Navigation:
<!--HEADER Start-->
<div class="page-header">
<img alt="Feedly" height="700" src="asset/img/ok.png" />
 <!--Navbar Start-->
 <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>
<!--navbar end-->
    
</div>
<!--Header End-->



Kode HTML Bagian sidebae:

<!--Sidebar mulai-->
<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">
<!--Sidebar Selesai-->
</div>

 

 

Kode HTML Bagian menu utama:

<!--Kontes / isi Mulai--> 

 <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>
<!--Kontes / isi Selesai-->

 

  
Kode HTML Bagian Menu tambahan:

 <!-- Contoh Colom 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>
<!-- Contoh Colom tambahan selesai -->


Kode HTML Bagianfooter

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

 

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


Sumber: http://files-parwito.blogspot.com/2012/10/cara-membuat-themas-web-dengan-bootstrap.html