Makalah Bootstrap

KATA PENGANTAR 

Puji syukur kami ucapkan atas Rahmat, Hidayah, dan Inayah dari Allah SWT, sehina kami !isa melakukan akti"itas pada mestinya dan kemudahan dalam menjalani kehidupan ini# Shala$at !eserta salam sem%a terlimpah atas  penhulu manusia !aik yan dahulu maupun sekaran, yaitu &ainda 'uhammad SAW# San re"%lusi%ner (mat Islam yan !eitu iih memperjuankan islam sehina menjadi aama !erkedudukan tini di !umi Allah ini# Alhamdulill Alhamdulillah, ah, saya telah !erhasil !erhasil mem!uat mem!uat makalah untuk memenuhi tuas yan di!erikan %leh )%sen selaku pem!im!in dalam mata perkuliahan aar  mahasis$a mampu terampil dan kreati* serta mempunyai ide dan aasan yan cemerlan sehina pr%ses pem!elajaran le!ih e*ekti* dan e*isien# Harapan Harapan kami sem%a sem%a makalah makalah ini memenu memenuhi hi kriteri kriteriaa yan yan ideal ideal dan k%nkrit serta dapat !erman*aat dalam pelajaran Pem%raman Internet# Terima kasih kami ucapkan kepada I!u P%p%n )auni#selaku d%sen pem!im!in dalam  pem!elajaran Pemm%raman Internet dan terima kasih jua kepada semua pihak  yan telah mem!antu kami dalam menyelesaikan makalah ini# Akhir kata, hasil makalah ini masih sanat jauh dari kesempurnaan# Tidak  ada yan yan sempur sempurna na karena karena kesempu kesempurna rnaan an hanyal hanyalah ah milik milik Allah Allah SWT# SWT# )emi )emi  per!aikan dan penem!anan makalah ini ke depan, kami sanat menharapkan kritikan dan saran demi kesempurnaan makalah ini# &andunr, ++ April -+.

Penulis

1

)A/TAR ISI

KATA PENGANTAR ############################################# #################################################################### ############################################## #######################+ + )A/TAR ISI &A& I

############################################## ##################################################################### ############################################## ################################### ############

############################################## ###################################################################### ############################################### ############################################## #######################0 0

