Bootstrap

Vicommerce – Bootstrap Template Toko Online Gratis

vicommerce

 

Features :

  • Home Page + Slider
  • Search & Product List Page
  • Single Product

DOWNLOAD

Sapi – Free Corporate Bootstrap Theme

1-landing-2Halloo semua,

Ada templet gratisan ini. sapa tau bisa bermanfaat buat kalian. Langsung aja download gaes => Sapi Free Bootstrap Theme

Tokokita : Ecommerce Bootstrap Theme Free Download

Guys…

Ini daripada njamur di hardisk mending aku share aja kyaknya :)) , siapa tau ada yg tertarik. Tampilanya seperti ini :

tokokita

Kalian bisa liat Live Demo nya jg.

Bagi yang berminat silahkan aja download langsung guys  => [Download not found]

 

“Sukripsi” – Download Free Template HTML built with Twitter Bootstrap

Haee….

Beberapa waktu lalu aku sempet iseng bikin theme HTML dengan Twitter Bootstrap.  Theme yang aku buat ini sangat sederhana sekali, hanya terdiri dari homepage, blog, detail, galleries, contact, sign in saja. Ini screenshoot dari home page  nya:

sukripsi_screenshoot

Kalian bisa download theme ini secara gratis Sukripsi Theme (3463 downloads) . Bisa dioprek2 bagi kalian yang lagi mau belajar Twitter Bootstrap.  Ato bisa kalian modifikasi untuk project web kalian. Semoga bermanfaat 🙂

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 !

Twitter Bootstrap 1 : Mengenal Twitter Bootstrap

*udah agak telat gpp ye 😐 *

Twitter bootstrap adalah tools untuk membuat user interface (HTML+CSS+Javascript) yang sangat memanjakan developer. Tools ini didistribusikan secara gratis tetapi memiliki fitur2 yang tak ternilai harganya.. ya.. aku dengan mantab mengatakan ini. Dulu ketika ada klien yg akan membuat website dengan budget yg terbatas saya selalu dipusingkan dengan pekerjaan desain. Karena pada dasarnya sya tidak punya kemampuan untk desain, dan dengan budget yang terbatas tentu akan berfikir ulang kali utk membayar temen utk mengerjakan pekerjaan desain ini.

Tetapi twitter bootstrap hadir dengan membawa begitu banyak keindahan bagi para developer web yg kurang mampu dalam mendesain. Jadi skrg bila ada klien yg akan membuat website dengan tampilan (tidak kompleks) dan budget sederhana.. Aku tidak perlu khawatir utk membayar desainer utk mengerjakannya. Dengan twitter bootstrap aku bisa… emmm.. klo hasil ya cukupan lah.

Dari sini aku kadang berfikir.. aku yg programmer tulen saja bisa membuat user interface web yang bisa dikatakan cukup layak lah… apalagi seorang desainer yg memang fokus di pengembangan user interface.. pasti hasilnya lebih WOW lagi donk.. Intinya Twitter boostrap sangat memanjakan temen2 developer semua.. 😀

Berikut ini beberapa cuplikan fitur yang dimiliki twitter bootstrap:

–  Grid System, default 12 columns

– Layout : Fixed, Fluid, Responsive

– Fundamental HTML element styles : typography, tables, forms, buttons, icons, images

– Components : dropdown, navigation, buttons groups,  breadcrumb, pagination, label, thumbnail, alert message .etc

– Javascripts : modals, dropdown, scrollspy, tab, tooltip, popover, alert, accordion, carousel .etc

Oke guys.. itu tdi sekilas tentang twitter bootstrap. Di postingan2 berikutnya akan aku bahas tentang studi kasus2 membuat user interface (web) sederhana yang aku kerjakan pake twitter bootstrap..

sampaii jumpaa… 😀