Responsive Bootstrap

  • Upload
    aanrwh

  • View
    284

  • Download
    0

Embed Size (px)

Citation preview

  • 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