Twitter Bootstrap 2 : Membuat Website Theme Portfolio dengan Bootstrap version 2.1.1

Twitter Bootstrap 2 : Membuat Website Theme Portfolio dengan Bootstrap version 2.1.1

Guys… di postingan sebelumnya tentang mengenal bootstrap aku sudah sekilas bahas tentang apa itu bootstrap twitter.. Nah kali ini kita mau langsung praktek aja nih membuat website theme portfolio dengang bootstrap version 2.1.1.

Pertama : Download bootstrap 2.1.1

Kedua : Buat struktur folder seperti berikut :

Struktur Folder Theme Bootstrap

Struktur Folder Theme Bootstrap

Jadi folder projectnya adalah ‘singlefolio’, kemudian di dalamnya terdapat folder ‘bootstrap’ yang merupakan file2 utama bootstrap dan ada folder ‘asset’, yang merupakan file2 (css,img,js) tambahan sesuai yg kebutuhan kita nanti. Untuk file2 HTML nanti akan kita simpan di folder utama ‘singlefolio’.

Ketiga : Buat mockup Desain Portfolio sederhana seperti berikut

Mockup Desain

Mockup Desain

Keempat : Saatnya Koding HTML + CSS + JS

Buatlah file dengan nama index.html di folder singlefolio, dan isi dengan kode2 html seperti dibawah :

Struktur utama koding di bootstrap

Berikut ini adalah pemanggilan library2 bootstrap dan jquery :

[html]
<!DOCTYPE html>
<html>
<head>
<title>SingleFolio : Portfolio Theme with Bootstrap</title>
<!– Bootstrap –>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
</head>
<body>

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

Kode HTML Bagian Header Navigation

[html]
<div class="row">
<div id="nav" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="index.html" class="brand">SingleFolio</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#home" class="anchorLink">Home</a></li>
<li><a href="#about" class="anchorLink">About</a></li>
<li><a href="#services" class="anchorLink">Services</a></li>
<li><a href="#portfolio" class="anchorLink">Portfolios</a></li>
<li><a href="#contact" class="anchorLink">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="base_css.html">Dropdown Menu 1</a></li>
<li><a href="components.html">Dropdowb Menu 2</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>
<form class="form-search navbar-search">
<input type="text" class="search-query input-medium" placeholder="Search">
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
[/html]

Kode HTML Bagian Splash Page (Slider Image)

[html]
<div class="row" id="home">
<div class="container welcome-message">

<h2>Bootstrap Twitter</h2>
<p>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</p>
</div>
</div>

<div class="row">
<div class="container">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/940×300" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/940×300" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/940×300" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>
<br/>
[/html]

Kode HTML Bagian About Us

[html]
<div class="row" id="about">
<div class="container">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>
</div>
[/html]

Kode HTML Bagian Services

[html]
<div class="row" id="services">
<div class="container">
<div class="row">
<div class="span12">
<h2>Services</h2>
</div>
</div>
<div class="row">
<div class="span4 service-item">
<h4><i class="icon-tint"></i> Web Development</h4>
<img src="http://placehold.it/270×125" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>

<div class="span4 service-item">
<h4><i class="icon-map-marker"></i> Mobile Development</h4>
<img src="http://placehold.it/270×125" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>

<div class="span4 service-item">
<h4><i class="icon-wrench"></i> Network Development</h4>
<img src="http://placehold.it/270×125" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar tortor ac tortor dictum congue. Maecenas placerat, massa in aliquet consequat, enim purus convallis neque, et viverra augue purus vitae urna.</p>
</div>
</div>
</div>

</div>
[/html]

Kode HTML Bagian Portfolios:

[html]
<div id="portfolio" class="row">
<div class="container">
<h2>Portfolios</h2>
</div>
<div class="container">
<ul class="thumbnails portfolios">
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
<li class="span3 portfolio-item">
<a href="#"><img src="http://placehold.it/258×175" alt=""></a>
<h5>Thumbnail label</h5>
<p>Thumbnail caption right here…</p>
</li>
</ul>

</div>

</div>
[/html]

Kode HTML Bagian Contact:

[html]
<div id="contact" class="row">
<div class="container">
<h2>Contact</h2>
</div>
<div class="container">
<div class="row">
<div class="span6">
<form>
<label>Name</label>
<input class="span6" type="text" placeholder="Your Name">
<label>Email Address</label>
<input class="span6" type="text" placeholder="email@example.com">
<label>Your Message</label>
<textarea class="input-xlarge span6" id="textarea" rows="6" placeholder="Type your message here."></textarea>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>

<div class="span6">
<iframe width="500" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=London@51.508129,-0.128005&ie=UTF8&z=12&t=m&iwloc=near&output=embed"></iframe>
</div>
</div>
</div>
</div>
[/html]

Kode HTML Bagian Footer:

[html]
<hr>

<footer>
<div class="row">
<div class="container">
&copy; <a href="http://gie-art.com">Gie-art.com</a>
</div>
</div>
</footer>
[/html]

Okeyy… Selesaiii… :D, dan berikut ini hasilnya :
ONLINE DEMO !

About the author

gieart administrator

14 Comments so far

Taufiq HasanPosted on6:39 am - Oct 22, 2012

karang yo prohremer, posting koq isine koding. 😐

sofyan riyadinPosted on5:57 pm - Dec 21, 2012

mas aku pke boostrap yg versi baru berhasil tpi hasilnya header logonya ga kelihatan, kenapa tuch ? terima kasih… oh iya yg boostrap toko online bsa dshare ga

Bogie Satria SaktiPosted on12:08 pm - Mar 19, 2013

mas itu naruh kodingnya di bagian mananya dari html?
lgsg kopas aja dari atas ke bawah atau ada yg lainnya?

Àbdul Ăzȉš ŻȩvȉrőǜsPosted on5:57 am - Apr 7, 2013

makasih mas 🙂

alfayazidPosted on8:50 am - Apr 15, 2013

nice posting !!

Meytha Zennis ThalityPosted on3:29 am - Apr 30, 2013

wah pas banget mas aku juga lagi bikin pake bootsrap. makasih banget ya mas 😀
masih inget aku ga ?

RefanPosted on4:56 pm - Nov 30, 2013

Mas mau tanya, saya awam sekali dengan design web… hanay mengerti sedikit. Saya bingung menghubungkan dari menu home ke menu about us bagaimana ya?

Leave a Reply