Mga Tampok ng Bootstrap

Sa pangalawang artikulong ito sa serye harapin natin ang mga feature ng Bootstrap. Ito ay isang kumpletong library ng mga mapagkukunan para sa disenyo ng mga web site at application, kabilang ang mga template at elemento para sa mga form, font at menu, bukod sa iba pa.

Sa artículo nauuna pinagtatalunan namin na may mga pagkakataon na ang mga tagapamahala ng nilalaman ay hindi ang pinakamahusay na pagpipilian at iyon Ang pagsulat ng code mula sa simula para sa isang website ay ang tamang alternatibo. Gayunpaman, hindi ito nangangahulugan na kailangan nating muling likhain ang gulong. Ang paggamit ng mga framework tulad ng Bootstrap ay lubos na nakakabawas sa oras ng disenyo at nagpapadali sa pagkuha ng mga resulta.

Mga Tampok ng Bootstrap

Upang maunawaan ang mga tampok ng Bootstrap, kailangan nating maunawaan ang paradigm shift sa disenyo ng website.

nang lumitaw sila kailangan lang umangkop ng mga website sa iba't ibang laki ng mga monitor. Ngunit, sa paglipas ng panahon, ang mga mobile phone at tablet ay lalong naging ginustong paraan ng pag-access para sa mga user. ang hamon ay gawin ang mga pahina na umangkop sa iba't ibang mga screen nang hindi kinakailangang palakihin, paliitin o ilipat ng gumagamit ang nilalaman upang makita ito.

Sa prinsipyo, ang mga sumusunod na pamamaraan ay pinagtibay:

• Tumutugon na disenyo: Ang disenyo ay pareho ngunit awtomatikong iniangkop sa laki ng screen. Ang diskarte na ito ay may ilang mga problema tulad ng ang gumagamit ay maaaring mapilitang mag-zoom in sa ilang mga seksyon ng pahina upang makita ang mga ito.
• Progresibong pagsulong: Nagsisimula ito sa pamamagitan ng pagdidisenyo ng site para sa device na may mas kaunting mga mapagkukunan (karaniwan ay ang mobile phone dahil mayroon itong mas maliit na screen, isang browser na may mas kaunting compatibility para sa mga advanced na feature, at kadalasang nangangailangan ng paggamit ng data plan upang kumonekta). Kapag natapos na, batay sa disenyong ito, idinaragdag ang mga feature para makuha ang bersyon para sa mga tablet, notebook at desktop computer.
• Unti-unting pagkasira: Ito ay ang reverse path. Ang desktop site ay unang nilikha at ang mga tampok ay tinanggal hanggang sa isang mobile-friendly na bersyon ay nakuha.

Dahil ito ay palaging mas madaling magdagdag kaysa mag-alis, ang progresibong pag-unlad ay ang kalakaran na namahala. B.Halimbawa, ang ootstrap ay gumagamit ng "mobile muna" na diskarte, ibig sabihin, ang batayan ng disenyo ay palaging ang bersyon na ipapakita sa pinakamaliit na laki ng screen at, pagkatapos, ang mga pagbabagong gagawin habang ipinapasa ito sa mga kasunod na laki ay itinatag.

Ang isang karagdagang bentahe ng paggamit ng Bootstrap ay may kinalaman sa katotohanang iyon Inuna ng Google ang mga pang-mobile na site sa mga paghahanap nito.

Ang isa pang konsepto na dapat nating isaalang-alang ay ang pagkakaiba sa pagitan ng frontend at backend na disenyo. Ang disenyo ng front-end ay pinangangasiwaan ang lahat ng nakikita ng user at lahat ng bagay na nakakasalamuha nila. Pinapangkat ng backend kung ano ang ginagawa sa server. Ang isang halimbawa ng una ay ang isang web form. Ang pagpapakita ng isang serye ng mga opsyon ay ipinapakita bilang isang drop-down na menu ay frontend na disenyo, na ang napiling opsyon ay ipinadala sa pamamagitan ng koreo o idinagdag sa isang database ay backend na disenyo.

Ang Bootstrap ay isang framework na pinagsasama-sama ang mga elemento ng CSS style at Javascript programming para makontrol ang pag-render at magbigay ng interactivity sa lahat ng bahagi ng isang page na binuo sa HTML5.

Kabilang sa mga bagay na maaari nating kontrolin sa Bootstrap ay:

• Accessibility: Ang mga bahagi tulad ng mga menu o dialog ay tugma sa mga screen reader o angkop para sa paggamit ng mga taong may mahinang paggalaw.
• Mga Pindutan: Kabilang ang mga panukala, istilo, estado at pagpapangkat.
• Mga Form:  Kabilang ang pag-render, mga uri ng mga kontrol, at pagpapatunay ng input.
• Imagery: Kinokontrol ang pinagmulan, pagkakahanay, at laki ng screen ng mga ipinasok na larawan.
• Mga elemento ng nabigasyon: Halimbawa, ang mga nakatagong sidebar o patayo o pahalang na mga menu depende sa device.
• Typography: Kontrolin kung paano ipinapakita ang iba't ibang bahagi ng teksto.
• Layout: Pagsasaayos ng pag-render ng nilalaman depende sa device

Sa susunod na artikulo makikita natin ang ilang praktikal na halimbawa ng paggamit nito.