Post on 29-Nov-2014
description
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,
Distributed by Fluider Team 3
untuk membuat struktur dari grid.
<div class="container">
<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">
Distributed by Fluider Team 4
</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>
Distributed by Fluider Team 5
<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.
Distributed by Fluider Team 6
<div class="row">
<div class="jarak span12 green">
</div>
</div>
<div class="row">
<div class="jarak span6 blue">
</div>
<div class="jarak span6 blue">
</div>
</div>
<div class="row">
<div class="jarak span4 orange">
</div>
<div class="jarak span4 orange">
</div>
<div class="jarak span4 orange">
</div>
</div>
<div class="row">
<div class="jarak span3 red">
</div>
<div class="jarak span3 red">
</div>
<div class="jarak span3 red">
</div>
<div class="jarak span3 red">
</div>
</div>
<div class="row">
Distributed by Fluider Team 7
<div class="jarak span2 purple">
</div>
<div class="jarak span2 purple">
</div>
<div class="jarak span2 purple">
</div>
<div class="jarak span2 purple">
</div>
<div class="jarak span2 purple">
</div>
<div class="jarak span2 purple">
</div>
</div>
<div class="row">
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
Distributed by Fluider Team 8
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
<div class="jarak span1 yellow">
</div>
</div>
Maka akan tampak struktur grid memenuhi 12 kolom tiap barisnya seperti tampilan HTML di
bawah ini.
Distributed by Fluider Team 9
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="container">
<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="container">
<div class="row">
<div class="span12 yellow jarak">
Content Header
</div>
</div>
Distributed by Fluider Team 10
<div class="row">
<div class="span4 orange jarak">
Content Pertama
</div>
<div class="span4 orange jarak">
Content Kedua
</div>
<div class="span4 orange jarak">
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="container">
<div class="row">
<div class="span12">Footer</div>
</div>
</div>
</footer>
Maka hasil struktur HTMLnya akan seperti ini.
Distributed by Fluider Team 11
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="container">
<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>
Distributed by Fluider Team 12
</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>
<h2>Ini adalah header h2</h2>
<h3>Ini adalah header h3</h3>
<h4>Ini adalah header h4</h4>
<h5>Ini adalah header h5</h5>
<h6>Ini adalah header h6</h6>
<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.
Distributed by Fluider Team 13
<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>
Distributed by Fluider Team 14
Untuk yang Content yang terakhir yaitu Content ketiga, berikan code untuk menampilkan
penggunaan Unordered List sama Ordered List.
<div class="span4 orange" style="margin-top: 10px; margin-bottom:
10px">
<h4>Penggunaan Unordered List dan Ordered List</h4>
<p>
<ol>
<li>Penggunaan Ordered List(ol)</li>
<li>Penggunaan Ordered List(ol)</li>
<li>Penggunaan Ordered List(ol)</li>
</ol>
<ul>
<li>Penggunaan Unordered List(ul)</li>
<li>Penggunaan Unordered List(ul)</li>
<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="container">
<div class="row">
<div class="span12" style="color: #fff;">
<h5>© 2013 Fluider.org </h5>
</div>
</div>
Distributed by Fluider Team 15
</div>
</footer>
Setelah semuanya selesai, maka tampilannya akan berubah menjadi seperti gambar di
bawah ini.
Distributed by Fluider Team 16
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="container">
<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>
Distributed by Fluider Team 17
<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
Distributed by Fluider Team 18
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.
Distributed by Fluider Team 19
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">
Distributed by Fluider Team 20
<input type="text" class="input-small" placeholder="Username">
<input type="password" class="input-small"
placeholder="Password">
<label class="checkbox">
<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">
Distributed by Fluider Team 21
<p class="help-block">
In addition to freeform text, any HTML5
text-based input appears like so.
</p>
</div>
</div>
<div class="control-group">
<label class="control-label"
for="checkbox">Checkbox</label>
<div class="controls">
<label class="checkbox">
<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>
<div class="control-group">
<label class="control-label"
for="select01">Select list</label>
<div class="controls">
<select id="select01">
<option>--Pilihan1--</option>
<option>--Pilihan2--</option>
<option>--Pilihan3--</option>
<option>--Pilihan4--</option>
<option>--Pilihan5--</option>
</select>
Distributed by Fluider Team 22
</div>
</div>
<div class="control-group">
<label class="control-label"
for="multiSelect">Multicon-select</label>
<div class="controls">
<select multiple="multiple"
id="multiSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label"
for="fileInput">File input</label>
<div class="controls">
<input class="input-file"
id="fileInput" type="file">
</div>
</div>
<div class="control-group">
<label class="control-label"
for="textarea">Textarea</label>
<div class="controls">
<textarea class="input-xlarge"
Distributed by Fluider Team 23
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.
Distributed by Fluider Team 24
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>
<form class="well form-horizontal">
<fieldset>
<legend>Form Controls Bootstrap</legend>
<div class="control-group">
<label class="control-label"
Distributed by Fluider Team 25
for="input01">Fokus Input</label>
<div class="controls">
<input type="text" class="input-
xlarge" id="input01">
<p class="help-block">Input dalam
mode biasa dan dapat di tulis dan di baca.</p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="input01">Raed
only Input</label>
<div class="controls">
<input type="text" class="input-
xlarge" id="input01" readonly="true">
<p class="help-block">Input dalam
mode read-only, hanya bisa di baca dan fokus.</p>
</div>
</div>
<div class="control-group">
<label class="control-label"
for="input01">Disabled Input</label>
<div class="controls">
<input type="text" class="input-
xlarge" id="input01" disabled>
<p class="help-block">Input tidak
bisa digunakan alias di disable.</p>
</div>
</div>
<div class="control-group">
Distributed by Fluider Team 26
<label class="control-label"
for="optionsCheckbox" reado>Checkbox (disabled)</label>
<div class="controls">
<label class="checkbox">
<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 :
Distributed by Fluider Team 27
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>
<form class="well form-horizontal">
<fieldset>
<legend>Form validasi error, warning dan
success</legend>
<div class="control-group error">
<label class="control-label"
for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
Distributed by Fluider Team 28
<span class="help-inline">Please
correct the error</span>
</div>
</div>
<div class="control-group warning">
<label class="control-label"
for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something
may have gone wrong</span>
</div>
</div>
<div class="control-group success">
<label class="control-label"
for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-
inline">Successfully entered</span>
</div>
</div>
<div class="control-group success">
<label class="control-label"
for="selectError">Select with success</label>
<div class="controls">
<select id="selectError">
<option>1</option>
<option>2</option>
Distributed by Fluider Team 29
<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 :
Distributed by Fluider Team 30
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">
<div class="container">
<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>
Distributed by Fluider Team 31
<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 :
Distributed by Fluider Team 32
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.
Distributed by Fluider Team 33
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.
Distributed by Fluider Team 34
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>
<ul class="dropdown-menu">
<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>
Distributed by Fluider Team 35
</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>
Distributed by Fluider Team 36
Membuat Navigasi Pills
<ul class="nav nav-pills">
<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>
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>
Distributed by Fluider Team 37
<div class="span9" style="margin-top: 10px;">
<div class="row-fluid">
<div class="span12 yellow">
<ul class="nav nav-pills">
<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>
<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>
Distributed by Fluider Team 38
<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.
Distributed by Fluider Team 39
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">
<li class="active"><a href="#">Home</a></li>
Distributed by Fluider Team 40
<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 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">
<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>
Distributed by Fluider Team 41
Menambah Dropdown pada Navigation Tabs
Untuk membuat dropdown pada navigation tabs, perlu menggunakan class dropdown, contoh
kodenya dapat dilihat di bawah ini.
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li class="divider"></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">BackEnd<b class="caret bottom-
Distributed by Fluider Team 42
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 class="divider"></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.
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
<ul class="dropdown-menu">
Distributed by Fluider Team 43
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li class="divider"></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-
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 class="divider"></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>
Distributed by Fluider Team 44
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 class="active"><a href="#">Home</a></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 class="divider"></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.
Distributed by Fluider Team 45
<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 class="divider"></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.
Distributed by Fluider Team 46
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-
toggle="tab">Home</a></li>
<li><a href="#2" data-toggle="tab">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-
toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li class="divider"></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-
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 class="divider"></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
Distributed by Fluider Team 47
</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>
Distributed by Fluider Team 48
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.
Distributed by Fluider Team 49
<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.
Distributed by Fluider Team 50
<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.
<div class="span6 orange" style="margin-top: 10px; margin-bottom:
10px">
<h4>Responsive</h4>
<ul class="thumbnails">
Distributed by Fluider Team 51
<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>
<div class="span6 orange" style="margin-top: 10px; margin-bottom:
10px">
<h4>Metro Style</h4>
<ul class="thumbnails">
<li class="span12">
<div class="thumbnail">
<img src="img/metrostyle.jpg" alt="product
2">
<div class="caption">
<h5>Metro Style</h5>
<p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
Distributed by Fluider Team 52
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.
Distributed by Fluider Team 53
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 class="bar" style="width: 40%;"></div>
</div>
<h3>Program Bar dengan efek striped dan animasi</h3>
<div class="progress progress-striped active">
<div class="bar" style="width: 40%;"></div>
</div>
Dan hasilnya akan tanpak seperti gambar di bawah ini.
Distributed by Fluider Team 54
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"
Distributed by Fluider Team 55
style="margin-bottom: 9px;">
<div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped active"
style="margin-bottom: 9px;">
<div class="bar" style="width: 80%"></div>
</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
Distributed by Fluider Team 56
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>
Distributed by Fluider Team 57
<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>
Distributed by Fluider Team 58
<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.
Distributed by Fluider Team 59
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>
Distributed by Fluider Team 60
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">
<a class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong> Ini adalah contoh pesan
pemberitahuan !.
</div>
<div class="alert alert-error">
<a class="close" data-dismiss="alert">×</a>
<strong>Error!</strong> Ini adalah contoh pesan kesalahan !.
</div>
Distributed by Fluider Team 61
<div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<strong>Success!</strong> Ini adalah contoh pesan keberhasilan
!.
</div>
<div class="alert alert-info">
<a class="close" data-dismiss="alert">×</a>
<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.
Distributed by Fluider Team 62
<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>
Distributed by Fluider Team 63
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>
Distributed by Fluider Team 64
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">
Distributed by Fluider Team 65
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.
Distributed by Fluider Team 66
<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 class="item"><img src="img/3.png" /></div>
<div class="item"><img src="img/4.png" /></div>
</div>
<a class="carousel-control left" href="#myCarousel" data-
slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-
slide="next">›</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>
Distributed by Fluider Team 67
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,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
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>
Distributed by Fluider Team 68
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-
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 class="accordion-inner">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
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>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-
toggle="collapse" data-parent="#accordion2"
href="#collapseThree">
Klik untuk memperluas. Klik sekali
lagi untuk menutup. Part III.
Distributed by Fluider Team 69
</a>
</div>
<div id="collapseThree" class="accordion-body
collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
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>
</div>
Pada tampilan di atas fungsi dari Collapse masih belum berjalan, tambahkan dengan
javascript bootstrap-collapse.
Distributed by Fluider Team 70
<script src="js/bootstrap-collapse.js"></script>
Ketika mulai mengklik yang part I, penjelasan akan otomotis bergeser kebawah pada part I,
tapi ketika mengklik part II, penjelasan pada part I kembali menutup, dan penjelasan pada
part II bergeser ke bawah, dan begitu seterusnya ketika mengklik part yang lain.
C.20 Responsive
Pada pembahasan yang terakhir, yaitu mengubah desain HTML yang ada menjadi
dapat di tampilkan pada layout mobile, layout tablet dan layout desktop dalam sekaligus.
Beda antara desain yang tidak responsive dan yang responsive adalah resolusi web yang
tidak dapat menyesuaikan layout.
Seperti contoh di bawah ini.
Distributed by Fluider Team 71
Pada Gambar di atas, ketika layout dikecilkan, sisi kanan desain web akan tertutup, beda
ketika dalam mode responsive, layout akan menyesuaikan.
Distributed by Fluider Team 72
Untuk membuat HTML dalam mode responsive, cukup mudah tinggal tambahkan CSS di
bawah ini sebelum </head>.
<link href="css/bootstrap-responsive.css" rel="stylesheet">
Distributed by Fluider Team 73
~ Selamat Mencoba ~
Distributed by Fluider Team 74