PEN)AH(1(AN

############################################# #################################################################### ############################################## ###########################0 ####0

A# 1ATAR &E1AKANG &# &ATASAN 'ASA1AH &A& II

############################################ ################################################################### ###########################0 ####0 ############################################ ################################################################### ###########################0 ####0

########################################### ################################################################## ############################################## ###########################################2 ####################2

PE'&AHASAN

########################################### ################################################################## ############################################## ###############################2 ########2

A# Penertian &%%tstrap &# /unsi !%%tstrap 3# 3ara mem!uat &%%tstrap

############################################ ################################################################### ###########################2 ####2 ############################################ ################################################################### ###########################2 ####2 ############################################ ################################################################### ###########################4 ####4

)# 3ara 'em!uat Ta!el )enan &%%tstrap ####################################################5  1ankah6lankah mem!uat ta!el denan !%%tstrap ###################################5 Ta!le Style  • Ta!le Style 0 • Ta!le Style 2 • E# Te Template mplate &l%er &isa )i!uat )enan &%%tstrap ####################################+4 /# 3ara 'em!uat 'enu Na"iasi )enan &%%tstrap ###################################+.  1ankah61ankah 'em!uat 'enu Na"iasi )enan &%%tstrap ###### /i7ed Na"iati%n 8n T%p • )ark Na"iati%n 9n%n /i7ed: • 1iht Na"iati%n 9n%n /i7ed: • G# 3ara 'em!uat Alerts Perinatan atau Pesan )enan &%%tstrap ##############+  1ankah 'em!uat Alerts atau Pesan )enan &%%tstrap ###################+ Green Alerts Successs • &lue Alerts In*% • ;ell%$ ;e ll%$ Alerts Alert s Warnin • H# Kekuranan dan kele!ihan &%%tstrap #######################################################0 &A& III PEN(T(P

########################################### ################################################################## ############################################## #####################################2 ##############2 ############################################## ##################################################################### ############################################## #############################2 ######2

)A/TAR P(STAKA

########################################### ################################################################## #########################################4 ##################4

2

&A& I PEN)AH(1(AN A# 1ATAR &E1AKANG Pada saat ini dunia industri dan !isnis memerlukan in*%rmasi yan tepat, cepat dan rele"an# (ntuk mendapatkan in*%rmasi yan diininkan tentunya harus menunakan sistem in*%rmasi# Sistem in*%rmasi dalam suatu %ranisasi dapat dikatakan se!aai suatu sistem yan menyediakan in*%rmasi !ai semua tinkatan dalam %ranisasi terse!ut kapan saja diperlukan# Sistem ini menyimpan, menam!il, menu!ah, men%lah dan menk%munikasikan in*%rmasi yan diterima denan menunakan sistem in*%rmasi atau peralatan sistem lainnya#

&# &ATASAN 'ASA1AH )ari latar !elakan masalah di atas, maka muncul tuas penulis untuk  menjelaskan le!ih jauh tentan manajemen umum# +# Apa penertian !%%tstrap < # Apa keunaan !%%tstrap < 0# &aaimana !elajar !%%tstrap untuk pemula < 2## Apa saja kele!ihan dan kekuranan !%%tstrap <

&A& II

3

PE'&AHASAN A# Penertian &%%tstrap

&%%tstrap adalah plat*%rm !aru yan dikem!ankan tim t$itter# Pertama kali muncul pada ajan hackweek  dan kini sudah mulai penyempurnaan# Plat*%rm ini hanya menunakan sedikit c%din 3SS dan =a"aScript namun tetap !isa mem!uat $e!site yan p%$er*ull menikuti perkem!anan !r%$ser# We!site yan menunakan bootstrap akan menjadi $e!site yan *leksi!el, nyaman dan tentu saja cepat# &%%tstrap jua memudahkan penaturan $e!site !ai mereka yan kuran mahir c%din atau tidak punya $aktu !anyak# Sekumpulan ja"ascript dan 3SS yan di!utuhkan untuk !anyak sekali $idet ada dalam satu *ile yan terus di update %leh penem!an# Pemilik $e!site tidak akan lai disi!ukkan denan  penaturan css atau ja"ascript !erle!ihan# 'ereka hanya perlu menentukan adet atau elemen apa yan inin ditampilkan dalam !entuk HT'1 standart !%%tstrap yan sanat simple# 'isalkan dulu untuk menam!ahkan menu!ar di !l%sp%t, maka Anda  perlu menyisipkan *ile 3SS, HT'1 !ahkan =a"aScript untuk e**ect tertentu# Kemudian ketika Anda inin menam!ahkan dr%pd%$n menu, maka per $idet,  palin tidak Anda !utuh menam!ahkan 3SS dan HT'1 lai# &elum lai jika inin le!ih menarik akan di!utuhkan ja"ascript tam!ahan# &eitu seterusnya setiap penam!ahan $idet selalu di!utuhkan !anyak k%de# Tapi setelah instalasi  !%%tstrap, Anda hanya perlu menam!ahkan k%de HT'1 nya saja# Tapi Penunaan !%%tstrap kadan mem!uat kita jadi kuran kreati*, 3%din yan sudah di !uatkan %leh penem!an mem!uat desain $e! kita ter!atas# Se!enarnya kita masih !isa tam!ahkan 3SS manual pada elemen6elemen  !%%tstrap untuk mempercantiknya, tapi jelas ini mem!uat $e! kita nanun# 'enam!ahkan 3SS manual sama saja kem!ali ke cara lama# =adi, pilihan Anda apakah akan menikuti perkem!anan jaman !ersama  !%%tstrap, editin dan kel%la $e!site secara instan# Atau le!ih suka oprek  template sendiri !erkutat denan k%de 3SS yan Anda susun6susun sendiri#

&# /unsi !%%tstrap

&%%tstrap merupakan *rame$%rk untuk mem!anun desain $e! secara resp%nsi*# Artinya, tampilan $e! yan di!uat %leh !%%tstrap akan menyesuaikan ukuran layar dari !r%$ser yan kita unakan !aik di deskt%p, ta!let ataupun m%!ile de"ice# /itur ini !isa diakti*kan ataupun din%n6akti*kan sesuai denan keininan kita sendiri# Sehina, kita !isa mem!uat $e! untuk tampilan deskt%p saja dan apa!ila dirender %leh m%!ile !r%$ser maka tampilan dari $e! yan kita

4

 !uat tidak !isa !eradaptasi sesuai layar# )enan !%%tstrap kita jua !isa mem!anun $e! dinamis ataupun statis# 3# 3ara mem!uat &%%tstrap

(ntuk memulai !elajar &%%tstrap, Anda harus mempersiapkan !ahan dan t%%ls  pendukun untuk melenkapi keiatan !elajar terse!ut# &aiklah lansun saja# Persiapan> Anda Harus memiliki *ile distri!usi &%%tstrap (ntuk menunakan !%%tstrap, terle!ih dahulu Anda harus mend%$nl%ad res%urce *ile atau *ile distri!usi yan disediakan %leh !%%tstrap di situs resminya et!%%tstrap#c%m# Pada halaman terse!ut, terdapat t%m!%l )%$nl%ad &%%tstrap se!aaimana terlihat pada am!ar diatas, lansun saja? klik t%m!%l terse!ut# Kemudian pilih lai )%$nl%ad &%%tstrap Setelah did%$nl%ad, kemudian e7tract menunakan pr%ram seperti @ip 9Gratis:  atau winRAR (shareware)# Se!etulnya, Anda jua !isa mem!uka *ile terse!ut denan aplikasi !a$aan $ind%$s denan cara mem!uka *ile terse!ut, kemudian c%py seluruh *ile dan paste6kan ke *%lder lain# )%$nl%ad jBuery 1i!rary (ntuk &ekerja 8**line (ntuk !isa menaplikasikan !%%tstrap c%mp%nent seperti m%dal dial%, na"iati%n !ar dan lainnya yan mem!utuhkan !%%strap =S, &%%tstrap =S jua mem!utuhkan jBuery li!rary aar !isa !erjalan n%rmal# &%%tstrap tidak  menyertakan jBuery di dalam *ile d%$nl%ad6nya untuk itu, kita harus mend%$nl%adnya secara terpisah# Hal ini dilakukan aar kita !isa !ekerja dan menunakannya secara %**line 9tanpa k%neksi internet:# Silahkan d%$nl%ad  jBuery li!rary denan menuju situs resmi  jBuery )%$nl%ad, pilih jBuery +#7 kemudian, d%$nl%ad denan menklik link )%$nl%ad the c%mpressed, pr%ducti%n  jBuery +#++#+ Anda harus memiliki c%de edit%r# 3%de edit%r pentin sekali untuk memanipulasi *ile yan akan kita kem!ankan khususnya *ile HT'1, 3SS dan =a"ascript se!aaimana *ile terse!ut terdapat  pada !%%tstrap# =anan pernah menunakan W%rd pr%cess%r 9'icr%s%*t W%rd, dll: ataupun n%tepad untuk memanipulasi *ile6*ile terse!ut# Karena aplikasi terse!ut tidak c%c%k dan terdapat !anyak kekuranan yan akan mem!inunkan kita sendiri nantinya# Ada !anyak sekali c%de edit%r yan terse!ar di internet yan dapat kita unakan  !aik yan ratis maupun yan !er!ayar# Se!aai pemula, munkin kita !isa memulai denan menunakan N%tepadCC# Aplikasi ini ratis dan !anyak  diunakan %leh de"el%per# )%$nl%ad aplikasi N%tepadCC

5

'emulai### Setelah semua dipersiapkan saatnya memulai untuk !elajar !%%tstrap# &aik, ikuti tahap6tahapnya !erikut ini> &uat /%lder &aru &uatlah *%lder !aru, !eri nama misalkan D&elajar&%%tstrapD# 3%py seluruh *ile &%%tstrap ke dalam /%lder &aru Terse!ut 3%py *%lder css,  fonts  dan js yan ada pada &%%tstrap yan telah kita d%$nl%ad tadi, ke dalam *%lder !aru terse!ut 9&elajar&%%tstrap: 3%py *ile jBuery ke dalam *%lder js 3%py dan Ga!unkan *ile jFuery6+#++#+#min#js yan telah kita d%$nl%ad kedalam *%lder  js punya !%%tstrap tadi, hal ini dilakukan untuk mempermudah pr%ses  pem!elajaran# &uat *ile html &uat *ile !aru denan n%tepaddCC kemudian c%py c%de snippet yan saya sediakan di!a$ah ini, kemudian sa"e dan !erilah nama seperti> index.html   atau default.html   dan simpanlah *ile terse!ut ke *%lder D&elajar&%%tstrapD yan telah di!uat diatas# &erikut k%denya>

?)83T;PE html html lanDenD   head meta charsetDut*65D meta http6eFui"DJ6(A63%mpati!leD c%ntentDIEedeD meta nameD"ie$p%rtD c%ntentD$idthde"ice6$idth, initial6scale+D title&%%tstrap 0#0#- Starter Template 6 !y dul#$e!#idtitle

?66 &%%tstrap 66 link hre*Dcss!%%tstrap#min#cssD relDstylesheetD

?66 HT'14 Shim and Resp%nd#js IE5 supp%rt %* HT'14 elements and media Fueries 66 ?66 WARNING> Resp%nd#js d%esnLt $%rk i* y%u "ie$ the pae "ia *ile> 66 ?66Mi* lt IE O

6

script srcDhttps>%ss#ma7cdn#c%mhtml4shi"0#@#html4shi"#min#jsDscript script srcDhttps>%ss#ma7cdn#c%mresp%nd+#2#resp%nd#min#jsDscript   ?Mendi*O66   head   !%dy ?66 AWA1 38NTENT 66 hapus dari sini ke!a$ah 9sampai AKHIR 38NTENT: 66 di" classDc%ntainerD h+Apa Ka!ar )unia<h+ ?66 Small m%dal 66 !utt%n classD!tn !tn6danerD data6t%leDm%dalD data6taretD#!s6e7ample6m%dal6smDKlik  Aku!utt%n

di" classDm%dal *ade !s6e7ample6m%dal6smD la!elled!yDmySmall'%dal1a!elD aria6hiddenDtrueD

ta!inde7D6+D

r%leDdial%D

aria6

di" classDm%dal6dial% m%dal6smD di" classDm%dal6c%ntentD

di" classDm%dal6headerD !utt%n typeD!utt%nD classDcl%seD data6dismissDm%dalDspan aria6 hiddenDtrueDspanspan classDsr6%nlyD3l%sespan!utt%n h2 classDm%dal6titleD idDmySmall'%dal1a!elDSmall m%dalh2  

di" di" classDm%dal6!%dyD

Hai### salam kenal dari str%ndulstr%n# =ika dial% ini muncul dan Anda !isa !aca tulisan ini !erarti &%%tstrap !erhasil di l%ad dan terinterasi denan !aik# Selamat &elajar     

di" di"

  di"   di" di"

?66 AKHIR 38NTENT 6 dari sini ke!a$ah jn dihapus 66

7

?66 jBuery 9necessary *%r &%%tstrapLs =a"aScript pluins: 66 script srcDjsjFuery6+#++#+#min#jsDscript ?66 Include all c%mpiled pluins 9!el%$:, %r include indi"idual *iles as needed 66 script srcDjs!%%tstrap#min#jsDscript

!%dy html

)# 3ara 'em!uat Ta!el )enan &%%tstrap 3ara 'em!uat Ta!el  Ta!le )enan &%%tstrap > 1ankah6lankah mem!uat ta!el denan css t$itter !%%tstrap# &aaimana cara mem!uat ta!el denan !%%tstrap<# Ta!el sanat !eruna untuk menampilkan se!uah data# Kita serin menjumpai ta!el dimana6mana !eitu jua dalam suatu halaman $e!# Ta!le jua memilki  !er!aai macam tampilan ada yan !er$arna6$arni dan jua ada yan !erupa aris !iasa# )alam setiap plat*%rm !l% pasti tersedia *itur ta!el, namun terkadan tampilannya kuran menarik dan tidak sesuai denan apa yan kita ininkan# &erikut ini adalah c%nt%h ta!el yan di!uat denan menunakan css dari t$itter  yaitu &%%tstrap# )enan 3SS t$itter !%%tstrap kita semakin mudah dalalm mem!uat ta!le denan tampilan yan le!ih menarik# Kita jua tidak perlu mendesain denn 3SS yan harus kita tulis sendiri yan tentunya akan memakan $aktu#

8

1ankah6lankah mem!uat ta!el denan !%%tstrap

•

3%py terle!ih dahulu k%de !erikut ke template anda ?66 1atest c%mpiled and mini*ied 3SS 66 link relDstylesheetD hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap#min#cssD ?66 8pti%nal theme 66 link relDstylesheetD hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap6theme#min#cssD

Q Ta!le Style +  /irst Name 1ast Name (sername + 'ark

8tt%

md%

 =ac%!

Th%rnt%n

*at

0 1arry

the &ird

t$itter  

di" classDc%l6md6.D ta!le classDta!leD  

thead

 

tr

 

thth th/irst Nameth th1ast Nameth

 

th(sernameth

 

tr

 

thead

 

t!%dy

 

tr

 

td+td

 

td'arktd

9

 

td8tt%td

 

tdmd%td

 

tr

 

tr

 

tdtd

 

td=ac%!td

 

tdTh%rnt%ntd

 

td*attd

 

tr

 

tr

 

td0td

 

td1arrytd tdthe &irdtd

 

tdt$ittertd

 

tr

     

t!%dy ta!le di"

Q Ta!le Style 



/irst Name

1ast Name

(sername

+

'ark

8tt%

md%



=ac%!

Th%rnt%n

*at

0

1arry

the &ird

t$itter  

di" classDc%l6md6.D ta!le classDta!le ta!le6stripedD  

thead

 

tr

 

thth

10

th/irst Nameth th1ast Nameth  

th(sernameth

 

tr

 

thead

 

t!%dy

 

tr

 

td+td

 

td'arktd

 

td8tt%td

 

tdmd%td

 

tr

 

tr

 

tdtd

 

td=ac%!td

 

tdTh%rnt%ntd

 

td*attd

 

tr

 

tr

 

td0td

 

td1arrytd tdthe &irdtd

         

tdt$ittertd tr t!%dy ta!le di"

Q Ta!le Style 0

11



/irst Name

1ast Name

(sername

'ark

8tt%

md%

'ark

8tt%

T$&%%tstrap



=ac%!

Th%rnt%n

*at

0

1arry the &ird

+

t$itter  

di" classDc%l6md6.D ta!le classDta!le ta!le6!%rderedD  

thead

 

tr

 

thth th/irst Nameth th1ast Nameth

 

th(sernameth

 

tr

 

thead

 

t!%dy

 

tr td r%$spanDD+td

 

td'arktd

 

td8tt%td

 

tdmd%td

 

tr

 

tr

 

td'arktd

 

td8tt%td

 

tdT$&%%tstraptd

 

tr

 

tr

12

 

tdtd

 

td=ac%!td

 

tdTh%rnt%ntd

 

td*attd

 

tr

 

tr

 

td0td td c%lspanDD1arry the &irdtd

 

tdt$ittertd

       

tr t!%dy ta!le di"

Q Ta!le Style 2



/irst Name

1ast Name

(sername

+

'ark

8tt%

md%



=ac%!

Th%rnt%n

*at

0

1arry the &ird

t$itter  

di" classDc%l6md6.D ta!le classDta!le ta!le6c%ndensedD  

thead

 

tr

 

thth th/irst Nameth th1ast Nameth

   

th(sernameth tr

13

 

thead

 

t!%dy

 

tr

 

td+td

 

td'arktd

 

td8tt%td

 

tdmd%td

 

tr

 

tr

 

tdtd

 

td=ac%!td

 

tdTh%rnt%ntd

 

td*attd

 

tr

 

tr

 

td0td td c%lspanDD1arry the &irdtd

         

tdt$ittertd tr t!%dy ta!le di"

(ntuk penisian data6datanya !isa anda u!ah sesuai denan keininan dan ke!utuhan anda# Kele!ihannya adalah kita tidak perlu menuliskan css secara manual untuk mem!uat tampilan ta!el le!ih menarik 

E# Template &l%er &isa )i!uat )enan &%%tstrap Template &l%er &isa )i!uat )enan &%%tstrap > 'em!uat Template &l%er Resp%nsi"e )enan &%%tstrap 6 template yan dipakai !l%er sekaran

14

ini !elum !anyak yan menunakan &%%tsrap, dan masih menunakan Style  3SS yan ditulis sendiri# )enan hadirnya tekn%l%i &%%tsrap semakin memudahkan se%ran $e! desiner dalam melakukan desin terhadap tampilan se!uah $e!site# Karena anda tidak perlu lai menulis !aris k%de 3SS, HT'1 dan =a"aScript yan terlalu panjan# &ai anda yan !elum tahu apa itu &%%tstrap< )an apa saja kele!ihan dan kekuranan &%%tstrap silahkan !aca artikel saya se!elumnya Penertian T$itter &%%tstrap /unsi Kele!ihan dan Kekuranannya#

&%%tstrap !isa diterapkan hampir disemua Plat*%rm, selain itu &%%tsatrap jua memiliki !anyak kele!ihan#

'enurut saya ini adalah sesuatu yan sanan melelahkan karena harus menatur tampilan &l% aar sesuai di semua layar !aik k%mputer, ta!let maupun smartph%ne# )alam Penunaan !%%tstrap (ntuk mem!uat template &l%er anda hanya mem!utuhkan 0 k%mp%nen utama yaitu  Style 3SS dan + &uah =a"aScript ditam!ah =Fuery# &erikut adalah style dan ja"a Script#

?66 1atest c%mpiled and mini*ied 3SS 66 link relDstylesheetD hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap#min#cssD ?66 8pti%nal theme 66 link relDstylesheetD theme#min#cssD

hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap6

Kedua Style terse!ut ditempatkan di dalam elemen  yaitu se!elum k%de ?66 jBuery 9necessary *%r &%%tstrapLs =a"aScript pluins: 66 script srcLhttps>aja7#%%leapis#c%maja7li!sjFuery+#++#-jFuery#min#jsL ?66 1atest c%mpiled and mini*ied =a"aScript 66 script srcLnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+js!%%tstrap#min#jsL

Kedua K%mp%nen =a"ascript diatas ditempatkan di dalam element  !aian akhir yaitu se!elum # Tujuannya adalah untuk mempercepat l%adin se!uah $e!site#

/# 3ara 'em!uat 'enu Na"iasi )enan &%%tstrap

15

3ara 'em!uat 'enu Na"iasi  Na"iati%n )enan &%%tstrap dan 1ankah6 lankahnya > Na"iati%n /i7ed dan Na"iasi Resp%nsi"e 8t%matis  salah satu kemudahan yan di!erikan %leh &%%tstrap yaitu dean adanya 'enu Na"iasi   Na"iati%n 'enu# Kita tidak perlu susah6susah mem!uat menu na"iasi dean 3SS !uatan sendiri, karena denan &%%tstrap Anda !isa mem!uat menu na"iasi denan cepat dan mudah# Anda hanya perlu memanil kelas  class dari 3SS yan disediakan %leh &%%tstrap# 'enu na"iasi yan disediakan terdapat !er!aai macam "ariasi, seperti Na"iati%n /i7ed# ;an menarik dari menu na"iasi ini yaitu, 'enu Na"iasi &%%tstrap Akan 8t%matis menyesuaikan ukuran layar atau serin dise!ut Resp%nsi"e# &ai anda yan menunakan &l%er, &%%tstrap !isa menjadi pilihan dalam template anda# &ai anda yan !elum menetahui cara  penunaanya dalam template !l%er, silahkan !aca artikel !erikut Template&l%er &isa )i!uat )enan &%%tstrap# &aiklah !erikut adalah lankah6 lankah dalam mem!uat 'enu Na"iasi atau Na"iati%n 'enu denan &%%tstrap#

U 1ankah61ankah 'em!uat 'enu Na"iasi )enan &%%tstrap

Pertama, jika anda penuna &l%er silahkan l%in terle!ih dahulu# Kemudian pilih Template  Edit HT'1# Tempatkan 3SS !erikut se!elum k%de head ?66 1atest c%mpiled and mini*ied 3SS 66 link relDstylesheetD hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap#min#cssD ?66 8pti%nal theme 66 link relDstylesheetD hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap6theme#min#cssD =ika sudah kemudian tempatkan k%de =a"aSript !erikut ini diatas k%de !%dy ?66 jBuery 9necessary *%r &%%tstrapLs =a"aScript pluins: 66 script srcLhttps>aja7#%%leapis#c%maja7li!sjFuery+#++#-jFuery#min#jsL ?66 1atest c%mpiled and mini*ied =a"aScript 66

16

script srcLnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+js!%%tstrap#min#jsL 1ankah Selanjutnya dalah pemanilan kelas  class dari Na"iasi# Silahkan Pilih Style Na"iasi yan anda ininkan, kemudian Tempatkan k%de  !erikut ini sesuai keininan anda# Q /i7ed Na"iati%n 8n T%p

?66 /i7ed na"!ar 66 di" classDna"!ar na"!ar6in"erse na"!ar6*i7ed6t%pD r%leDna"iati%nD di" classDc%ntainerD di" classDna"!ar6headerD !utt%n typeD!utt%nD classDna"!ar6t%leD data6t%leDc%llapseD data6 taretD#na"!ar6c%llapseD span classDsr6%nlyDT%le na"iati%nspan span classDic%n6!arDspan span classDic%n6!arDspan span classDic%n6!arDspan  

!utt%n a classDna"!ar6!randD hre*DD&%%tstrap themea

 

di" di" classDna"!ar6c%llapse c%llapseD ul classDna" na"!ar6na"D li classDacti"eDa hre*DDH%meali lia hre*Da!%utDA!%utali lia hre*Dc%ntactD3%ntactali li classDdr%pd%$nD

a hre*DD classDdr%pd%$n6t%leD data6 t%leDdr%pd%$nD)r%pd%$n ! classDcaretD!a ul classDdr%pd%$n6menuD lia hre*DDActi%nali lia hre*DDAn%ther acti%nali

17

lia hre*DDS%methin else hereali li classDdi"iderDli li classDdr%pd%$n6headerDNa" headerli lia hre*DDSeparated linkali lia hre*DD8ne m%re separated linkali      

ul li ul di"?66#na"6c%llapse 66

 

di"

  di" Q )ark Na"iati%n 9n%n /i7ed:

di" classDna"!ar na"!ar6in"erseD di" classDc%ntainerD di" classDna"!ar6headerD !utt%n typeD!utt%nD classDna"!ar6t%leD data6t%leDc%llapseD data6 taretD#na"!ar6c%llapseD span classDsr6%nlyDT%le na"iati%nspan span classDic%n6!arDspan span classDic%n6!arDspan span classDic%n6!arDspan  

!utt%n a classDna"!ar6!randD hre*DDPr%ject namea

 

di" di" classDna"!ar6c%llapse c%llapseD ul classDna" na"!ar6na"D li classDacti"eDa hre*DDH%meali lia hre*Da!%utDA!%utali

18

lia hre*Dc%ntactD3%ntactali li classDdr%pd%$nD a hre*DD classDdr%pd%$n6t%leD data6 t%leDdr%pd%$nD)r%pd%$n ! classDcaretD!a ul classDdr%pd%$n6menuD lia hre*DDActi%nali lia hre*DDAn%ther acti%nali lia hre*DDS%methin else hereali li classDdi"iderDli li classDdr%pd%$n6headerDNa" headerli lia hre*DDSeparated linkali lia hre*DD8ne m%re separated linkali      

ul li ul di"?66#na"6c%llapse 66

   

di" di"

Q 1iht Na"iati%n 9n%n /i7ed:

di" classDna"!ar na"!ar6de*aultD di" classDc%ntainerD di" classDna"!ar6headerD !utt%n typeD!utt%nD classDna"!ar6t%leD data6t%leDc%llapseD data6 taretD#na"!ar6c%llapseD span classDsr6%nlyDT%le na"iati%nspan span classDic%n6!arDspan span classDic%n6!arDspan span classDic%n6!arDspan  

!utt%n

19

a classDna"!ar6!randD hre*DDPr%ject namea  

di" di" classDna"!ar6c%llapse c%llapseD ul classDna" na"!ar6na"D li classDacti"eDa hre*DDH%meali lia hre*Da!%utDA!%utali lia hre*Dc%ntactD3%ntactali li classDdr%pd%$nD

a hre*DD classDdr%pd%$n6t%leD data6 t%leDdr%pd%$nD)r%pd%$n ! classDcaretD!a ul classDdr%pd%$n6menuD lia hre*DDActi%nali lia hre*DDAn%ther acti%nali lia hre*DDS%methin else hereali li classDdi"iderDli li classDdr%pd%$n6headerDNa" headerli lia hre*DDSeparated linkali lia hre*DD8ne m%re separated linkali      

ul li ul di"?66#na"6c%llapse 66

   

di" di"

misalnya anda inin menempatkan menu na"iasi diatas header# 'aka cari l%kasi header c%nt%h > di" idVheader6$rapperV

20

Tempatken k%de terse!ut diatas header6$rapper# Perlu diperhatikan, setiap template tidak sama# &isa jadi anda tidaka akan menemukan header6$rapper# Sesuaikan denan template yan anda unakan# =ika Sudah silahkan anda Simpan dan lihatlah hasilnya# 'em!uat Se!uah menu na"iasi denan !%%tstrap terasa le!ih mudah, selain itu 'enu na"iasi terse!ut !isa anda edit sesuai denan keininan anda denan menam!ahkan 3SS# 'unkin &%%tstrap !isa menjadi pilihan !ai anda yan inin mem!uat template tapi malas untuk menulis satu6persatu k%de dalam template anda# &%%tstrap jua rinan, dan tidak mem!uat template menjadi lam!at saat di!uka#

G# 3ara 'em!uat Alerts Perinatan atau Pesan )enan &%%tstrap 3ara 'em!uat Alerts, Perinatan atau Pesan )enan &%%tstrap > 1ankah6 lankah mem!uat alerts atau pesan denan css t$itter &%%tstrap, &aaimana cara mem!uat alert denan !%%tstrap< &aaimana menampilkan alerts %ada artikel atau  p%stin !l%<# Se!uah pesan hampir kita jumpai disetiap halaman !l% se!aai c%nt%h dalam !l% denan kate%ri template munkin anda akan menjumpai  pesan !erikut#

=anan Hapus 3redit 1inkV Selain itu anda munkin jua pernah menjumpai pesan !erupa P%p (p denan  ja"ascript# &eitu jua diatas *%rm k%mentar anda pasti jua pernah menjumpai  !e!erapa pesan# Pesan yan muncul memiliki tampilan yan !er!eda6!eda# &erikut ini adalah !e!erapa c%nt%h tampilan Alerts yan di!uat denan 3SS T$itter &%%tstrap# &ai anda yan !elum tahu apa &%%tstrap silahkan !aca artikel  !erikut Penertian T$itter &%%tstrap /unsi Kele!ihan dan Kekuranannya

)enan menunakan &%%tstrap kita tidak perlu lai mempercantik alerts atau  pesan denan 3SS yan harus kita tulis# Kita cukup memanil 3lass dari 3ss yan telah disediakan %leh &%%tstrap# )enan !eitu, kita semakin mudah dalam mem!uat alerts# &aaimana cara mem!uat alert denan !%%tstrap< •

1ankah 'em!uat Alerts atau Pesan )enan &%%tstrap

21

Pertama, jika anda penuna &l%er silahkan l%in terle!ih dahulu# Kemudian pilih Template  Edit HT'1# Tempatkan 3SS !erikut se!elum k%de head ?66 1atest c%mpiled and mini*ied 3SS 66 link relDstylesheetD hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap#min#cssD ?66 8pti%nal theme 66 link relDstylesheetD hre*Dnetdna#!%%tstrapcdn#c%m!%%tstrap0#+#+css!%%tstrap6theme#min#cssD Kemudian Simpan (ntuk l%kasi menampikan alerts sesuai denan keininan anda, secaai c%nt%h  pesan akan ditampilkan di dalam salah satu P%stin artikel# Pilih Artikel kemudian edit dan u!ah dari 3%mp%se ke HT'1# Silahkan Pilih tampilan pesan yan anda ininkan !erikut ini# Q Green Alerts Successs

Well d%ne? ;%u success*ully read this imp%rtant alert messae# di" classDalert alert6successD r%leDalertD str%nWell d%ne?str%n ;%u success*ully read this imp%rtant alert messae# di" Q &lue Alerts In*%

Heads up? This alert needs y%ur attenti%n, !ut itLs n%t super imp%rtant# di" classDalert alert6in*%D r%leDalertD str%nHeads up?str%n This alert needs y%ur attenti%n, !ut itLs n%t super  imp%rtant# di" Q ;ell%$ Alerts Warnin

Warnin? &est check y% sel*, y%uLre n%t l%%kin t%% %%d# di" classDalert alert6$arninD r%leDalertD str%nWarnin?str%n &est check y% sel*, y%uLre n%t l%%kin t%% %%d# di"

22

Q Red Alerts )aner  8h snap? 3hane a *e$ thins up and try su!mittin aain# di" classDalert alert6danerD r%leDalertD str%n8h snap?str%n 3hane a *e$ thins up and try su!mittin aain# di" =ika sudah silahkan simpan dan lihat hasilnya 'udah !ukan, selain !e!erapa tampilan alerts yan telah disediakan %leh  !%%tstrap anda jua !isa menam!ahkan 3SS aar le!ih menarik dan menu!ah  pesan sesuai denan keininan anda#

H# Kele!ihan dan kekuranan !%%tstrap  Kele!ihan )ari &%%tstrap >

Anda tidak perlu menuliskan !aris k%de 3SS, HT'1 dan =a"aScript yan terlalu  panjan# Terdapat !anyak "arian style pada !%%tstrap# Ada !anyak pilihan !utt%n, na"iati%n, car%usel dll# 8t%matis Resp%nsi"e, Tidak perlu menatur# 3SS dan =a"aScript yan rinan# )an masih !anyak lai



Kekuranan &%%tstrap >

'inim am!ar karena menunakan 3SS0# &elum mampu mem!erikan tampilan yan sesuai di semua $e! !r%$ser# 'em!uat kita menjadi kuran kreati* karena terpaku denan c%din yan dikem!ankan %leh de"el%per#

&A& III PEN(T(P

SARAN >

23

)ari uraian di atas penulis !erharap, pem!aca dapat memahami tentan &%%tstrap# Penulis menyadari !ah$a dalam pem!uatan makalah ini masih !anyak kesalahan dan kekuranan, !aik dari sei penulisan maupun dari sei pemaparan# 'aka dari itu pemakalah menerima dan menharapkan kritik dan saran dari pem!aca yan si*atnya mem!anun, aar makalah ini dapat menjadi le!ih sempurna dan menjadi rujukan !ai pem!aca nantinya#

)A/TAR P(STAKA

http>itcentrestain!atusankar#!l%sp%t#c%m-+2++$e!site6atau6!l%6lansun6 nacirr#html http>themasd%y%k#c%m-+0-5penertian6apa6itu6!%%tstrap#html

24

http>$$$#ee#$e!#id-+0+-!%%tstrap6itu6apa6sih#html
25