Responsive Bootstrap

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 membanun web aplikasi se!ara !epat. Termasuk di
dalamn"a "aitu #$$ dan %avas!ript.
Toolkit ini dapat diunduh di http://twitter.github.com/bootstrap/& 'kstrak (older bootstrap "an
telah diunduh dan toolkit siap diunakan.
B. Persiapan
)da dua !ara untuk menunakan Twitter Bootstrap di *TM+ :
1. Memanil #$$ Bootstrap denan menambahkan baris berikut sebelum ,-head.
,link rel/0st"lesheet0 hre(/0-bootstrap-!ss-bootstrap.!ss0.
2. )tau denan memanil +'$$ Bootstrap 1#$$ 2repro!essor "an diunakan untuk
memper!epat dan mempermudah web development3 denan menambahkan baris di
bawah ini.
,link rel/0st"lesheet-less0 hre(/0-bootstrap-less-bootstrap.less0.
%ava!ript dan #$$ dalam bootstrap merupakan satu kesatuan untuk membuat sebuah
desain web "an indah& untuk memanil %avas!ript Bootstrap dapat menambahkan
baris dibawah ini.
,s!ript sr!/4-bootstrap-5s-bootstrap.5s4.,-s!ript.
C. Start
C.1 Grid System
De(ault dari 6rid $"stem Bootstrap adalah lebar 780p9 dan 12 kolom. 6rid $"stem ini
diunakan untuk pembaian resolusi la"ar ke dalam 8 responsive variasi untuk phone& tablet
portrait and tablet lands!ape& small desktop& dan lare wide s!reen desktop.
Distributed by Fluider Team 2
2ertama& buat sebuah (ile *TM+ denan standar di bawah ini ditambah denan #$$ dan
%avas!ript dari Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fluider - Titter !""tstra# Tut"rial<$title>
<lin% href="$&""tstra#$css$&""tstra#'css"
rel="st(lesheet">
<scri#t src=)$&""tstra#$*s$&""tstra#'*s)><$scri#t>
<$head>
<&"d(>
+'
<$&"d(>
<$html>
Untuk membuat sebuah rid s"stem pada bootstrap& dibutuhkan beberapa !lass seperti :
!ontainer& row dan span& untuk !ontoh penunaan dapat meilhat !ontohn"a di bawah ini.
<di, class="c"ntainer">
<di, class="r"">
<di, class="s#an-.">
<$di,>
<$di,>
<$di,>
untuk menetahui (unsi rid s"stem pada bootstrap& terapkan baris di bawah ini pada *TM+&
untuk membuat struktur dari rid.
<di, class="r"">
<di, class="s#an-.">
<$di,>
<$di,>
<di, class="r"">
<di, class="s#an/">
<$di,>
<di, class="s#an/">
<$di,>
<$di,>
<di, class="r"">
<di, class="s#an0">
<$di,>
<di, class="s#an0">
<$di,>
<di, class="s#an0">
<$di,>
<$di,>
<di, class="r"">
<di, class="s#an1">
<$di,>
<di, class="s#an1">
<$di,>
<di, class="s#an1">
<$di,>
<di, class="s#an1">
<$di,>
<$di,>
<di, class="r"">
<di, class="s#an.">
<$di,>
<di, class="s#an.">
<$di,>
<di, class="s#an.">
<$di,>
<di, class="s#an.">
<$di,>
<di, class="s#an.">
<$di,>
<di, class="s#an.">
<$di,>
<$di,>
<di, class="r"">
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<di, class="s#an-">
<$di,>
<$di,>
<$di,>
Denan !ontoh di atas& tidak dapat menampilkan rid s"stem se!ara kasat mata& untuk
menampilkan warna dari tiap:tiap span& buat sebuah !lass #$$ pada *TM+ denan baris
berikut. +etakkan sebelum ,-head.
<st(le>
'green 2&ac%gr"und-c"l"r3 4C!F51E6 7
'&lue 2&ac%gr"und-c"l"r3 40.8.D16 7
'"range 2&ac%gr"und-c"l"r3 4FF!/086 7
'red 2&ac%gr"und-c"l"r3 4FF/-086 7
'#ur#le 2&ac%gr"und-c"l"r3 458/CD96 7
'(ell" 2&ac%gr"und-c"l"r3 4FFE/086 7
'*ara% 2height3 -88#:6 margin-t"#3 ;#:6 margin-&"tt"m3 ;#:67
<$st(le>
$etelah selesai& terapkan warna "an berbeda dari tiap span& seperti !ontoh di bawah ini.
<di, class="r"">
<di, class="*ara% s#an-. green">
<$di,>
<$di,>
<di, class="r"">
<di, class="*ara% s#an/ &lue">
<$di,>
<di, class="*ara% s#an/ &lue">
<$di,>
<$di,>
<di, class="r"">
<di, class="*ara% s#an0 "range">
<$di,>
<$di,>
<$di,>
<$di,>
<di, class="r"">
<di, class="*ara% s#an1 red">
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
<di, class="r"">
<di, class="*ara% s#an. #ur#le">
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
<di, class="r"">
<di, class="*ara% s#an- (ell"">
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
Distributed by Fluider Team
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
<$di,>
Maka akan tampak struktur rid memenuhi 12 kolom tiap barisn"a seperti tampilan *TM+ di
bawah ini.
Distributed by Fluider Team !
C.2 Layout
Untuk permulaan mendesain responsive web& harus mempun"ai sebuah keranka -
la"out& untuk mempermudah membuat la"out dapat menunakan rid s"stem "an telah
dipela5ari sebelumn"a. ;eranka terbai men5adi 3 baian& "aitu header& !ontent& dan (ooter.
Buatlah la"out seperti lankah:lankah di bawah ini.
Header
2ertama& unakan struktur *TM+ de(ault denan tambahan Bootstrap #$$ < %avas!ript ke
dalam *TM+ baru.
;emudian di dalam ,bod".& berikan !ode di bawah ini.
<header class="green">
<di, class="r"">
<di, class="s#an-."><eader $ =a,igasi<$di,>
<$di,>
<$di,>
<$header>
Content
;edua& "an diperlukan sebuah !ontent untuk menampilkan isi atau artikel dari blo&
tambahkan !ode untuk !ontent di bawah ini di bawah ,-header..
<di, class="r"">
<di, class="s#an-. (ell" *ara%">
C"ntent <eader
<$di,>
<$di,>
Distributed by Fluider Team "#
<di, class="r"">
<di, class="s#an0 "range *ara%">
C"ntent Pertama
<$di,>
C"ntent >edua
<$di,>
C"ntent >etiga
<$di,>
<$di,>
<$di,>
Footer
;etia& Footer ber(unsi menampilkan si pembuat website& pemilik website& atau pembuat
desain& untuk menambahkan (ooter unakan !ode di bawah ini.
<f""ter class="&lue">
<di, class="r"">
<di, class="s#an-.">F""ter<$di,>
<$di,>
<$di,>
<$f""ter>
Maka hasil struktur *TM+n"a akan seperti ini.
Distributed by Fluider Team ""
C.3 Typograpy
T"poraph" pada dasarn"a diunakan untuk memperindah tampilan atau susunan te9t.
Untuk lankah selan5utn"a unakan t"poraph" untuk memasukkan !ontent - artikel ke dalam
*TM+.
Ubah eader sebelumn"a men5adi seperti di bawah ini.
<header class="green">
<di, class="r"">
<di, class="s#an-."><h1>Fluider<$h1><$di,>
<$di,>
<$di,>
<$header>
$etelah itu pada !ontent& tambahkan no imae denan menambahkan baris berikut:
<di, class="r"">
<di, class="s#an-." st(le="margin-t"#3 -8#:6">
<img src="htt#3$$dumm(image'c"m$-.88:188$ddd$fff" $>
<$di,>
Distributed by Fluider Team "2
<$di,>
Ubah 5ua pada Content Header denan baris di bawah ini& untuk menampilkan t"poraph"
h1& h2& h3& h8& h=& h>& parara(& penunaan stron& dan addr.
<di, class="r"">
<di, class="s#an-. (ell"" st(le="margin-t"#3 -8#:6">
<h->?ni adalah header h-<$h->
<h.>?ni adalah header h.<$h.>
<h1>?ni adalah header h1<$h1>
<h0>?ni adalah header h0<$h0>
<h;>?ni adalah header h;<$h;>
<h/>?ni adalah header h/<$h/>
<#>
?ni meru#a%an #aragraf' @"rem i#sum d"l"r sit ametA
c"nsectetuer adi#iscing elitA sed diam n"numm( ni&h euism"d
tincidunt ut la"reet d"l"re magna aliBuam erat ,"lut#at'
<$#>
<#>?ni mengguna%an <str"ng>Ctr"ng<$str"ng> di dalam
#aragraf'<$#>
<#>?ni #enggunaan a&&r #ada sing%atan <a&&r
title="?nd"nesia">?=D<$a&&r>'
<$#>
<$di,>
<$di,>
2ada baian Content Pertama& berikan !ontoh t"poraph" untuk penunaan address&
berikut !oden"a.
<di, class="s#an0 "range" st(le="margin-t"#3 -8#:6 margin-&"tt"m3
-8#:">
<h0>Penggunaan Dddress<$h0>
<#>@"rem i#sum d"l"r sit ametA c"nsectetuer adi#iscing elitA
sed diam n"numm( ni&h euism"d tincidunt ut la"reet d"l"re magna
aliBuam erat ,"lut#at'<$#>
<address>
<str"ng>Fluider<$str"ng><&r$>
Cada(a .<&r$>
Cem#a%a !aruA Ea%arta Pusat'
<$address>
<$di,>
$edankan untuk Content "edua Berikan T"poraph" penunaan Blo!k?uote denan !ode
di bawah ini.
<di, class="s#an0" st(le="margin-t"#3 -8#:6 margin-&"tt"m3 -8#:6
c"l"r3 4111">
<h0>Penggunaan !l"c%Bu"tes<$h0>
<&l"c%Bu"te>
<i>@"rem i#sum d"l"r sit ametA c"nsectetuer adi#iscing
elitA sed diam n"numm( ni&h euism"d tincidunt ut la"reet d"l"re
magna aliBuam erat ,"lut#at' Ft isi enim ad minim ,eniamA Buis
n"strud e:erci tati"n ullamc"r#er susci#it l"&"rtis nisl ut
aliBui# e: ea c"mm"d" c"nseBuat'
<$i>
<$&l"c%Bu"te>
<$di,>
Untuk "an #ontent "an terakhir "aitu Content #etiga& berikan !ode untuk menampilkan
penunaan Unordered +ist sama @rdered +ist.
<di, class="s#an0 "range" st(le="margin-t"#3 -8#:6 margin-&"tt"m3
-8#:">
<h0>Penggunaan Fn"rdered @ist dan Ordered @ist<$h0>
<#>
<"l>
<li>Penggunaan Ordered @istG"lH<$li>
<$"l>
<ul>
<li>Penggunaan Fn"rdered @istGulH<$li>
<$ul>
<$#>
<$di,>
Aan terakhir& pada $ooter ubah baris (ooter denan baris di bawah ini& untuk merubah warna
(ont dan ukuran.
<f""ter class="&lue">
<di, class="r"">
<di, class="s#an-." st(le="c"l"r3 4fff6">
<h;>Ic"#(6 .8-1 Fluider'"rg <$h;>
<$di,>
<$di,>
<$di,>
<$f""ter>
$etelah semuan"a selesai& maka tampilann"a akan berubah men5adi seperti ambar di
bawah ini.
C.% Ta&el
Tabel serin diunakan untuk menampilkan data "an bersi(at sama dan
dikelompokkan menurut kolom dan baris.
Untuk membuatn"a sebuah tabel pada Bootstrap& diperlukan !lass tr& td dan th&
denan tambahan !lass thead dan tbod"& berikut penunaann"a.
Buat sebuah html baru& kemudian isi baian !ontent denan baris berikut :
<di, class="r"">
<di, class="s#an-." st(le="margin-t"#3 -8#:">
<ta&le class="ta&le ta&le-stri#ed">
<thead>
<tr>
<th>="<$th>
<th>=ama De#an<$th>
<th>=ama !ela%ang<$th>
<th>Ce%"lah<$th>
<th>>felas<$th>
<$tr>
<$thead>
<t&"d(>
<tr>
<td>-'<$td>
<td>Ji%a<$td>
<td>Ki%aati<$td>
<td>CD= Cum&er*" 81<$td>
<td>1<$td>
<$tr>
<tr>
<td>.'<$td>
<td>!udi<$td>
<td>Praset("<$td>
<td>CD= Cum&elim" -8<$td>
<td>;<$td>
<$tr>
<tr>
<td>1'<$td>
<td>="ri<$td>
<td>Lanae<$td>
<td>CD= >arangra*a 8;<$td>
<td>;<$td>
<$tr>
<$t&"d(>
<$ta&le>
<$di,>
<$di,>
<$di,>
*asiln"a akan tampak seperti di bawah ini.
C.' Form
Distributed by Fluider Team "
2ada panduan selan5utn"a akan membahas tentan membuat (orm denan bootstrap&
(orm lebih serin diunakan untuk hal:hal "an bersi(at membutuhkan inputan dari penuna.
$eperti (orm penda(taran& (orm loin& (orm kebutuhan dan lain:lain.
Berikut !ontoh kode untuk membuat sebuah (orm :
(em&uat )erti!al Form Layout
Buatlah sebuah *TM+ baru "an lain& kemudian pada baris awal baian !ontent& tambahkan
baris di bawah ini.
<di, class="s#an-." st(le="margin-t"#3 -8#:">
<h1>Kertical F"rm @a("ut<$h1>
<f"rm class="ell">
<la&el>Fsername<$la&el>
<in#ut t(#e="te:t" class="s#an;" #laceh"lder="username">
<s#an class="hel#-inline">Lasu%%an Fsername Dnda!<$s#an>
<la&el class="chec%&":">
<in#ut t(#e="chec%&":">Centang a#a&ila username Dnda
&enar'
<$la&el>
<&utt"n t(#e="su&mit" class="&tn">Cu&mit<$&utt"n>
<$f"rm>
<$di,>
Maka *asiln"a akan seperti di bawah ini.
Distributed by Fluider Team "!
(em&uat Sear! Form Layout
6unakan !lass (orm:sear!h untuk membuat inputan men5adi block level. Tambahkan !ode di
bawah ini setelah !ode verti!al (orm.
<h1>Cearch F"rm @a("ut<$h1>
<f"rm class="ell">
<la&el>Fsername<$la&el>
<in#ut t(#e="te:t" class="in#ut-medium search-Buer(">
<&utt"n t(#e="su&mit" class="&tn">Cu&mit<$&utt"n>
<$f"rm>
Maka hasiln"a akan seperti ini.
(em&uat *nline Form Layout
6unakan !lass (orm:inline untuk membuat inputan men5adi inline. Tambahkan !ode di bawah
ini setelah !ode sear!h (orm.
<h1>?nline F"rm @a("ut<$h1>
<f"rm class="ell f"rm-inline">
Distributed by Fluider Team 2#
<in#ut t(#e="te:t" class="in#ut-small" #laceh"lder="Fsername">
<in#ut t(#e="#ass"rd" class="in#ut-small"
#laceh"lder="Pass"rd">
<in#ut t(#e="chec%&":"> Jemem&er me
<$la&el>
<&utt"n t(#e="su&mit" class="&tn">Lasu%<$&utt"n>
<$f"rm>
*asiln"a akan seperti di bawah ini.
(em&uat Hori+ontal Form Layout
6unakan !lass (orm:horiBontal untuk membuat inputan men5adi horizontal. Tambahkan !ode
di bawah ini setelah !ode inline (orm.
<h1><"riM"ntal F"rm @a("ut<$h1>
<f"rm class="ell f"rm-h"riM"ntal">
<fieldset>
<legend><"riM"ntal F"rm @a("ut<$legend>
<di, class="c"ntr"l-gr"u#">
<la&el class="c"ntr"l-la&el" f"r="in#ut">Te:t
in#ut<$la&el>
<di, class="c"ntr"ls">
<in#ut t(#e="te:t" class="in#ut-
:large" id="in#ut">
Distributed by Fluider Team 2"
<# class="hel#-&l"c%">
?n additi"n t" freef"rm te:tA an( <TL@;
te:t-&ased in#ut a##ears li%e s"'
<$#>
<$di,>
<$di,>
<la&el class="c"ntr"l-la&el"
f"r="chec%&":">Chec%&":<$la&el>
<in#ut t(#e="chec%&":"
id="chec%&":" ,alue="Pilihan -">
O#ti"n "ne is this and thatN&e
sure t" include h( itOs great
<$la&el>
<$di,>
<$di,>
f"r="select8-">Celect list<$la&el>
<select id="select8-">
<"#ti"n>--Pilihan---<$"#ti"n>
<"#ti"n>--Pilihan.--<$"#ti"n>
<"#ti"n>--Pilihan1--<$"#ti"n>
<"#ti"n>--Pilihan0--<$"#ti"n>
<"#ti"n>--Pilihan;--<$"#ti"n>
<$select>
<$di,>
<$di,>
f"r="multiCelect">Lultic"n-select<$la&el>
<select multi#le="multi#le"
id="multiCelect">
<"#ti"n>-<$"#ti"n>
<"#ti"n>.<$"#ti"n>
<"#ti"n>1<$"#ti"n>
<"#ti"n>0<$"#ti"n>
<"#ti"n>;<$"#ti"n>
<$select>
<$di,>
<$di,>
f"r="file?n#ut">File in#ut<$la&el>
<in#ut class="in#ut-file"
id="file?n#ut" t(#e="file">
<$di,>
<$di,>
f"r="te:tarea">Te:tarea<$la&el>
<te:tarea class="in#ut-:large"
id="te:tarea" r"s="1"><$te:tarea>
<$di,>
<$di,>
<di, class="f"rm-acti"ns">
<&utt"n t(#e="su&mit" class="&tn &tn-#rimar(">
Cim#an Peru&ahan
<$&utt"n>
<&utt"n class="&tn">!atal<$&utt"n>
<$di,>
<$fieldset>
<$f"rm>
%ika berhasil& maka akan tampilann"a seperti ini.
Form Controls
Di dalam toolkit bootstrap disediakan penendalian (orm untuk read:onl"& dan disabled& untuk
!ontoh dapat menunakan kode di bawah ini& letakkan kode di bawah horiBontal (orm la"out.
<h1>F"rm C"ntr"ls<$h1>
<fieldset>
<legend>F"rm C"ntr"ls !""tstra#<$legend>
f"r="in#ut8-">F"%us ?n#ut<$la&el>
:large" id="in#ut8-">
<# class="hel#-&l"c%">?n#ut dalam
m"de &iasa dan da#at di tulis dan di &aca'<$#>
<$di,>
<$di,>
<la&el class="c"ntr"l-la&el" f"r="in#ut8-">Jaed
"nl( ?n#ut<$la&el>
:large" id="in#ut8-" read"nl(="true">
<# class="hel#-&l"c%">?n#ut dalam
m"de read-"nl(A han(a &isa di &aca dan f"%us'<$#>
<$di,>
<$di,>
f"r="in#ut8-">Disa&led ?n#ut<$la&el>
:large" id="in#ut8-" disa&led>
<# class="hel#-&l"c%">?n#ut tida%
&isa diguna%an alias di disa&le'<$#>
<$di,>
<$di,>
f"r=""#ti"nsChec%&":" read">Chec%&": Gdisa&ledH<$la&el>
<in#ut t(#e="chec%&":"
id=""#ti"nsChec%&":" ,alue=""#ti"n-" disa&led>
Chec%&": (ang telah di disa&le'
<$la&el>
<$di,>
<$di,>
<di, class="f"rm-acti"ns">
<&utt"n t(#e="su&mit" class="&tn &tn-#rimar("
disa&led>
Cim#an Peru&ahan Gt"m&"l (ang di disa&elH
<$&utt"n>
<&utt"n class="&tn">Cancel<$&utt"n>
<$di,>
<$fieldset>
<$f"rm>
*asiln"a akan tampak seperti ambar berikut :
Form *nput Style
Di dalam bootstrap 5ua disediakan (orm input st"le untuk error& warnin& su!!ess& sele!t
su!!ess. Berikut !ontoh koden"a.
<h1>F"rm ?n#ut Ct(le<$h1>
<fieldset>
<legend>F"rm ,alidasi err"rA arning dan
success<$legend>
<di, class="c"ntr"l-gr"u# err"r">
f"r="in#utErr"r">?n#ut ith err"r<$la&el>
<in#ut t(#e="te:t" id="in#utErr"r">
<s#an class="hel#-inline">Please
c"rrect the err"r<$s#an>
<$di,>
<$di,>
<di, class="c"ntr"l-gr"u# arning">
f"r="in#utParning">?n#ut ith arning<$la&el>
<in#ut t(#e="te:t" id="in#utParning">
<s#an class="hel#-inline">C"mething
ma( ha,e g"ne r"ng<$s#an>
<$di,>
<$di,>
<di, class="c"ntr"l-gr"u# success">
f"r="in#utCuccess">?n#ut ith success<$la&el>
<in#ut t(#e="te:t" id="in#utCuccess">
<s#an class="hel#-
inline">Cuccessfull( entered<$s#an>
<$di,>
<$di,>
<di, class="c"ntr"l-gr"u# success">
f"r="selectErr"r">Celect ith success<$la&el>
<select id="selectErr"r">
<"#ti"n>-<$"#ti"n>
<"#ti"n>.<$"#ti"n>
Distributed by Fluider Team 2!
<"#ti"n>1<$"#ti"n>
<"#ti"n>0<$"#ti"n>
<"#ti"n>;<$"#ti"n>
<$select>
<s#an class="hel#-
inline">Cuccessfull( selected<$s#an>
<$di,>
<$di,>
<$fieldset>
<$f"rm>
Maka *asiln"a akan seperti ambar berikut :
C., -a.&ar
pada baian struktur *TM+ "an telah dibuat& ada baian bernama header. Dalam
panduan ini akan dibahas baaimana !ara menanti header men5adi naviasi.
Caviasi pada umumn"a beruna untuk mempermudah pembaian artikel& data& atau
spesi(ikasi& untuk menambahkan naviasi pada header& ubah baris ,header....,-header.
denan baris di bawah ini.
<header st(le="margin-&"tt"m3 08#:">
<di, class="na,&ar na,&ar-fi:ed-t"#">
<di, class="na,&ar-inner">
<ul class="na,">
<li class="acti,e">
<a class="&rand" st(le="margin-
left3 8" href="4">Fluider<$a>
<$li>
<li><a href="4">Jes#"nsi,e<$a><$li>
<li><a href="4">Letr" Ct(le<$a><$li>
<li><a href="4">@eaflet<$a><$li>
<$ul>
<ul class="na,">
<li class="dr"#d"n">
<a href="4" class="dr"#d"n-
t"ggle" data-t"ggle="dr"#d"n"> Cer,ices <&
class="caret"><$&><$a>
<ul class="dr"#d"n-menu">
<li><a href="4">Pe&
Design<$a><$li>
<li><a href="4">Pe&
de,el"#ment<$a><$li>
<li><a href="4">P"rd#ress Theme
de,el"#ment<$a><$li>
<$ul>
<$li>
<$ul>
<f"rm class="na,&ar-search #ull-left">
<in#ut t(#e="te:t" class="search-Buer("
#laceh"lder="Cearch">
<$f"rm>
<$di,>
<$di,>
<$di,>
<$header>
Maka tampilann"a akan seperti berikut :
Untuk (unsi drop down tidak ber(unsi dikarenakan tidak adan"a 5avas!ript "an
men5alankan (unsi tersebut& tambahkan 5?uer".5s dan bootstrap:dropdown.5s ke dalam
*TM+& letakkan sebelum ,-head.
,s!ript sr!/05s-5?uer".5s0.,-s!ript.
,s!ript sr!/05s-bootstrap:dropdown.5s0.,-s!ript.
De(resh halaman *TM+ di Eeb Browser kemudian !oba klik dropdown sekali lai.
C./ *!on
2ada 2embahasan selan5utn"a& "aitu menambahkan i!on& denan menunakan (ont
awesome "an dapat di download di http://$ortawesome.github.com/Fo%t&'wesome/.
$ebelum menunakann"a& tambahkan baris berikut ke baian atas ,-head..
,link rel/0st"lesheet0 hre(/0-bootstrap-!ss-(ont:awesome.!ss0.
$"nta9 "an diunakan untuk memanil i!on adalah :
<i class=)class namaQic"n)><$i>
(enam&a#an *!on di -a.igasi
$etelah pada pembahasan sebelumn"a menambahkan naviasi di header& selan5utn"a dapat
di!oba menambahkan i!on di naviasi& ubah baris naviasi Desponsive& Metro $t"le dan
+ea(let denan baris di bawah ini.
<li><a href="4"><i class="ic"n-ta&let"><$i> Jes#"nsi,e<$a><$li>
<li><a href="4"><i class="ic"n-#lus-sign-alt"><$i> Letr"
Ct(le<$a><$li>
<li><a href="4"><i class="ic"n-leaf"><$i> @eaflet<$a><$li>
Maka hasiln"a akan seperti ambar di bawah ini.
(enam&a#an *!on di Button dan Button Group
$etelah men!oba menambahkan i!on di Caviasi& selan5utn"a men!oba menambahkan i!on
di button dan button roup.
$"nta9 "an diperlukan untuk menabunkan i!on dan button adalah :
<di, class=)&tn-gr"u#)>
<a class=)&tn) href=)4)><i class=)ic"n-refresh)><$i>
<$di,>
Fntu% c"nt"hA guna%an c"de di &aah ini dan leta%%an setelah f"rm
class search #ada na,igasi''
<ul class="na, #ull-right">
<di, class="&tn-gr"u#">
<a class="&tn &tn-#rimar(" href="4"><i
class="ic"n-user ic"n-hite"><$i> Fser<$a>
<a class="&tn &tn-#rimar( dr"#d"n-t"ggle"
data-t"ggle="dr"#d"n" href="4"><s#an class="caret"><$s#an><$a>
<li><a href="4"><i class="ic"n-#encil"><$i>
Edit<$a><$li>
<li><a href="4"><i class="ic"n-trash"><$i>
Delete<$a><$li>
<li><a href="4"><i class="ic"n-&an-circle"><$i>
!an<$a><$li>
<li class="di,ider"><$li>
<li><a href="4"><i class="i"><$i>
@"g"ut<$a><$li>
<$ul>
<$di,>
<$ul>
*asiln"a akan seperti ambar di bawah ini.
C.0 -a.igation Ta&s dan Pills
Untuk pembela5aran selan5utn"a "aitu penenalan tabs dan pills dari bootstrap& untuk
memanil tabs dapat menunakan !lass .nav:tabs dan 5ika memanil pills dapat
menunakan .nav:pills. Berikut !ontoh kode untuk naviasi tabs dan pills.
(em&uat -a.igasi Ta&s
<ul class="na, na,-ta&s">
<li class="acti,e"><a href="4"><"me<$a><$li>
<li><a href="4">Tut"rials<$a><$li>
<li><a href="4">Practice Edit"r <$a><$li>
<li><a href="4">Raller(<$a><$li>
<li><a href="4">C"ntact<$a><$li>
<$ul>
(em&uat -a.igasi Pills
<ul class="na, na,-#ills">
<$ul>
Dalam tahap ini& *TM+ "an telah dibuat akan ditambahkan sidebar& ubah baris !ontent
header& !ontent pertama& !ontent kedua& dan !ontent ketia men5adi seperti di bawah ini.
<di, class="r"">
<di, class="s#an1 green" st(le="margin-t"#3 -8#:6 height3
08;#:6">
Cide&ar
<$di,>
<di, class="s#an5" st(le="margin-t"#3 -8#:6">
<di, class="r"-fluid">
<di, class="s#an-. (ell"">
<li class="acti,e"><a
href="4"><"me<$a><$li>
<$ul>
<h1>D#a itu Fluider S<$h1>
<#>
<str"ng>Fluider<$str"ng> adalah inisiatif dari
meru,ian (ang mem&ahas tentang as#e% Desain dan lain-lain' @"rem
i#sum d"l"r sit ametA c"nsectetuer adi#iscing elitA sed diam
n"numm( ni&h euism"d tincidunt ut la"reet d"l"re magna aliBuam
erat ,"lut#at'<&r $>
Fluider men(edia%an &e&era#a %"nten untu%
mendesainA antara lain3
<ul>
<li>Pr"gramming<$li>
<li>Jes#"nsi,e<$li>
<li>Letr" Ct(le<$li>
<li>La# R?C<$li>
<$ul>
<$#>
<$di,>
<$di,>
<di, class="r"-fluid">
<di, class="s#an/ "range" st(le="margin-t"#3 -8#:6
margin-&"tt"m3 -8#:">
<h0>Jes#"nsi,e<$h0>
<#>In&s#6In&s#6In&s#6In&s#6In&s#6@"rem i#sum
d"l"r sit ametA c"nsectetuer adi#iscing elitA sed diam n"numm(
ni&h euism"d tincidunt ut la"reet d"l"re magna aliBuam erat
,"lut#at' <&r$>In&s#6In&s#6In&s#6In&s#6In&s#6Ft isi enim ad
minim ,eniamA Buis n"strud e:erci tati"n ullamc"r#er susci#it
l"&"rtis nisl ut aliBui# e: ea c"mm"d" c"nseBuat'<$#>
<$di,>
<di, class="s#an/ "range" st(le="margin-t"#3 -8#:6
margin-&"tt"m3 -8#:">
<h0>Letr" Ct(le<$h0>
<#>In&s#6In&s#6In&s#6In&s#6In&s#6@"rem i#sum
d"l"r sit ametA c"nsectetuer adi#iscing elitA sed diam n"numm(
ni&h euism"d tincidunt ut la"reet d"l"re magna aliBuam erat
,"lut#at' <&r$>In&s#6In&s#6In&s#6In&s#6In&s#6Ft isi enim ad
minim ,eniamA Buis n"strud e:erci tati"n ullamc"r#er susci#it
l"&"rtis nisl ut aliBui# e: ea c"mm"d" c"nseBuat'<$#>
<$di,>
<$di,>
<$di,>
<$di,>
Maka hasiln"a akan seperti ambar di bawah ini.
(em&uat -a.igasi )erti!al Ta&s
$"nta9 "an diunakan adalah .navs:tabs dan .navs:sta!ked& untuk membuat sebuah
naviasi vertikal& dibutuhkan baian sidebar& ubah baian sidebar pada *TM+ "an telah
dibuat men5adi seperti baris berikut :
<ul class="na, na,-ta&s na,-stac%ed">
<$ul>
(em&uat -a.igasi )erti!al Pills
$"nta9 "an diunakan adalah .navs:pills dan .navs:sta!ked& hampir sama denan naviasi
bar& ubah baris di sidebar men5adi baris berikut :
<ul class="na, na,-#ills na,-stac%ed">
<$ul>
(enam&a 1ropdown pada -a.igation Ta&s
Untuk membuat dropdown pada naviation tabs& perlu menunakan !lass dropdown& !ontoh
koden"a dapat dilihat di bawah ini.
<li><a href="4">D&"ut<$a><$li>
<a class="dr"#d"n-t"ggle" data-
t"ggle="dr"#d"n" href="4">Fr"ntEnd<& class="caret"><$&><$a>
<li><a href="4">Titter !""tstra#<$a><$li>
<li><a href="4">R""gle Plus DP?<$a><$li>
<li><a href="4"><TL@;<$a><$li>
<li><a href="4">E:am#les<$a><$li>
<$ul>
<$li>
t"ggle="dr"#d"n" href="4">!ac%End<& class="caret &"tt"m-
u#"><$&><$a>
<ul class="dr"#d"n-menu &"tt"m-u# #ull-right">
<li><a href="4">P<P<$a><$li>
<li><a href="4">L(CT@<$a><$li>
<li><a href="4">P"stgreCT@<$a><$li>
<li><a href="4">@i,e Dem"s<$a><$li>
<$ul>
<$li>
<$ul>
(enam&a 1ropdown pada -a.igation Pills
2enunaann"a hampir sama denan kode di atas han"a menanti .nav:tabs men5adi .nav:
pills.
<li><a href="4">D&"ut<$a><$li>
<$ul>
<$li>
u#"><$&><$a>
<ul class="dr"#d"n-menu &"tt"m-u# #ull-right">
<$ul>
<$li>
<$ul>
(em&uat -a.igasi Side&ar dengan -a. List
Untuk membuat sebuah naviasi denan list di sidebar& s"nta9 "an diunakan adalah .nav&
dan .nav:list. Berikut !ontoh koden"a :
<ul class="na, na,-list">
<li class="na,-header">@ist header<$li>
<li><a href="4">@i&rar(<$a><$li>
<li><a href="4">D##licati"ns<$a><$li>
<li class="na,-header">Dn"ther list header<$li>
<li><a href="4">Pr"file<$a><$li>
<li><a href="4">Cettings<$a><$li>
<li><a href="4"><el#<$a><$li>
<$ul>
(em&uat -a.igasi Side&ar dengan -a. List 2 *!on
)ar Caviasi menarik& tambahkan beberapa i!on di setiap listn"a& berikut !oden"a.
<ul class="na, na,-list">
<li class="acti,e"><a href="4"><i class="ic"n-hite ic"n-
h"me"><$i> <"me<$a><$li>
<li><a href="4"><i class="ic"n-&""%"><$i>
@i&rar(<$a><$li>
<li><a href="4"><i class="ic"n-#encil"><$i>
D##licati"ns<$a><$li>
<li class="na,-header">Dn"ther list header<$li>
<li><a href="4"><i class="ic"n-user"><$i>
Pr"file<$a><$li>
<li><a href="4"><i class="ic"n-c"g"><$i>
Cettings<$a><$li>
<li><a href="4"><i class="ic"n-flag"><$i>
<el#<$a><$li>
<$ul>
Ta&&a&le -a. dengan 3a.as!ript
2embahasan terakhir dari Caviasi adalah Membuat Tab ber(unsi denan 5avas!ript& pada
baian !ontent header anti kode men5adi seperti di bawah ini.
<di, class="ta&&a&le">
<li class="acti,e"><a href="4-" data-
t"ggle="ta&"><"me<$a><$li>
<li><a href="4." data-t"ggle="ta&">D&"ut<$a><$li>
<$ul>
<$li>
u#"><$&><$a>
<ul class="dr"#d"n-menu &"tt"m-u# #ull-
right">
<$ul>
<$li>
<$ul>
<$di,>
<di, class="ta&-c"ntent">
<di, class="ta&-#ane acti,e" id="-">
<h1>D#a itu Fluider S<$h1>
<#> <str"ng>Fluider<$str"ng> adalah inisiatif dari
meru,ian (ang mem&ahas tentang as#e% Desain dan lain-lain' @"rem
i#sum d"l"r sit ametA c"nsectetuer adi#iscing elitA sed diam
n"numm( ni&h euism"d tincidunt ut la"reet d"l"re magna aliBuam
erat ,"lut#at'<&r $> Fluider men(edia%an &e&era#a %"nten untu%
mendesainA antara lain3
<ul>
<li>Pr"gramming<$li>
<li>Jes#"nsi,e<$li>
<li>Letr" Ct(le<$li>
<li>La# R?C<$li>
<$ul>
<$#>
<$di,>
<di, class="ta&-#ane" id=".">
<h1>D&"ut Le<$h1>
<#>In&s#6In&s#6In&s#6In&s#6In&s#6@"rem i#sum d"l"r sit
ametA c"nsectetuer adi#iscing elitA sed diam n"numm( ni&h euism"d
tincidunt ut la"reet d"l"re magna aliBuam erat ,"lut#at'
<&r$>In&s#6In&s#6In&s#6In&s#6In&s#6Ft isi enim ad minim ,eniamA
Buis n"strud e:erci tati"n ullamc"r#er susci#it l"&"rtis nisl ut
aliBui# e: ea c"mm"d" c"nseBuat'<$#>
<$di,>
<$di,>
Tambahkan (unsi %avas!ript pada tab denan menambahkan baris berikut sebelum
,-head..
<scri#t src="*s$&""tstra#-ta&'*s"><$scri#t>
*asiln"a akan seperti ambar berikut :
C.4 *nline La&el dan Badges
2ada panduan kali ini akan di5elaskan baaimana membuat inline label dan bades.
Untuk s"nta9 "an diunakan adalah .label.
Untuk kode label di bai men5adi > baian "aitu :
De(ault F !lass/4label4
$u!!ess F !lass/4label:su!!ess4
Earnin F !lass/4label:warnin4
Gmportant F !lass/4label:important4
Gn(o F !lass/4label:in(o4
Gnverse F !lass/4label:inverse4
Berikut !ontoh kode& tambahkan di *TM+ "an telah dibuat.
<#><s#an class=)la&el)>Default<$s#an><$#>
<#><s#an class=)la&el la&el-success)>Cuccess<$s#an><$#>
<#><s#an class=)la&el la&el-arning)>Parning<$s#an><$#>
<#><s#an class=)la&el la&el-im#"rtant)>?m#"rtant<$s#an><$#>
<#><s#an class=)la&el la&el-inf")>?nf"<$s#an><$#>
<#><s#an class=)la&el la&el-in,erse)>?n,erse<$s#an><$#>
Untuk pembaian bades hampir sama denan label& ubah semua kode label di atas men5adi
bade.
<#><s#an class=)&adge)>Default<$s#an><$#>
<#><s#an class=)&adge &adge-success)>Cuccess<$s#an><$#>
<#><s#an class=)&adge &adge-arning)>Parning<$s#an><$#>
<#><s#an class=)&adge &adge-im#"rtant)>?m#"rtant<$s#an><$#>
<#><s#an class=)&adge &adge-inf")>?nf"<$s#an><$#>
<#><s#an class=)&adge &adge-in,erse)>?n,erse<$s#an><$#>
C.15 Tum&nail
2ada panduan ini akan membahas baaimana !ara membuat thumbnail& !lass "an
diunakan adalah thumbnails.
Untuk per!obaan& anti kode pada !ontent pertama dan !ontent kedua denan kode di
bawah ini.
<di, class="s#an/ "range" st(le="margin-t"#3 -8#:6 margin-&"tt"m3
-8#:">
<h0>Jes#"nsi,e<$h0>
<ul class="thum&nails">
<li class="s#an-.">
<di, class="thum&nail">
<img src="img$res#"nsi,e'*#g" alt="#r"duct
-">
<di, class="ca#ti"n">
<h;>Jes#"nsi,e dengan
!""tstra#<$h;>
<#>@"rem i#sum d"l"r sit ametA
c"nsectetur adi#isicing elitA sed d" eiusm"d tem#"r incididunt ut
la&"re et d"l"re magna aliBua'<$#>
<#><a href="4" class="&tn &tn-
success">Jead L"re<$a><$#>
<$di,>
<$di,>
<$li>
<$ul>
<$di,>
<di, class="s#an/ "range" st(le="margin-t"#3 -8#:6 margin-&"tt"m3
-8#:">
<h0>Letr" Ct(le<$h0>
<ul class="thum&nails">
<li class="s#an-.">
<di, class="thum&nail">
<img src="img$metr"st(le'*#g" alt="#r"duct
.">
<di, class="ca#ti"n">
<h;>Letr" Ct(le<$h;>
<#>@"rem i#sum d"l"r sit ametA
la&"re et d"l"re magna aliBua'<$#>
<#><a href="4" class="&tn &tn-
success">Jead L"re<$a><$#>
<$di,>
<$di,>
<$li>
<$ul>
<$di,>
Dan hasiln"a akan seperti ambar di bawah ini.
C.11 Progress Bar
2roress Bar serin diunakan untuk mendeskripsikan proses atau 5umlah& untuk
menunakann"a !lass proress.
#lass proress pada bootstrap di bai men5adi 3 "aitu:
proress& proress striped& dan proress striped a!tive.
Untuk !ontoh kode dapat menunakan kode di bawah ini.
<h1>Pr"gress !ar<$h1>
<di, class="#r"gress">
<di, class="&ar" st(le="idth3 08U6"><$di,>
<$di,>
<h1>Pr"gress !ar dengan efe% stri#ed<$h1>
<di, class="#r"gress #r"gress-stri#ed">
<$di,>
<h1>Pr"gram !ar dengan efe% stri#ed dan animasi<$h1>
<di, class="#r"gress #r"gress-stri#ed acti,e">
<$di,>
Dan hasiln"a akan tanpak seperti ambar di bawah ini.
2roress Bar 5ua di bai men5adi 8 (unsi& "aitu :
Gn(o F proress:in(o
$u!!ess F proress:su!!ess
Earnin F proress:warnin
Daner F proress:daner
Berikut !ontoh koden"a :
<h1>Pr"gress &ars dengan &er&agai arna<$h1>
<di, class="#r"gress #r"gress-inf" #r"gress-stri#ed"
st(le="margin-&"tt"m3 5#:6">
<di, class="&ar" st(le="idth3 .8U"><$di,>
<$di,>
<di, class="#r"gress #r"gress-success #r"gress-stri#ed acti,e"
st(le="margin-&"tt"m3 5#:6"> <di, class="&ar" st(le="idth3
08U"><$di,>
<$di,>
<di, class="#r"gress #r"gress-arning #r"gress-stri#ed"
<di, class="&ar" st(le="idth3 /8U"><$di,>
<$di,>
<di, class="#r"gress #r"gress-danger #r"gress-stri#ed acti,e"
<di, class="&ar" st(le="idth3 88U"><$di,>
<$di,>
dan tampilann"a akan seperti ambar di bawah ini.
C.12 Bread!rum&s
Bread!rumbs adalah bantuan naviasi "an menin(ormasikan kepada penuna
menenai posisi atau letak sebuah artikel itu berada. Untuk menambahkan bread!rumbs
pada bootstrap adalah denan menunakan !lass bread!rumb.
Tambahkan kode !ontoh bread!rumbs di bawah ini setelah header.
<di, class="r"">
<ul class="&readcrum&" st(le="margin-left3 .8#:">
<li>
<a href="4"><"me<$a> <s#an
class="di,ider">><$s#an>
<$li>
<li>
<a href="4">Jes#"nsi,e<$a> <s#an
class="di,ider">><$s#an>
<$li>
<li class="acti,e">!""tstra#<$li>
<$ul>
<$di,>
Tampilann"a akan seperti ambar di bawah ini.
C.13 Pagination
2ada lankah selan5utn"a adalah membuat paination untuk halaman *TM+ "an
sedan dibuat& paination pada bootstrap ber(unsi membai artikel men5adi beberapa
halaman untuk menhindari artikel "an pan5an dalam satu halaman *TM+.
Terdapat 3 !ontoh kode paination& "aitu :
(ulti!on6page Pagination
untuk menunakan multi!on:pae& unakan !lass paination.
<di, class="#aginati"n">
<ul>
<li><a href="4">Pre,<$a><$li>
<li class="acti,e"><a href="4">-<$a><$li>
<li><a href="4">.<$a><$li>
<li><a href="4">1<$a><$li>
<li><a href="4">0<$a><$li>
<li><a href="4">=e:t<$a><$li>
<$ul>
<$di,>
Pager dengan -e7t dan Pre.ious
!lass "an diunakan untuk menampilkan paer ne9t dan previous adalah HpaerH. Berikut
!ontoh koden"a.
<ul class="#ager">
<li>
<a href="4">Pre,i"us<$a>
<$li>
<li>
<a href="4">=e:t<$a>
<$li>
<$ul>
Pager dengan 8ld dan -ewer
!lass "an diunakan sama denan ne9t dan previous& han"a bedan"a& posisi untuk previous
dan ne9t berada di tenah& sedankan untuk old dan newer& posisin"a berada di u5un kiri
untuk old& dan u5un kanan untuk newer.
C.1% Alert dan 9rror
Di pembahasan ini akan membahas (unsi bootstrap lain "aitu (unsi untuk menampilkan
alert dan error. Untuk kode dapat melihat !ontohn"a di bawah ini.
Pesan Pem&eritauan
6unakan !lass alert untuk menampilkan pesan pemberitahuan.
<di, class="alert">
<a class="cl"se" data-dismiss="alert">V<$a>
<str"ng>Parning!<$str"ng> ?ni c"nt"h adalah #esan
#em&eritahuan !'
<$di,>
$eharusn"a untuk pesan pemberitahuan dapat di tutup-!lose setelah menklik tombol HIH di
u5un kanan& tetapi (unsi tombol HIH tidak bisa& ini dikarenakan harus ada 5avas!ript "an
menakti(kan (unsi tersebut.
Tambahkan 5avas!ript untuk alert di *TM+.
<scri#t src="*s$&""tstra#-alert'*s"><$scri#t>
Pesan Pem&eritauan: Pesan "esalaan: Pesan "e&erasilan: dan Pesan *n$ormasi
Bootstrap 5ua men"ediakan (unsi untuk menampilkan pesan kesalahan& pesan
keberhasilan dan pesan in(ormasi selain dari menampilkan pesan pemberitahuan& untuk kode
dapat melihat !ontohn"a di bawah ini.
<di, class="alert">
<str"ng>Parning!<$str"ng> ?ni adalah c"nt"h #esan
#em&eritahuan !'
<$di,>
<di, class="alert alert-err"r">
<str"ng>Err"r!<$str"ng> ?ni adalah c"nt"h #esan %esalahan !'
<$di,>
<di, class="alert alert-success">
<str"ng>Cuccess!<$str"ng> ?ni adalah c"nt"h #esan %e&erhasilan
!'
<$di,>
<di, class="alert alert-inf"">
<str"ng>?nf"!<$str"ng> ?ni adalah c"nt"h #esan inf"rmasi !'
<$di,>
C.1' (odal
Untuk menambahkan (unsi modal pada *TM+& tambahkan 5avas!ript berikut di *TM+.
,s!ript sr!/05s-bootstrap:modal.5s0.,-s!ript.
$edankan untuk tampilan modaln"a menunakan !lass modal:header untuk headern"a&
modal:bod" untuk isiann"a dan modal:(ooter untuk baian (ootern"a.
Untuk koden"a dapat melihat !ontohn"a di bawah ini.
<h1>C"nt"h Lem&uat L"dal dengan Titter !""tstra#<$h1>
<di, id="e:am#le" class="m"dal hide fade in" st(le="dis#la(3
n"ne6 ">
<di, class="m"dal-header">
<a class="cl"se" data-dismiss="m"dal">V<$a>
<h1>?ni L"dal <eader<$h1>
<$di,>
<di, class="m"dal-&"d(">
<h0>L"dal !"d(<$h0>
<#>Dnda da#at menam&ah%an arti%el atau %"de
lainn(a disini'<$#> <$di,>
<di, class="m"dal-f""ter">
<a href="4" class="&tn" data-
dismiss="m"dal">Cl"se<$a>
<$di,>
<$di,>
,p.,a data:tole/0modal0 hre(/0Je9ample0 !lass/0btn btn:primar" btn:lare0.%alankan
modal,-a.,-p.
C.1, Popo.er dan Tooltip
Funsi 2opover pada bootstrap adalah untuk menampilkan popup "an akan mun!ul ketika
mouse menarahkan ke tombol atau tulisan tertentu. 2opup itu dapat berupa pen5elasan&
5abaran& atau pendapat.
Untuk 5avas!ript "an dibutuhkan ada 2 "aitu boostrap:tooltip dan bootstrap:popover.
Tambahkan baris berikut untuk memanil 5avas!ript tersebut.
<scri#t src="*s$&""tstra#-t""lti#'*s"><$scri#t>
<scri#t src="*s$&""tstra#-#"#",er'*s"><$scri#t>
<scri#t>
WGfuncti"n GH
2 WG"4e:am#le"H'#"#",erGH6
7H6
<$scri#t>
Untuk !ontoh kode dapat meilhat !ontoh di bawah ini.
<h1>C"nt"h Lem&uat P"#",er dengan Titter !""tstra#<$h1>
<di, class="ell">
<a href="4" id="e:am#le" class="&tn &tn-success" rel="#"#",er"
data-c"ntent="Cangat mudah mem&uat t""lti# untu% <TL@!" data-
"riginal-title="Titter !""tstra# P"#",er">h",er dari #"#",er<$a>
<$di,>
C.1/ S!rollSpy
$!roll$p" pada bootstrap diunakan untuk menun5ukkan atau menarahkan tab "an
akan ditu5u dalam satu halaman.
Untuk menunakan (itur tersebut& tambahkan 5avas!ript di bawah ini di *TM+.
<scri#t src="*s$&""tstra#-scr"lls#('*s"><$scri#t>
$etelah itu tambahkan kode di bawah ini pada sidebar *TM+& pada sidebar anti list kedua
dan ketia men5adi seperti di bawah ini.
<li><a href="4res#"nsi,e"><i class="ic"n-&""%"><$i>
Jes#"nsi,e<$a><$li>
<li><a href="4metr"st(le"><i class="ic"n-#encil"><$i> Letr"
Ct(le<$a><$li>
;emudian arahkan list tersebut ke !ontent pertama dan !ontent kedua pada halaman "an
sama denan menambahkan kode di bawah ini.
<di, class="r"-fluid" data-s#(="scr"ll" data-
target="4na,&arE:am#le">
2ada list di atas pada a hre( telah di arahkan ke url "an dimaksud& tambahkan !ontent
pertama dan kedua denan id "an dimaksud.
<h0 id="res#"nsi,e">Jes#"nsi,e<$h0>
<h0 id="metr"st(le">Letr" Ct(le<$h0>
;emudian !oba sekali lai denan menklik list responsive& a!tionn"a akan menarahkann"a
ke baris "an dimaksud.
C.10 Carousel
Bootstrap 5ua memiliki (itur imae slider bernama !arousel. Denan (itur ini& dapat
menampilkan ambar dalam bentuk slide.
Untuk !lass "an diunakan adalah !arousel slide& !arousel:inner dan !arousel:!ontrol.
Di Tampilan *TM+ sebelumn"a& di baian bawah header terdapat baian untuk meletakkan
baian ambar& ubah letak tersebut denan kode di bawah ini.
<di, id="m(Car"usel" class="car"usel slide">
<di, class="car"usel-inner">
<di, class="acti,e item"><img src="img$-'#ng"
$><$di,>
<di, class="item"><img src="img$.'#ng" $><$di,>
<di, class="item"><img src="img$1'#ng" $><$di,>
<di, class="item"><img src="img$0'#ng" $><$di,>
<$di,>
<a class="car"usel-c"ntr"l left" href="4m(Car"usel" data-
slide="#re,">IlsaBu"6<$a>
<a class="car"usel-c"ntr"l right" href="4m(Car"usel" data-
slide="ne:t">IrsaBu"6<$a>
<$di,>
Untuk saat ini& slider tidak dapat ber5alan atau diam& dikarenakan belum adan"a (unsi
5avas!ript "an men5alankan slider tersebut& tambahkan s!ript di bawah ini di atas ,-head..
,s!ript sr!/05s-bootstrap:!arousel.5s0.,-s!ript.
C.14 Collapse
#ollapse pada Bootstrap keunaann"a hampir sama denan drop down pada naviasi&
bedan"a pada (itur #ollapse& drop downn"a penuh satu halaman& sedankan drop down pada
naviasi menhalani la"ar di belakann"a. Untuk menetahui lebih lan5ut apa itu #ollapse&
silahkan lihat kode di bawah ini.
<di, class="acc"rdi"n" id="acc"rdi"n.">
<di, class="acc"rdi"n-gr"u#">
<di, class="acc"rdi"n-heading">
<a class="acc"rdi"n-t"ggle" data-
t"ggle="c"lla#se" data-#arent="4acc"rdi"n." href="4c"lla#seOne">
>li% untu% mem#erluas' >li% se%ali
lagi untu% menutu#' Part ?'
<$a>
<$di,>
<di, id="c"lla#seOne" class="acc"rdi"n-&"d(
c"lla#se" st(le="height3 8#:6 ">
<di, class="acc"rdi"n-inner">
@"rem i#sum d"l"r sit ametA
la&"re et d"l"re magna aliBua' Ft enim ad minim ,eniamA Buis
n"strud e:ercitati"n ullamc" la&"ris nisi ut aliBui# e: ea
c"mm"d" c"nseBuat' Duis aute irure d"l"r in re#rehenderit in
,"lu#tate ,elit esse cillum d"l"re eu fugiat nulla #ariatur'
E:ce#teur sint "ccaecat cu#idatat n"n #r"identA sunt in cul#a Bui
"fficia deserunt m"llit anim id est la&"rum'
<$di,>
<$di,>
<$di,>
t"ggle="c"lla#se" data-#arent="4acc"rdi"n." href="4c"lla#seT"">
>li% untu% mem#erluas' >li% se%ali lagi
untu% menutu#' Part ??'
<$a>
<$di,>
<di, id="c"lla#seT"" class="acc"rdi"n-&"d(
c"lla#se">
<$di,>
<$di,>
<$di,>
t"ggle="c"lla#se" data-#arent="4acc"rdi"n."
href="4c"lla#seThree">
>li% untu% mem#erluas' >li% se%ali
lagi untu% menutu#' Part ???'
<$a>
<$di,>
<di, id="c"lla#seThree" class="acc"rdi"n-&"d(
c"lla#se">
<$di,>
<$di,>
<$di,>
<$di,>
2ada tampilan di atas (unsi dari #ollapse masih belum ber5alan& tambahkan denan
5avas!ript bootstrap:!ollapse.
<scri#t src="*s$&""tstra#-c"lla#se'*s"><$scri#t>
;etika mulai menklik "an part G& pen5elasan akan otomotis bereser kebawah pada part G&
tapi ketika menklik part GG& pen5elasan pada part G kembali menutup& dan pen5elasan pada
part GG bereser ke bawah& dan beitu seterusn"a ketika menklik part "an lain.
C.25 ;esponsi.e
2ada pembahasan "an terakhir& "aitu menubah desain *TM+ "an ada men5adi
dapat di tampilkan pada la"out mobile& la"out tablet dan la"out desktop dalam sekalius.
Beda antara desain "an tidak responsive dan "an responsive adalah resolusi web "an
tidak dapat men"esuaikan la"out.
$eperti !ontoh di bawah ini.
2ada 6ambar di atas& ketika la"out dike!ilkan& sisi kanan desain web akan tertutup& beda
ketika dalam mode responsive& la"out akan men"esuaikan.
Untuk membuat *TM+ dalam mode responsive& !ukup mudah tinal tambahkan #$$ di
bawah ini sebelum ,-head..
<lin% href="css$&""tstra#-res#"nsi,e'css" rel="st(lesheet">
K $elamat Men!oba K

Responsive Bootstrap

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Responsive Bootstrap

Diunggah oleh

Hak Cipta:

Format Tersedia

Panduan Twitter Bootstrap

Didistribusikan oleh : Fluider Team

Anda mungkin juga menyukai