Responsive bootstrap v.1.1

Panduan Twitter Bootstrap

Didistribusikan oleh : Fluider Team

versi 1.1
Update : Maret 2013

Panduan Twitter Bootstrap

1.1 Twitter Bootstrap
A. Pengenalan

Twitter Bootstrap adalah toolkit untuk membangun web aplikasi secara cepat. Termasuk di
dalamnya yaitu CSS dan Javascript.
Toolkit ini dapat diunduh di http://twitter.github.com/bootstrap/, Ekstrak folder bootstrap yang
telah diunduh dan toolkit siap digunakan.

B. Persiapan

Ada dua cara untuk menggunakan Twitter Bootstrap di HTML :
1. Memanggil CSS Bootstrap dengan menambahkan baris berikut sebelum </head>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
2. Atau dengan memanggil LESS Bootstrap (CSS Preprocessor yang digunakan untuk
mempercepat dan mempermudah web development) dengan menambahkan baris di
bawah ini.
<link rel="stylesheet/less" href="/bootstrap/less/bootstrap.less">
Javacript dan CSS dalam bootstrap merupakan satu kesatuan untuk membuat sebuah
desain web yang indah, untuk memanggil Javascript Bootstrap dapat menambahkan
baris dibawah ini.
<script src=”/bootstrap/js/bootstrap.js”></script>

C. Start
C.1 Grid System
Default dari Grid System Bootstrap adalah lebar 940px dan 12 kolom. Grid System ini
digunakan untuk pembagian resolusi layar ke dalam 4 responsive variasi untuk phone, tablet
portrait and tablet landscape, small desktop, dan large wide screen desktop.

Distributed by Fluider Team 2

Pertama, buat sebuah file HTML dengan standar di bawah ini ditambah dengan CSS dan
Javascript dari Bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fluider - Twitter Bootstrap Tutorial</title>
<link href="/bootstrap/css/bootstrap.css"
rel="stylesheet">
<script src=”/bootstrap/js/bootstrap.js”></script>
</head>
<body>
….
</body>
</html>

Untuk membuat sebuah grid system pada bootstrap, dibutuhkan beberapa class seperti :
container, row dan span, untuk contoh penggunaan dapat meilhat contohnya di bawah ini.

<div class="container">
<div class="row">
<div class="span12">
</div>
</div>
</div>

untuk mengetahui fungsi grid system pada bootstrap, terapkan baris di bawah ini pada HTML,


untuk membuat struktur dari grid.

<div class="row">
<div class="span12">
</div>
</div>
<div class="row">
<div class="span6">
</div>
<div class="span6">
</div>
</div>
<div class="row">
<div class="span4">
</div>
<div class="span4">
</div>
<div class="span4">
</div>
</div>
<div class="row">
<div class="span3">
</div>
<div class="span3">
</div>
<div class="span3">
</div>
<div class="span3">


</div>
</div>
<div class="row">
<div class="span2">
</div>
<div class="span2">
</div>
<div class="span2">
</div>
<div class="span2">
</div>
<div class="span2">
</div>
<div class="span2">
</div>
</div>
<div class="row">
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>


<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
<div class="span1">
</div>
</div>
</div>

Dengan contoh di atas, tidak dapat menampilkan grid system secara kasat mata, untuk
menampilkan warna dari tiap-tiap span, buat sebuah class CSS pada HTML dengan baris
berikut. Letakkan sebelum </head>

