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

http://twitter.github.com/bootstrap/

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.


http://fortawesome.github.com/Font-Awesome/

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

Documents