Responsive Bootstrap
Transcript of Responsive Bootstrap
-
8/10/2019 Responsive Bootstrap
1/74
Panduan Twitter Bootstrap
Didistribusikan oleh : Fluider Team
versi 1.1
Update : Maret 2013
-
8/10/2019 Responsive Bootstrap
2/74
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/st"lesheet hre(/-bootstrap-!ss-bootstrap.!ss
2. )tau denan memanil +'$$ Bootstrap #$$ repro!essor "an diunakan untuk
memper!epat dan mempermudah web development denan menambahkan baris di
bawah ini.
,link rel/st"lesheet-less hre(/-bootstrap-less-bootstrap.less%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
http://twitter.github.com/bootstrap/http://twitter.github.com/bootstrap/ -
8/10/2019 Responsive Bootstrap
3/74
-
8/10/2019 Responsive Bootstrap
4/74
untuk membuat struktur dari rid.
Distributed by Fluider Team 4
-
8/10/2019 Responsive Bootstrap
5/74
Distributed by Fluider Team 5
-
8/10/2019 Responsive Bootstrap
6/74
Denan !ontoh di atas& tidak dapat menampilkan rid s"stem se!ara kasat mata& untuk
menampilkan warna dari tiaptiap span& buat sebuah !lass #$$ pada *TM+ denan baris
berikut. +etakkan sebelum ,-head
'green 2&ac%grund-clr3 4CF51E6 7
'&lue 2&ac%grund-clr3 40.8.D16 7
'range 2&ac%grund-clr3 4FF/06 7
'red 2&ac%grund-clr3 4FF/06 7
'#ur#le 2&ac%grund-clr3 45/CD96 7'(ell 2&ac%grund-clr3 4FFE/06 7
'*ara% 2height3 #:6 margin-t#3 ;#:6 margin-&ttm3 ;#:67
$etelah selesai& terapkan warna "an berbeda dari tiap span& seperti !ontoh di bawah ini.
Distributed by Fluider Team 6
-
8/10/2019 Responsive Bootstrap
7/74
Distributed by Fluider Team 7
-
8/10/2019 Responsive Bootstrap
8/74
Distributed by Fluider Team
-
8/10/2019 Responsive Bootstrap
9/74
Maka akan tampak struktur rid memenuhi 12 kolom tiap barisn"a seperti tampilan *TM+ di
bawah ini.
Distributed by Fluider Team !
-
8/10/2019 Responsive Bootstrap
10/74
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 lankahlankah di bawah ini.
Header
ertama& unakan struktur *TM+ de(ault denan tambahan Bootstrap #$$ < %avas!ript ke
dalam *TM+ baru.
;emudian di dalam ,bod"& berikan !ode di bawah ini.
eader $ a,igasi
Content
;edua& "an diperlukan sebuah !ontent untuk menampilkan isi atau artikel dari blo&
tambahkan !ode untuk !ontent di bawah ini di bawah ,-header.
Cntent eader
Distributed by Fluider Team "#
-
8/10/2019 Responsive Bootstrap
11/74
Cntent Pertama
Cntent edua
Cntent etiga
Footer
;etia& Footer ber(unsi menampilkan si pembuat website& pemilik website& atau pembuat
desain& untuk menambahkan (ooter unakan !ode di bawah ini.
Fter
Maka hasil struktur *TM+n"a akan seperti ini.
Distributed by Fluider Team ""
-
8/10/2019 Responsive Bootstrap
12/74
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 eadersebelumn"a men5adi seperti di bawah ini.
Fluider
$etelah itu pada !ontent& tambahkan no imae denan menambahkan baris berikut:
Distributed by Fluider Team "2
-
8/10/2019 Responsive Bootstrap
13/74
Ubah 5ua pada Content Headerdenan baris di bawah ini& untuk menampilkan t"poraph"
h1& h2& h3& h8& h=& h>& parara(& penunaan stron& dan addr.
?ni adalah header h
?ni adalah header h.
?ni adalah header h1
?ni adalah header h0
?ni adalah header h;
?ni adalah header h/
?ni meru#a%an #aragraf' @rem i#sum dlr sit ametA
cnsectetuer adi#iscing elitA sed diam nnumm( ni&h euismd
tincidunt ut lareet dlre magna aliBuam erat ,lut#at'
?ni mengguna%an trng di dalam
#aragraf'
?ni #enggunaan a&&r #ada sing%atan ?'
ada baian Content Pertama& berikan !ontoh t"poraph" untuk penunaan address&
berikut !oden"a.
Distributed by Fluider Team "3
-
8/10/2019 Responsive Bootstrap
14/74
Penggunaan ddress@rem i#sum dlr sit ametA cnsectetuer adi#iscing elitA
sed diam nnumm( ni&h euismd tincidunt ut lareet dlre magna
aliBuam erat ,lut#at'
Fluider
ada(a .
Cem#a%a aruA a%arta Pusat'
$edankan untuk Content "eduaBerikan T"poraph" penunaan Blo!k?uote denan !ode
di bawah ini.
Penggunaan lc%Butes
@rem i#sum dlr sit ametA cnsectetuer adi#iscing
elitA sed diam nnumm( ni&h euismd tincidunt ut lareet dlre
magna aliBuam erat ,lut#at' t isi enim ad minim ,eniamA Buis
nstrud e:erci tatin ullamcr#er susci#it l&rtis nisl ut
aliBui# e: ea cmmd cnseBuat'
Distributed by Fluider Team "4
-
8/10/2019 Responsive Bootstrap
15/74
Untuk "an #ontent "an terakhir "aitu Content #etiga& berikan !ode untuk menampilkan
penunaan Unordered +ist sama @rdered +ist.
Penggunaan nrdered @ist dan Ordered @ist
Penggunaan Ordered @istGlH
Penggunaan Ordered @istGlH
Penggunaan Ordered @istGlH
Penggunaan nrdered @istGulH
Penggunaan nrdered @istGulH
Penggunaan nrdered @istGulH
Aan terakhir& pada $ooter ubah baris (ooter denan baris di bawah ini& untuk merubah warna
(ont dan ukuran.
Ic#(6 .1 Fluider'rg
Distributed by Fluider Team "5
-
8/10/2019 Responsive Bootstrap
16/74
-
8/10/2019 Responsive Bootstrap
17/74
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 :
ama De#an
ama ela%ang
e%lah
felas
'
Ji%a
Ki%aati
D um&er* 1
1
Distributed by Fluider Team "7
-
8/10/2019 Responsive Bootstrap
18/74
.'
udi
Praset(D um&elim
;
1'
ri
Lanae
D arangra*a ;
;
*asiln"a akan tampak seperti di bawah ini.
C.' Form
Distributed by Fluider Team "
-
8/10/2019 Responsive Bootstrap
19/74
ada panduan selan5utn"a akan membahas tentan membuat (orm denan bootstrap&
(orm lebih serin diunakan untuk halhal "an bersi(at membutuhkan inputan dari penuna.
$eperti (orm penda(taran& (orm loin& (orm kebutuhan dan lainlain.
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.
Kertical Frm @a(ut
sername
Lasu%%an sername nda!
Centang a#a&ila username nda
&enar'
u&mit
Maka *asiln"a akan seperti di bawah ini.
Distributed by Fluider Team "!
-
8/10/2019 Responsive Bootstrap
20/74
(em&uat Sear! Form Layout
6unakan !lass (ormsear!h untuk membuat inputan men5adi block level.Tambahkan !ode di
bawah ini setelah !ode verti!al (orm.
earch Frm @a(ut
sername
u&mit
Maka hasiln"a akan seperti ini.
(em&uat *nline Form Layout
6unakan !lass (orminline untuk membuat inputan men5adiinline
. Tambahkan !ode di bawahini setelah !ode sear!h (orm.
?nline Frm @a(ut
Distributed by Fluider Team 2#
-
8/10/2019 Responsive Bootstrap
21/74
Jemem&er me
Lasu%
*asiln"a akan seperti di bawah ini.
(em&uat Hori+ontal Form Layout
6unakan !lass (ormhoriontal untuk membuat inputan men5adi horizontal. Tambahkan !ode
di bawah ini setelah !ode inline (orm.
riMntal Frm @a(ut
riMntal Frm @a(ut
Te:t
in#ut
Distributed by Fluider Team 2"
-
8/10/2019 Responsive Bootstrap
22/74
?n additin t freefrm te:tA an( TL@;
te:t-&ased in#ut a##ears li%e s'
Chec%&:
O#tin ne is this and thatN&e
sure t include h( its great
elect list
--Pilihan--
--Pilihan.--
--Pilihan1--
--Pilihan0--
--Pilihan;--
Distributed by Fluider Team 22
-
8/10/2019 Responsive Bootstrap
23/74
Lulticn-select
.
1
0
;
File in#ut
Te:tarea
-
8/10/2019 Responsive Bootstrap
24/74
id="te:tarea" rs="1">
im#an Peru&ahan
atal
%ika berhasil& maka akan tampilann"a seperti ini.
Distributed by Fluider Team 24
-
8/10/2019 Responsive Bootstrap
25/74
Form Controls
Di dalam toolkit bootstrap disediakan penendalian (orm untuk readonl"& dan disabled& untuk
!ontoh dapat menunakan kode di bawah ini& letakkan kode di bawah horiontal (orm la"out.
Frm Cntrls
Frm Cntrls tstra#
-
8/10/2019 Responsive Bootstrap
26/74
fr="in#ut">F%us ?n#ut
?n#ut dalam
mde &iasa dan da#at di tulis dan di &aca'
Jaed
nl( ?n#ut
?n#ut dalam
mde read-nl(A han(a &isa di &aca dan f%us'
Disa&led ?n#ut
?n#ut tida%
&isa diguna%an alias di disa&le'
Distributed by Fluider Team 26
-
8/10/2019 Responsive Bootstrap
27/74
Chec%&: Gdisa&ledH
Chec%&: (ang telah di disa&le'
im#an Peru&ahan Gtm&l (ang di disa&elH
Cancel
*asiln"a akan tampak seperti ambar berikut :
Distributed by Fluider Team 27
-
8/10/2019 Responsive Bootstrap
28/74
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.
Frm ?n#ut t(le
Frm ,alidasi errrA arning dan
success
?n#ut ith errr
Distributed by Fluider Team 2
-
8/10/2019 Responsive Bootstrap
29/74
Please
crrect the errr
?n#ut ith arning
mething
ma( ha,e gne rng
?n#ut ith success
uccessfull( entered
elect ith success
.
Distributed by Fluider Team 2!
-
8/10/2019 Responsive Bootstrap
30/74
1
0
;
uccessfull( selected
Maka *asiln"a akan seperti ambar berikut :
Distributed by Fluider Team 3#
-
8/10/2019 Responsive Bootstrap
31/74
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.
Fluider
Jes#nsi,e
Letr t(le
@eaflet
er,ices
e&
Design
e&
de,el#ment
Distributed by Fluider Team 3"
-
8/10/2019 Responsive Bootstrap
32/74
rd#ress Theme
de,el#ment
Maka tampilann"a akan seperti berikut :
Distributed by Fluider Team 32
-
8/10/2019 Responsive Bootstrap
33/74
Untuk (unsi drop down tidak ber(unsi dikarenakan tidak adan"a 5avas!ript "an
men5alankan (unsi tersebut& tambahkan 5?uer".5s dan bootstrapdropdown.5s ke dalam
*TM+& letakkan sebelum ,-head
,s!ript sr!/5s-5?uer".5s,-s!ript
,s!ript sr!/5s-bootstrapdropdown.5s,-s!ript
e(resh halaman *TM+ di Eeb Browser kemudian !oba klik dropdown sekali lai.
Distributed by Fluider Team 33
-
8/10/2019 Responsive Bootstrap
34/74
C./ *!on
ada embahasan 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/st"lesheet hre(/-bootstrap-!ss-(ontawesome.!ss
$"nta9 "an diunakan untuk memanil i!on adalah :
(enam&a#an *!on di -aigasi
$etelah pada pembahasan sebelumn"a menambahkan naviasi di header& selan5utn"a dapat
di!oba menambahkan i!on di naviasi& ubah baris naviasi esponsive& Metro $t"le dan
+ea(let denan baris di bawah ini.
Jes#nsi,e
Letr
t(le @eaflet
Maka hasiln"a akan seperti ambar di bawah ini.
Distributed by Fluider Team 34
http://fortawesome.github.com/Font-Awesome/http://fortawesome.github.com/Font-Awesome/ -
8/10/2019 Responsive Bootstrap
35/74
(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 :
ntu% cnthA guna%an cde di &aah ini dan leta%%an setelah frm
class search #ada na,igasi''
ser
Edit
Delete
an
@gut
Distributed by Fluider Team 35
-
8/10/2019 Responsive Bootstrap
36/74
*asiln"a akan seperti ambar di bawah ini.
C.0 -aigation Ta&s dan Pills
Untuk pembela5aran selan5utn"a "aitu penenalan tabs dan pills dari bootstrap& untuk
memanil tabs dapat menunakan !lass .navtabs dan 5ika memanil pills dapat
menunakan .navpills. Berikut !ontoh kode untuk naviasi tabs dan pills.
(em&uat -aigasi Ta&s
me
Tutrials
Practice Editr
Raller(
Cntact
Distributed by Fluider Team 36
-
8/10/2019 Responsive Bootstrap
37/74
(em&uat -aigasi Pills
me
Tutrials
Practice Editr
Raller(
Cntact
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.
ide&ar
Distributed by Fluider Team 37
-
8/10/2019 Responsive Bootstrap
38/74
me
Tutrials
Practice Editr
Raller(
Cntact
#a itu Fluider S
Fluider adalah inisiatif dari
meru,ian (ang mem&ahas tentang as#e% Desain dan lain-lain' @rem
i#sum dlr sit ametA cnsectetuer adi#iscing elitA sed diam
nnumm( ni&h euismd tincidunt ut lareet dlre magna aliBuam
erat ,lut#at'Fluider men(edia%an &e&era#a %nten untu%
mendesainA antara lain3
Prgramming
Jes#nsi,e
Letr t(le
La# R?
Distributed by Fluider Team 3
-
8/10/2019 Responsive Bootstrap
39/74
Jes#nsi,e
In&s#6In&s#6In&s#6In&s#6In&s#6@rem i#sum
dlr sit ametA cnsectetuer adi#iscing elitA sed diam nnumm(
ni&h euismd tincidunt ut lareet dlre magna aliBuam erat
,lut#at' In&s#6In&s#6In&s#6In&s#6In&s#6t isi enim ad
minim ,eniamA Buis nstrud e:erci tatin ullamcr#er susci#it
l&rtis nisl ut aliBui# e: ea cmmd cnseBuat'
Letr t(le
In&s#6In&s#6In&s#6In&s#6In&s#6@rem i#sum
dlr sit ametA cnsectetuer adi#iscing elitA sed diam nnumm(
ni&h euismd tincidunt ut lareet dlre magna aliBuam erat
,lut#at' In&s#6In&s#6In&s#6In&s#6In&s#6t isi enim adminim ,eniamA Buis nstrud e:erci tatin ullamcr#er susci#it
l&rtis nisl ut aliBui# e: ea cmmd cnseBuat'
Maka hasiln"a akan seperti ambar di bawah ini.
Distributed by Fluider Team 3!
-
8/10/2019 Responsive Bootstrap
40/74
(em&uat -aigasi )erti!al Ta&s
$"nta9 "an diunakan adalah .navstabs dan .navssta!ked& untuk membuat sebuah
naviasi vertikal& dibutuhkan baian sidebar& ubah baian sidebar pada *TM+ "an telah
dibuat men5adi seperti baris berikut :
me
Distributed by Fluider Team 4#
-
8/10/2019 Responsive Bootstrap
41/74
Tutrials
Practice Editr
Raller(Cntact
(em&uat -aigasi )erti!al Pills
$"nta9 "an diunakan adalah .navspills dan .navssta!ked& hampir sama denan naviasi
bar& ubah baris di sidebar men5adi baris berikut :
me
Tutrials
Practice Editr
Raller(
Cntact
Distributed by Fluider Team 4"
-
8/10/2019 Responsive Bootstrap
42/74
(enam&a ropdown pada -aigation Ta&s
Untuk membuat dropdown pada naviation tabs& perlu menunakan !lass dropdown& !ontoh
koden"a dapat dilihat di bawah ini.
me
&ut
FrntEnd
Titter tstra#
Rgle Plus P?
TL@;
E:am#les
ac%End
-
8/10/2019 Responsive Bootstrap
43/74
u#">
PPL(@
Pstgre@
@i,e Dems
(enam&a ropdown pada -aigation Pills
enunaann"a hampir sama denan kode di atas han"a menanti .navtabs men5adi .nav
pills.
me
&ut
FrntEnd
Distributed by Fluider Team 43
-
8/10/2019 Responsive Bootstrap
44/74
Titter tstra#
Rgle Plus P?
TL@;
E:am#les
ac%End
PP
L(@
Pstgre@
@i,e Dems
Distributed by Fluider Team 44
-
8/10/2019 Responsive Bootstrap
45/74
(em&uat -aigasi Side&ar dengan -a List
Untuk membuat sebuah naviasi denan list di sidebar& s"nta9 "an diunakan adalah .nav&
dan .navlist. Berikut !ontoh koden"a :
@ist header
me
@i&rar(
##licatins
nther list header
Prfile
ettings
el#
(em&uat -aigasi Side&ar dengan -a List *!on
)ar Caviasi menarik& tambahkan beberapa i!on di setiap listn"a& berikut !oden"a.
Distributed by Fluider Team 45
-
8/10/2019 Responsive Bootstrap
46/74
me
@i&rar(
##licatins
nther list header
Prfile
ettings
el#
Ta&&a&le -a dengan aas!ript
embahasan terakhir dari Caviasi adalah Membuat Tab ber(unsi denan 5avas!ript& pada
baian !ontent header anti kode men5adi seperti di bawah ini.
Distributed by Fluider Team 46
-
8/10/2019 Responsive Bootstrap
47/74
me
&ut
FrntEnd
Titter tstra#
Rgle Plus P?
TL@;
E:am#les
ac%End
PP
L(@
Pstgre@
@i,e Dems
Distributed by Fluider Team 47
-
8/10/2019 Responsive Bootstrap
48/74
#a itu Fluider S
Fluider adalah inisiatif dari
meru,ian (ang mem&ahas tentang as#e% Desain dan lain-lain' @rem
i#sum dlr sit ametA cnsectetuer adi#iscing elitA sed diam
nnumm( ni&h euismd tincidunt ut lareet dlre magna aliBuam
erat ,lut#at' Fluider men(edia%an &e&era#a %nten untu%
mendesainA antara lain3
Prgramming
Jes#nsi,e
Letr t(le
La# R?
&ut Le
In&s#6In&s#6In&s#6In&s#6In&s#6@rem i#sum dlr sit
ametA cnsectetuer adi#iscing elitA sed diam nnumm( ni&h euismd
tincidunt ut lareet dlre magna aliBuam erat ,lut#at'
In&s#6In&s#6In&s#6In&s#6In&s#6t isi enim ad minim ,eniamA
Buis nstrud e:erci tatin ullamcr#er susci#it l&rtis nisl ut
aliBui# e: ea cmmd cnseBuat'
Distributed by Fluider Team 4
-
8/10/2019 Responsive Bootstrap
49/74
Tambahkan (unsi %avas!ript pada tab denan menambahkan baris berikut sebelum
,-head.
*asiln"a akan seperti ambar berikut :
C.4 *nline La&el dan Badges
ada 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 !lass/4label4
$u!!ess !lass/4labelsu!!ess4
Earnin !lass/4labelwarnin4
Gmportant !lass/4labelimportant4
Gn(o !lass/4labelin(o4Gnverse !lass/4labelinverse4
Berikut !ontoh kode& tambahkan di *TM+ "an telah dibuat.
Distributed by Fluider Team 4!
-
8/10/2019 Responsive Bootstrap
50/74
Default
uccess
arning?m#rtant
?nf
?n,erse
Untuk pembaian bades hampir sama denan label& ubah semua kode label di atas men5adi
bade.
Distributed by Fluider Team 5#
-
8/10/2019 Responsive Bootstrap
51/74
Default
uccess
arning?m#rtant
?nf
?n,erse
C.15 Tum&nail
ada 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.
Jes#nsi,e
Distributed by Fluider Team 5"
-
8/10/2019 Responsive Bootstrap
52/74
Jes#nsi,e dengan
tstra#
@rem i#sum dlr sit ametA
cnsectetur adi#isicing elitA sed d eiusmd tem#r incididunt ut
la&re et dlre magna aliBua'
Jead Lre
Letr t(le
Letr t(le
@rem i#sum dlr sit ametA
cnsectetur adi#isicing elitA sed d eiusmd tem#r incididunt ut
Distributed by Fluider Team 52
-
8/10/2019 Responsive Bootstrap
53/74
la&re et dlre magna aliBua'
Jead Lre
Dan hasiln"a akan seperti ambar di bawah ini.
C.11 Progress Bar
roress Bar serin diunakan untuk mendeskripsikan proses atau 5umlah& untuk
menunakann"a !lass proress.
Distributed by Fluider Team 53
-
8/10/2019 Responsive Bootstrap
54/74
#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.
Prgress ar
Prgress ar dengan efe% stri#ed
Prgram ar dengan efe% stri#ed dan animasi
Dan hasiln"a akan tanpak seperti ambar di bawah ini.
Distributed by Fluider Team 54
-
8/10/2019 Responsive Bootstrap
55/74
-
8/10/2019 Responsive Bootstrap
56/74
st(le="margin-&ttm3 5#:6">
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.
me
-
8/10/2019 Responsive Bootstrap
57/74
-
8/10/2019 Responsive Bootstrap
58/74
.
10
e:t
Pager dengan -e7t dan Preious
!lass "an diunakan untuk menampilkan paer ne9t dan previous adalah HpaerH. Berikut
!ontoh koden"a.
Pre,ius
Distributed by Fluider Team 5
-
8/10/2019 Responsive Bootstrap
59/74
e:t
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.
Distributed by Fluider Team 5!
-
8/10/2019 Responsive Bootstrap
60/74
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.
V
arning! ?ni cnth adalah #esan
#em&eritahuan !'
Distributed by Fluider Team 6#
-
8/10/2019 Responsive Bootstrap
61/74
$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+.
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.
V
arning! ?ni adalah cnth #esan
#em&eritahuan !'
V
Errr! ?ni adalah cnth #esan %esalahan !'
Distributed by Fluider Team 6"
-
8/10/2019 Responsive Bootstrap
62/74
V
uccess! ?ni adalah cnth #esan %e&erhasilan!'
V
?nf! ?ni adalah cnth #esan infrmasi !'
C.1' (odal
Untuk menambahkan (unsi modal pada *TM+& tambahkan 5avas!ript berikut di *TM+.
,s!ript sr!/5s-bootstrapmodal.5s,-s!ript
$edankan untuk tampilan modaln"a menunakan !lass modalheader untuk headern"a&
modalbod" untuk isiann"a dan modal(ooter untuk baian (ootern"a.
Untuk koden"a dapat melihat !ontohn"a di bawah ini.
Distributed by Fluider Team 62
-
8/10/2019 Responsive Bootstrap
63/74
Cnth Lem&uat Ldal dengan Titter tstra#
V
?ni Ldal eader
Ldal d(
nda da#at menam&ah%an arti%el atau %de
lainn(a disini'
Clse
,p,a datatole/modal hre(/Je9ample !lass/btn btnprimar" btnlare%alankan
modal,-a,-p
Distributed by Fluider Team 63
-
8/10/2019 Responsive Bootstrap
64/74
C.1, Popoer dan Tooltip
Funsi opover pada bootstrap adalah untuk menampilkan popup "an akan mun!ul ketika
mouse menarahkan ke tombol atau tulisan tertentu. opup itu dapat berupa pen5elasan&
5abaran& atau pendapat.
Untuk 5avas!ript "an dibutuhkan ada 2 "aitu boostraptooltip dan bootstrappopover.
Tambahkan baris berikut untuk memanil 5avas!ript tersebut.
WGfunctin GH
2 WG"4e:am#le"H'##,erGH6
7H6
Untuk !ontoh kode dapat meilhat !ontoh di bawah ini.
Cnth Lem&uat P#,er dengan Titter tstra#
h,er dari ##,er
Distributed by Fluider Team 64
-
8/10/2019 Responsive Bootstrap
65/74
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+.
$etelah itu tambahkan kode di bawah ini pada sidebar *TM+& pada sidebar anti list kedua
dan ketia men5adi seperti di bawah ini.
Jes#nsi,e
Letr
t(le
;emudian arahkan list tersebut ke !ontent pertama dan !ontent kedua pada halaman "an
sama denan menambahkan kode di bawah ini.
Distributed by Fluider Team 65
-
8/10/2019 Responsive Bootstrap
66/74
ada list di atas pada a hre( telah di arahkan ke url "an dimaksud& tambahkan !ontent
pertama dan kedua denan id "an dimaksud.
Jes#nsi,e
Letr t(le
;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& !arouselinner 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.
Distributed by Fluider Team 66
-
8/10/2019 Responsive Bootstrap
67/74
IlsaBu6
IrsaBu6
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!/5s-bootstrap!arousel.5s,-s!ript
Distributed by Fluider Team 67
-
8/10/2019 Responsive Bootstrap
68/74
-
8/10/2019 Responsive Bootstrap
69/74
li% untu% mem#erluas' li% se%ali lagi
untu% menutu#' Part ??'
@rem i#sum dlr sit ametA
cnsectetur adi#isicing elitA sed d eiusmd tem#r incididunt ut
la&re et dlre magna aliBua' t enim ad minim ,eniamA Buis
nstrud e:ercitatin ullamc la&ris nisi ut aliBui# e: ea
cmmd cnseBuat' Duis aute irure dlr in re#rehenderit in
,lu#tate ,elit esse cillum dlre eu fugiat nulla #ariatur'
E:ce#teur sint ccaecat cu#idatat nn #ridentA sunt in cul#a Buifficia deserunt mllit anim id est la&rum'
li% untu% mem#erluas' li% se%ali
lagi untu% menutu#' Part ???'
Distributed by Fluider Team 6!
-
8/10/2019 Responsive Bootstrap
70/74
@rem i#sum dlr sit ametA
cnsectetur adi#isicing elitA sed d eiusmd tem#r incididunt ut
la&re et dlre magna aliBua' t enim ad minim ,eniamA Buis
nstrud e:ercitatin ullamc la&ris nisi ut aliBui# e: ea
cmmd cnseBuat' Duis aute irure dlr in re#rehenderit in
,lu#tate ,elit esse cillum dlre eu fugiat nulla #ariatur'
E:ce#teur sint ccaecat cu#idatat nn #ridentA sunt in cul#a Bui
fficia deserunt mllit anim id est la&rum'
ada tampilan di atas (unsi dari #ollapse masih belum ber5alan& tambahkan denan
5avas!ript bootstrap!ollapse.
Distributed by Fluider Team 7#
-
8/10/2019 Responsive Bootstrap
71/74
;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 ;esponsie
ada 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.
Distributed by Fluider Team 7"
-
8/10/2019 Responsive Bootstrap
72/74
ada 6ambar di atas& ketika la"out dike!ilkan& sisi kanan desain web akan tertutup& beda
ketika dalam mode responsive& la"out akan men"esuaikan.
Distributed by Fluider Team 72
-
8/10/2019 Responsive Bootstrap
73/74
Untuk membuat *TM+ dalam mode responsive& !ukup mudah tinal tambahkan #$$ di
bawah ini sebelum ,-head.
Distributed by Fluider Team 73
-
8/10/2019 Responsive Bootstrap
74/74
K $elamat Men!oba K