<style>
.green {background-color: #CBF93E; }
.blue {background-color: #4282D3; }
.orange {background-color: #FFB640; }
.red {background-color: #FF6140; }
.purple {background-color: #906CD7; }
.yellow {background-color: #FFE640; }
.jarak {height: 100px; margin-top: 5px; margin-bottom: 5px;}
</style>

Setelah selesai, terapkan warna yang berbeda dari tiap span, seperti contoh di bawah ini.


</div>
</div>
</div>
</div>
</div>
</div>

Maka akan tampak struktur grid memenuhi 12 kolom tiap barisnya seperti tampilan HTML di
bawah ini.


C.2 Layout
Untuk permulaan mendesain responsive web, harus mempunyai sebuah kerangka /
layout, untuk mempermudah membuat layout dapat menggunakan grid system yang telah
dipelajari sebelumnya. Kerangka terbagi menjadi 3 bagian, yaitu header, content, dan footer.
Buatlah layout seperti langkah-langkah di bawah ini.

Header
Pertama, gunakan struktur HTML default dengan tambahan Bootstrap CSS + Javascript ke
dalam HTML baru.
Kemudian di dalam <body>, berikan code di bawah ini.

<header class="green">
<div class="row">
<div class="span12">Header / Navigasi</div>
</div>
</div>
</header>

Content
Kedua, yang diperlukan sebuah content untuk menampilkan isi atau artikel dari blog,
tambahkan code untuk content di bawah ini di bawah </header>.

<div class="row">
<div class="span12 yellow jarak">
Content Header
</div>
</div>


<div class="row">
<div class="span4 orange jarak">
Content Pertama
</div>
Content Kedua
</div>
Content Ketiga
</div>
</div>
</div>

Footer
Ketiga, Footer berfungsi menampilkan si pembuat website, pemilik website, atau pembuat
desain, untuk menambahkan footer gunakan code di bawah ini.

<footer class="blue">
<div class="row">
<div class="span12">Footer</div>
</div>
</div>
</footer>

Maka hasil struktur HTMLnya akan seperti ini.


C.3 Typography
Typography pada dasarnya digunakan untuk memperindah tampilan atau susunan text.
Untuk langkah selanjutnya gunakan typography untuk memasukkan content / artikel ke dalam
HTML.

Ubah header sebelumnya menjadi seperti di bawah ini.

<header class="green">
<div class="row">
<div class="span12"><h3>Fluider</h3></div>
</div>
</div>
</header>

Setelah itu pada content, tambahkan no image dengan menambahkan baris berikut:

<div class="row">
<div class="span12" style="margin-top: 10px;">
<img src="http://dummyimage.com/1200x300/ddd/fff" />
</div>


</div>

Ubah juga pada Content Header dengan baris di bawah ini, untuk menampilkan typography
h1, h2, h3, h4, h5, h6, paragraf, penggunaan strong, dan addr.

<div class="row">
<div class="span12 yellow" style="margin-top: 10px;">
<h1>Ini adalah header h1</h1>
<p>
Ini merupakan paragraf. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
<p>Ini menggunakan <strong>Strong</strong> di dalam
paragraf.</p>
<p>Ini penggunaan abbr pada singkatan <abbr
title="Indonesia">INA</abbr>.
</p>
</div>
</div>

Pada bagian Content Pertama, berikan contoh typography untuk penggunaan address,
berikut codenya.


<div class="span4 orange" style="margin-top: 10px; margin-bottom:
10px">
<h4>Penggunaan Address</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.</p>
<address>
<strong>Fluider</strong><br/>
Swadaya 2<br/>
Cempaka Baru, Jakarta Pusat.
</address>
</div>

Sedangkan untuk Content Kedua Berikan Typography penggunaan Blockquote dengan code
di bawah ini.

<div class="span4" style="margin-top: 10px; margin-bottom: 10px;
color: #333">
<h4>Penggunaan Blockquotes</h4>
<blockquote>
<i>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.
</i>
</blockquote>
</div>


Untuk yang Content yang terakhir yaitu Content ketiga, berikan code untuk menampilkan
penggunaan Unordered List sama Ordered List.

10px">
<h4>Penggunaan Unordered List dan Ordered List</h4>
<p>
<ol>
<li>Penggunaan Ordered List(ol)</li>
</ol>
<ul>
<li>Penggunaan Unordered List(ul)</li>
</ul>
</p>
</div>

Yang terakhir, pada footer ubah baris footer dengan baris di bawah ini, untuk merubah warna
font dan ukuran.

<footer class="blue">
<div class="row">
<div class="span12" style="color: #fff;">
<h5>© 2013 Fluider.org </h5>
</div>
</div>


</div>
</footer>

Setelah semuanya selesai, maka tampilannya akan berubah menjadi seperti gambar di
bawah ini.


C.4 Tabel
Tabel sering digunakan untuk menampilkan data yang bersifat sama dan
dikelompokkan menurut kolom dan baris.
Untuk membuatnya sebuah tabel pada Bootstrap, diperlukan class tr, td dan th,
dengan tambahan class thead dan tbody, berikut penggunaannya.

Buat sebuah html baru, kemudian isi bagian content dengan baris berikut :

<div class="row">
<div class="span12" style="margin-top: 10px">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Nama Depan</th>
<th>Nama Belakang</th>
<th>Sekolah</th>
<th>Kfelas</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Rika</td>
<td>Vikawati</td>
<td>SDN Sumberjo 03</td>
<td>3</td>
</tr>
<tr>


<td>2.</td>
<td>Budi</td>
<td>Prasetyo</td>
<td>SDN Sumbelimo 10</td>
<td>5</td>
</tr>
<tr>
<td>3.</td>
<td>Nori</td>
<td>Manae</td>
<td>SDN Karangraja 05</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Hasilnya akan tampak seperti di bawah ini.

C.5 Form


Pada panduan selanjutnya akan membahas tentang membuat form dengan bootstrap,
form lebih sering digunakan untuk hal-hal yang bersifat membutuhkan inputan dari pengguna.
Seperti form pendaftaran, form login, form kebutuhan dan lain-lain.

Berikut contoh kode untuk membuat sebuah form :

Membuat Vertical Form Layout
Buatlah sebuah HTML baru yang lain, kemudian pada baris awal bagian content, tambahkan
baris di bawah ini.

<div class="span12" style="margin-top: 10px">
<h3>Vertical Form Layout</h3>
<form class="well">
<label>Username</label>
<input type="text" class="span5" placeholder="username">
<span class="help-inline">Masukkan Username Anda!</span>
<label class="checkbox">
<input type="checkbox">Centang apabila username Anda
benar.
</label>
<button type="submit" class="btn">Submit</button>
</form>
</div>

Maka Hasilnya akan seperti di bawah ini.


Membuat Search Form Layout
Gunakan class form-search untuk membuat inputan menjadi block level. Tambahkan code di
bawah ini setelah code vertical form.

<h3>Search Form Layout</h3>
<form class="well">
<label>Username</label>
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Submit</button>
</form>

Maka hasilnya akan seperti ini.

Membuat Inline Form Layout
Gunakan class form-inline untuk membuat inputan menjadi inline. Tambahkan code di bawah
ini setelah code search form.

<h3>Inline Form Layout</h3>
<form class="well form-inline">


<input type="text" class="input-small" placeholder="Username">
<input type="password" class="input-small"
placeholder="Password">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Masuk</button>
</form>

Hasilnya akan seperti di bawah ini.

Membuat Horizontal Form Layout
Gunakan class form-horizontal untuk membuat inputan menjadi horizontal. Tambahkan code
di bawah ini setelah code inline form.

<h3>Horizontal Form Layout</h3>
<form class="well form-horizontal">
<fieldset>
<legend>Horizontal Form Layout</legend>
<div class="control-group">
<label class="control-label" for="input">Text
input</label>
<div class="controls">
<input type="text" class="input-
xlarge" id="input">


<p class="help-block">
In addition to freeform text, any HTML5
text-based input appears like so.
</p>
</div>
</div>
<label class="control-label"
for="checkbox">Checkbox</label>
<input type="checkbox"
id="checkbox" value="Pilihan 1">
Option one is this and that—be
sure to include why it's great
</label>
</div>
</div>
for="select01">Select list</label>
<select id="select01">
<option>--Pilihan1--</option>
</select>


</div>
</div>
for="multiSelect">Multicon-select</label>
<select multiple="multiple"
id="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
for="fileInput">File input</label>
<input class="input-file"
id="fileInput" type="file">
</div>
</div>
for="textarea">Textarea</label>
<textarea class="input-xlarge"


id="textarea" rows="3"></textarea>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
Simpan Perubahan
</button>
<button class="btn">Batal</button>
</div>
</fieldset>
</form>

Jika berhasil, maka akan tampilannya seperti ini.


Form Controls
Di dalam toolkit bootstrap disediakan pengendalian form untuk read-only, dan disabled, untuk
contoh dapat menggunakan kode di bawah ini, letakkan kode di bawah horizontal form layout.

<h3>Form Controls</h3>
<fieldset>
<legend>Form Controls Bootstrap</legend>


for="input01">Fokus Input</label>
xlarge" id="input01">
<p class="help-block">Input dalam
mode biasa dan dapat di tulis dan di baca.</p>
</div>
</div>
<label class="control-label" for="input01">Raed
only Input</label>
xlarge" id="input01" readonly="true">
<p class="help-block">Input dalam
mode read-only, hanya bisa di baca dan fokus.</p>
</div>
</div>
for="input01">Disabled Input</label>
xlarge" id="input01" disabled>
<p class="help-block">Input tidak
bisa digunakan alias di disable.</p>
</div>
</div>


for="optionsCheckbox" reado>Checkbox (disabled)</label>
<input type="checkbox"
id="optionsCheckbox" value="option1" disabled>
Checkbox yang telah di disable.
</label>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary"
disabled>
Simpan Perubahan (tombol yang di disabel)
</button>
<button class="btn">Cancel</button>
</div>
</fieldset>
</form>

Hasilnya akan tampak seperti gambar berikut :


Form Input Style
Di dalam bootstrap juga disediakan form input style untuk error, warning, success, select
success. Berikut contoh kodenya.

<h3>Form Input Style</h3>
<fieldset>
<legend>Form validasi error, warning dan
success</legend>
<div class="control-group error">
for="inputError">Input with error</label>
<input type="text" id="inputError">


<span class="help-inline">Please
correct the error</span>
</div>
</div>
<div class="control-group warning">
for="inputWarning">Input with warning</label>
<input type="text" id="inputWarning">
<span class="help-inline">Something
may have gone wrong</span>
</div>
</div>
<div class="control-group success">
for="inputSuccess">Input with success</label>
<input type="text" id="inputSuccess">
<span class="help-
inline">Successfully entered</span>
</div>
</div>
<div class="control-group success">
for="selectError">Select with success</label>
<select id="selectError">
<option>1</option>
<option>2</option>


<option>3</option>
<option>4</option>
<option>5</option>
</select>
<span class="help-
inline">Successfully selected</span>
</div>
</div>
</fieldset>
</form>

Maka Hasilnya akan seperti gambar berikut :


C.6 Navbar
pada bagian struktur HTML yang telah dibuat, ada bagian bernama header. Dalam
panduan ini akan dibahas bagaimana cara mengganti header menjadi navigasi.
Navigasi pada umumnya berguna untuk mempermudah pembagian artikel, data, atau
spesifikasi, untuk menambahkan navigasi pada header, ubah baris <header>...</header>
dengan baris di bawah ini.

<header style="margin-bottom: 40px">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<ul class="nav">
<li class="active">
<a class="brand" style="margin-
left: 0" href="#">Fluider</a>
</li>
<li><a href="#">Responsive</a></li>
<li><a href="#">Metro Style</a></li>
<li><a href="#">Leaflet</a></li>
</ul>
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-
toggle" data-toggle="dropdown"> Services <b
class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Web
Design</a></li>
<li><a href="#">Web
development</a></li>


<li><a href="#">Wordpress Theme
development</a></li>
</ul>
</li>
</ul>
<form class="navbar-search pull-left">
<input type="text" class="search-query"
placeholder="Search">
</form>
</div>
</div>
</div>
</header>

Maka tampilannya akan seperti berikut :


Untuk fungsi drop down tidak berfungsi dikarenakan tidak adanya javascript yang
menjalankan fungsi tersebut, tambahkan jquery.js dan bootstrap-dropdown.js ke dalam
HTML, letakkan sebelum </head>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-dropdown.js"></script>

Refresh halaman HTML di Web Browser kemudian coba klik dropdown sekali lagi.


C.7 Icon
Pada Pembahasan selanjutnya, yaitu menambahkan icon, dengan menggunakan font
awesome yang dapat di download di http://fortawesome.github.com/Font-Awesome/.
Sebelum menggunakannya, tambahkan baris berikut ke bagian atas </head>.
<link rel="stylesheet" href="/bootstrap/css/font-awesome.css">

Syntax yang digunakan untuk memanggil icon adalah :

<i class=”class nama_icon”></i>

Menambahkan Icon di Navigasi
Setelah pada pembahasan sebelumnya menambahkan navigasi di header, selanjutnya dapat
dicoba menambahkan icon di navigasi, ubah baris navigasi Responsive, Metro Style dan
Leaflet dengan baris di bawah ini.

<li><a href="#"><i class="icon-tablet"></i> Responsive</a></li>
<li><a href="#"><i class="icon-plus-sign-alt"></i> Metro
Style</a></li>
<li><a href="#"><i class="icon-leaf"></i> Leaflet</a></li>

Maka hasilnya akan seperti gambar di bawah ini.


Menambahkan Icon di Button dan Button Group
Setelah mencoba menambahkan icon di Navigasi, selanjutnya mencoba menambahkan icon
di button dan button group.
Syntax yang diperlukan untuk menggabungkan icon dan button adalah :

<div class=”btn-group”>
<a class=”btn” href=”#”><i class=”icon-refresh”></i>
</div>

Untuk contoh, gunakan code di bawah ini dan letakkan setelah form
class search pada navigasi..
<ul class="nav pull-right">
<div class="btn-group">
<a class="btn btn-primary" href="#"><i
class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" href="#"><span class="caret"></span></a>
<li><a href="#"><i class="icon-pencil"></i>
Edit</a></li>
<li><a href="#"><i class="icon-trash"></i>
Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i>
Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i>
Logout</a></li>


</ul>
</div>
</ul>

Hasilnya akan seperti gambar di bawah ini.

C.8 Navigation Tabs dan Pills
Untuk pembelajaran selanjutnya yaitu pengenalan tabs dan pills dari bootstrap, untuk
memanggil tabs dapat menggunakan class .nav-tabs dan jika memanggil pills dapat
menggunakan .nav-pills. Berikut contoh kode untuk navigasi tabs dan pills.

Membuat Navigasi Tabs

<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>


Membuat Navigasi Pills

<ul class="nav nav-pills">
</ul>

Dalam tahap ini, HTML yang telah dibuat akan ditambahkan sidebar, ubah baris content
header, content pertama, content kedua, dan content ketiga menjadi seperti di bawah ini.

<div class="row">
<div class="span3 green" style="margin-top: 10px; height:
485px;">
Sidebar
</div>


<div class="span9" style="margin-top: 10px;">
<div class="row-fluid">
<div class="span12 yellow">
<li class="active"><a
href="#">Home</a></li>
</ul>
<h3>Apa itu Fluider ?</h3>
<p>
<strong>Fluider</strong> adalah inisiatif dari
meruvian yang membahas tentang aspek Desain dan lain-lain. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.<br />
Fluider menyediakan beberapa konten untuk
mendesain, antara lain:
<ul>
<li>Programming</li>
<li>Responsive</li>
<li>Metro Style</li>
<li>Map GIS</li>
</ul>
</p>
</div>
</div>


<div class="row-fluid">
<div class="span6 orange" style="margin-top: 10px;
margin-bottom: 10px">
<h4>Responsive</h4>
<p>     Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. <br/>     Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<div class="span6 orange" style="margin-top: 10px;
margin-bottom: 10px">
<h4>Metro Style</h4>
<p>     Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. <br/>     Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>

Maka hasilnya akan seperti gambar di bawah ini.


Membuat Navigasi Vertical Tabs
Syntax yang digunakan adalah .navs-tabs dan .navs-stacked, untuk membuat sebuah
navigasi vertikal, dibutuhkan bagian sidebar, ubah bagian sidebar pada HTML yang telah
dibuat menjadi seperti baris berikut :

<ul class="nav nav-tabs nav-stacked">


</ul>

Membuat Navigasi Vertical Pills
Syntax yang digunakan adalah .navs-pills dan .navs-stacked, hampir sama dengan navigasi
bar, ubah baris di sidebar menjadi baris berikut :

<ul class="nav nav-pills nav-stacked">
</ul>


Menambah Dropdown pada Navigation Tabs
Untuk membuat dropdown pada navigation tabs, perlu menggunakan class dropdown, contoh
kodenya dapat dilihat di bawah ini.

<li><a href="#">About</a></li>
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
toggle="dropdown" href="#">BackEnd<b class="caret bottom-


up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>

Menambah Dropdown pada Navigation Pills
Penggunaannya hampir sama dengan kode di atas hanya mengganti .nav-tabs menjadi .nav-
pills.

<li><a href="#">About</a></li>


</ul>
</li>
up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
</ul>
</li>
</ul>


Membuat Navigasi Sidebar dengan Nav List
Untuk membuat sebuah navigasi dengan list di sidebar, syntax yang digunakan adalah .nav,
dan .nav-list. Berikut contoh kodenya :

<ul class="nav nav-list">
<li class="nav-header">List header</li>
<li><a href="#">Library</a></li>
<li><a href="#">Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#">Profile</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
</ul>

Membuat Navigasi Sidebar dengan Nav List + Icon
Agar Navigasi menarik, tambahkan beberapa icon di setiap listnya, berikut codenya.


<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-white icon-
home"></i> Home</a></li>
<li><a href="#"><i class="icon-book"></i>
Library</a></li>
<li><a href="#"><i class="icon-pencil"></i>
Applications</a></li>
<li class="nav-header">Another list header</li>
<li><a href="#"><i class="icon-user"></i>
Profile</a></li>
<li><a href="#"><i class="icon-cog"></i>
Settings</a></li>
<li><a href="#"><i class="icon-flag"></i>
Help</a></li>
</ul>

Tabbable Nav dengan Javascript
Pembahasan terakhir dari Navigasi adalah Membuat Tab berfungsi dengan javascript, pada
bagian content header ganti kode menjadi seperti di bawah ini.


<div class="tabbable">
<li class="active"><a href="#1" data-
toggle="tab">Home</a></li>
<li><a href="#2" data-toggle="tab">About</a></li>
</ul>
</li>
up"></b></a>
<ul class="dropdown-menu bottom-up pull-
right">
</ul>
</li>


</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="1">
<h3>Apa itu Fluider ?</h3>
<p> <strong>Fluider</strong> adalah inisiatif dari
meruvian yang membahas tentang aspek Desain dan lain-lain. Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat.<br /> Fluider menyediakan beberapa konten untuk
mendesain, antara lain:
<ul>
<li>Programming</li>
<li>Responsive</li>
<li>Metro Style</li>
<li>Map GIS</li>
</ul>
</p>
</div>
<div class="tab-pane" id="2">
<h3>About Me</h3>
<p>     Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.
<br/>     Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat.</p>
</div>
</div>


Tambahkan fungsi Javascript pada tab dengan menambahkan baris berikut sebelum
</head>.

<script src="js/bootstrap-tab.js"></script>

Hasilnya akan seperti gambar berikut :

C.9 Inline Label dan Badges
Pada panduan kali ini akan dijelaskan bagaimana membuat inline label dan badges.
Untuk syntax yang digunakan adalah .label.
Untuk kode label di bagi menjadi 6 bagian yaitu :
Default → class=”label”
Success → class=”label-success”
Warning → class=”label-warning”
Important → class=”label-important”
Info → class=”label-info”
Inverse → class=”label-inverse”

Berikut contoh kode, tambahkan di HTML yang telah dibuat.


<p><span class=”label”>Default</span></p>
<p><span class=”label label-success”>Success</span></p>
<p><span class=”label label-warning”>Warning</span></p>
<p><span class=”label label-important”>Important</span></p>
<p><span class=”label label-info”>Info</span></p>
<p><span class=”label label-inverse”>Inverse</span></p>

Untuk pembagian badges hampir sama dengan label, ubah semua kode label di atas menjadi
badge.


<p><span class=”badge”>Default</span></p>
<p><span class=”badge badge-success”>Success</span></p>
<p><span class=”badge badge-warning”>Warning</span></p>
<p><span class=”badge badge-important”>Important</span></p>
<p><span class=”badge badge-info”>Info</span></p>
<p><span class=”badge badge-inverse”>Inverse</span></p>

C.10 Thumbnail
Pada panduan ini akan membahas bagaimana cara membuat thumbnail, class yang
digunakan adalah thumbnails.

Untuk percobaan, ganti kode pada content pertama dan content kedua dengan kode di
bawah ini.

10px">
<h4>Responsive</h4>
<ul class="thumbnails">


<li class="span12">
<div class="thumbnail">
<img src="img/responsive.jpg" alt="product
1">
<div class="caption">
<h5>Responsive dengan
Bootstrap</h5>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-
success">Read More</a></p>
</div>
</div>
</li>
</ul>
</div>
10px">
<ul class="thumbnails">
<li class="span12">
<div class="thumbnail">
<img src="img/metrostyle.jpg" alt="product
2">
<div class="caption">
<p>Lorem ipsum dolor sit amet,


labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-
success">Read More</a></p>
</div>
</div>
</li>
</ul>
</div>

Dan hasilnya akan seperti gambar di bawah ini.

C.11 Progress Bar
Progress Bar sering digunakan untuk mendeskripsikan proses atau jumlah, untuk
menggunakannya class progress.


Class progress pada bootstrap di bagi menjadi 3 yaitu:
progress, progress striped, dan progress striped active.

Untuk contoh kode dapat menggunakan kode di bawah ini.

<h3>Progress Bar</h3>
<div class="progress">
<div class="bar" style="width: 40%;"></div>
</div>
<h3>Progress Bar dengan efek striped</h3>
<div class="progress progress-striped">
</div>
<h3>Program Bar dengan efek striped dan animasi</h3>
<div class="progress progress-striped active">
</div>

Dan hasilnya akan tanpak seperti gambar di bawah ini.


Progress Bar juga di bagi menjadi 4 fungsi, yaitu :
Info → progress-info
Success → progress-success
Warning → progress-warning
Danger → progress-danger
Berikut contoh kodenya :

<h3>Progress bars dengan berbagai warna</h3>
<div class="progress progress-info progress-striped"
style="margin-bottom: 9px;">
<div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped active"
style="margin-bottom: 9px;"> <div class="bar" style="width:
40%"></div>
</div>
<div class="progress progress-warning progress-striped"


</div>
<div class="progress progress-danger progress-striped active"
</div>

dan tampilannya akan seperti gambar di bawah ini.

C.12 Breadcrumbs
Breadcrumbs adalah bantuan navigasi yang menginformasikan kepada pengguna
mengenai posisi atau letak sebuah artikel itu berada. Untuk menambahkan breadcrumbs
pada bootstrap adalah dengan menggunakan class breadcrumb.

Tambahkan kode contoh breadcrumbs di bawah ini setelah header.

<div class="row">
<ul class="breadcrumb" style="margin-left: 20px">
<li>
<a href="#">Home</a> <span


class="divider">></span>
</li>
<li>
<a href="#">Responsive</a> <span
class="divider">></span>
</li>
<li class="active">Bootstrap</li>
</ul>
</div>

Tampilannya akan seperti gambar di bawah ini.

C.13 Pagination
Pada langkah selanjutnya adalah membuat pagination untuk halaman HTML yang
sedang dibuat, pagination pada bootstrap berfungsi membagi artikel menjadi beberapa
halaman untuk menghindari artikel yang panjang dalam satu halaman HTML.

Terdapat 3 contoh kode pagination, yaitu :
Multicon-page Pagination
untuk menggunakan multicon-page, gunakan class pagination.

<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>


<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>

Pager dengan Next dan Previous
class yang digunakan untuk menampilkan pager next dan previous adalah 'pager'. Berikut
contoh kodenya.

<ul class="pager">
<li>
<a href="#">Previous</a>
</li>


<li>
<a href="#">Next</a>
</li>
</ul>

Pager dengan Old dan Newer
class yang digunakan sama dengan next dan previous, hanya bedanya, posisi untuk previous
dan next berada di tengah, sedangkan untuk old dan newer, posisinya berada di ujung kiri
untuk old, dan ujung kanan untuk newer.


C.14 Alert dan Error
Di pembahasan ini akan membahas fungsi bootstrap lain yaitu fungsi untuk menampilkan
alert dan error. Untuk kode dapat melihat contohnya di bawah ini.

Pesan Pemberitahuan
Gunakan class alert untuk menampilkan pesan pemberitahuan.

<div class="alert">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Ini contoh adalah pesan
pemberitahuan !.
</div>


Seharusnya untuk pesan pemberitahuan dapat di tutup/close setelah mengklik tombol 'X' di
ujung kanan, tetapi fungsi tombol 'X' tidak bisa, ini dikarenakan harus ada javascript yang
mengaktifkan fungsi tersebut.

Tambahkan javascript untuk alert di HTML.

<script src="js/bootstrap-alert.js"></script>

Pesan Pemberitahuan, Pesan Kesalahan, Pesan Keberhasilan, dan Pesan Informasi
Bootstrap juga menyediakan fungsi untuk menampilkan pesan kesalahan, pesan
keberhasilan dan pesan informasi selain dari menampilkan pesan pemberitahuan, untuk kode
dapat melihat contohnya di bawah ini.

<div class="alert">
<strong>Warning!</strong> Ini adalah contoh pesan
pemberitahuan !.
</div>
<div class="alert alert-error">
<strong>Error!</strong> Ini adalah contoh pesan kesalahan !.
</div>


<div class="alert alert-success">
<strong>Success!</strong> Ini adalah contoh pesan keberhasilan
!.
</div>
<div class="alert alert-info">
<strong>Info!</strong> Ini adalah contoh pesan informasi !.
</div>

C.15 Modal
Untuk menambahkan fungsi modal pada HTML, tambahkan javascript berikut di HTML.
<script src="js/bootstrap-modal.js"></script>
Sedangkan untuk tampilan modalnya menggunakan class modal-header untuk headernya,
modal-body untuk isiannya dan modal-footer untuk bagian footernya.

Untuk kodenya dapat melihat contohnya di bawah ini.


<h3>Contoh Membuat Modal dengan Twitter Bootstrap</h3>
<div id="example" class="modal hide fade in" style="display:
none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Ini Modal Header</h3>
</div>
<div class="modal-body">
<h4>Modal Body</h4>
<p>Anda dapat menambahkan artikel atau kode
lainnya disini.</p> </div>
<div class="modal-footer">
<a href="#" class="btn" data-
dismiss="modal">Close</a>
</div>
</div>

<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Jalankan
modal</a></p>


C.16 Popover dan Tooltip
Fungsi Popover pada bootstrap adalah untuk menampilkan popup yang akan muncul ketika
mouse mengarahkan ke tombol atau tulisan tertentu. Popup itu dapat berupa penjelasan,
jabaran, atau pendapat.

Untuk javascript yang dibutuhkan ada 2 yaitu boostrap-tooltip dan bootstrap-popover.
Tambahkan baris berikut untuk memanggil javascript tersebut.

<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover();
});
</script>

Untuk contoh kode dapat meilhat contoh di bawah ini.

<h3>Contoh Membuat Popover dengan Twitter Bootstrap</h3>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover"
data-content="Sangat mudah membuat tooltip untuk HTML!" data-
original-title="Twitter Bootstrap Popover">hover dari popover</a>
</div>


C.17 ScrollSpy
ScrollSpy pada bootstrap digunakan untuk menunjukkan atau mengarahkan tab yang
akan dituju dalam satu halaman.
Untuk menggunakan fitur tersebut, tambahkan javascript di bawah ini di HTML.

<script src="js/bootstrap-scrollspy.js"></script>

Setelah itu tambahkan kode di bawah ini pada sidebar HTML, pada sidebar ganti list kedua
dan ketiga menjadi seperti di bawah ini.

<li><a href="#responsive"><i class="icon-book"></i>
Responsive</a></li>
<li><a href="#metrostyle"><i class="icon-pencil"></i> Metro
Style</a></li>

Kemudian arahkan list tersebut ke content pertama dan content kedua pada halaman yang
sama dengan menambahkan kode di bawah ini.

<div class="row-fluid" data-spy="scroll" data-
target="#navbarExample">


Pada list di atas pada a href telah di arahkan ke url yang dimaksud, tambahkan content
pertama dan kedua dengan id yang dimaksud.

<h4 id="responsive">Responsive</h4>
<h4 id="metrostyle">Metro Style</h4>

Kemudian coba sekali lagi dengan mengklik list responsive, actionnya akan mengarahkannya
ke baris yang dimaksud.

C.18 Carousel
Bootstrap juga memiliki fitur image slider bernama carousel. Dengan fitur ini, dapat
menampilkan gambar dalam bentuk slide.
Untuk class yang digunakan adalah carousel slide, carousel-inner dan carousel-control.
Di Tampilan HTML sebelumnya, di bagian bawah header terdapat bagian untuk meletakkan
bagian gambar, ubah letak tersebut dengan kode di bawah ini.


<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="img/1.png"
/></div>
<div class="item"><img src="img/2.png" /></div>
</div>
<a class="carousel-control left" href="#myCarousel" data-
slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-
slide="next">&rsaquo;</a>
</div>

Untuk saat ini, slider tidak dapat berjalan atau diam, dikarenakan belum adanya fungsi
javascript yang menjalankan slider tersebut, tambahkan script di bawah ini di atas </head>.
<script src="js/bootstrap-carousel.js"></script>


C.19 Collapse
Collapse pada Bootstrap kegunaannya hampir sama dengan drop down pada navigasi,
bedanya pada fitur Collapse, drop downnya penuh satu halaman, sedangkan drop down pada
navigasi menghalangi layar di belakangnya. Untuk mengetahui lebih lanjut apa itu Collapse,
silahkan lihat kode di bawah ini.

<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-
toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Klik untuk memperluas. Klik sekali
lagi untuk menutup. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body
collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet,
labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>
</div>
</div>


toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Klik untuk memperluas. Klik sekali lagi
untuk menutup. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body
collapse">
</div>
</div>
</div>
toggle="collapse" data-parent="#accordion2"
href="#collapseThree">
Klik untuk memperluas. Klik sekali
lagi untuk menutup. Part III.


</a>
</div>
<div id="collapseThree" class="accordion-body
collapse">
</div>
</div>
</div>
</div>

Pada tampilan di atas fungsi dari Collapse masih belum berjalan, tambahkan dengan
javascript bootstrap-collapse.


Pada Gambar di atas, ketika layout dikecilkan, sisi kanan desain web akan tertutup, beda
ketika dalam mode responsive, layout akan menyesuaikan.


Untuk membuat HTML dalam mode responsive, cukup mudah tinggal tambahkan CSS di
bawah ini sebelum </head>.

<link href="css/bootstrap-responsive.css" rel="stylesheet">


~ Selamat Mencoba ~


Responsive bootstrap v.1.1

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Responsive bootstrap v.1.1

Ähnlich wie Responsive bootstrap v.1.1 (18)

Mehr von The World Bank

Mehr von The World Bank (20)

Responsive bootstrap v.1.1