logo blog
Selamat Datang Di Blog Files Parwito
Terima kasih atas kunjungan Anda di blog Kompi MalesFiles Parwito,
semoga apa yang saya share di sini bisa bermanfaat dan memberikan motivasi pada kita semua
untuk terus berkarya dan berbuat sesuatu yang bisa berguna untuk orang banyak.

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>
&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 :



Enter your email address to get update from Files Parwito.
Print PDF
Next
« Prev Post
Previous
Next Post »

17 comments

Sama sama semoga bermanfaat tutorialnya

Balas

Mantap mas tips nya , kalo bisa lebih di kembangkan lagi, terimaksih sudah share

Balas

folder asset itu downloadnya dmn ya mas?

Balas

folder asset itu di buat sendiri , mas, buat nyimpen tambahan css yg di buat sendiri

Balas

matursuwun sanget

Balas

gan ini untuk wordpress ya..?? atau bisa untuk semua CMS seperti Joomla?

Balas

Ini Untuk Themes Html Biasa, belum di kompres ke Themes Wordpress atau CMS lainnya.

Balas

Sundul gan.. nice tutorial

Balas

terimakasih mas, semoga saya jadi tambah semangat untuk belajar buat web dg bosotstrap

Balas

Gan, bootstrapped itu lisensi hak cipta nya punya twitter.

Balas

iya gan punyanya twitter

Balas

Gan ada penjelasan per kode atau per class class tertentu ga di kode agan ini?

Balas

kunjungi marfnkz.blogspot.co.id

Balas

Informasi yang sangat berguna

Balas

Copyright © 2013. [files-parwito] - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger