Sa post na ito makikita natin ang layout ng isang Bootstrap site upang ipakita ang kamangha-manghang mga kakayahan ng open source na framework na ito. Sa nakaraang mga artikulo nag-install kami ng development environment at mga kinakailangang plugin para mapadali ang aming trabaho.
Tandaan na bilang tagapamahala ng nilalaman ng Linux Adictos Hindi nito pinapayagan akong ipasok ang code ng mga halimbawang na-upload ko sa GitHub. Upang i-download ang mga ito kailangan mong i-install ang Git package sa iyong pamamahagi at pagkatapos ay isulat ang sumusunod na mga utos:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Kakailanganin mong patakbuhin ang dalawang utos na ito sa pana-panahon upang i-download ang mga bagong file.
Pagsusuri ng code
Ngayon sa file explorer buksan ang example2.html gamit ang VSCodium. (Buksan gamit ang kanang pindutan) Nakita namin ang sumusunod:
- Sa linya 1 sinasabi namin sa browser ang uri ng dokumento upang malaman nito kung paano ito i-render.
- Ang Linya 2 ay nagpapahiwatig ng wika ng site, na nagsasabi sa browser kung paano katawanin ang ilang partikular na character at ang wika ng nilalaman sa mga search engine, na nagpapadali sa pagpoposisyon. Sa aming code ito ay tinukoy bilang es ngunit may mga panrehiyong variant tulad ng es_ES para sa Spanish mula sa Spain o es_AR para sa Spanish mula sa Argentina.
- Mula sa linya 3 mayroon kaming lalagyan ng metadata na matatagpuan sa pagitan ng mga tag Y . Ang metadata ay nagbibigay ng impormasyon tungkol sa dokumento. Sa aming halimbawa:
- Ang linya 4 ay nagpapahiwatig ng pamantayang ginagamit para sa pag-encode ng character. Marahil ay nakita mo paminsan-minsan na sa halip na mga accented na character o mga espesyal na simbolo, isang tandang pananong sa loob ng isang brilyante ang ipinapakita. Ito ay dahil gumagamit ang browser ng hindi tamang pag-encode. Iniiwasan ito ng pahayag sa linya 8 sa pamamagitan ng tahasang pagdeklara nito.
- Sa linya 5 sinasabi namin sa browser kung paano ito dapat umangkop sa iba't ibang mga format ng screen.
- Ang pamagat na itinakda namin sa linya 6 ay ipapakita sa tuktok na bar ng browser at sa mga search engine.
- Sa linya 7 sinasabi namin sa browser kung saan mahahanap ang mga elemento ng Bootstrap framework na may kaugnayan sa pag-istilo.
- Mula sa linya 10 magsisimula ang lalagyan. Kasama sa katawan ang nilalaman ng web page at ang link sa mga script ng Bootstrap na magbibigay ng interaktibidad sa aming site.
- Ang linya 13 ay nagpapahiwatig ng pagtatapos ng dokumento.
Layout ng isang Bootstrap site
Mga pangunahing konsepto para sa layout ng isang Bootstrap site
Tulad ng sinabi namin sa mga nakaraang artikulo, Kinukuha ng Bootstrap ang mobile first approach. Kapag inilapat ang diskarteng ito, gagawin ang disenyo gamit ang device na iniisip ang pinakamaliit na laki ng screen, at pagkatapos ay idaragdag ang mga layer upang iakma ito sa mga susunod na laki.
Dito dapat nating isaalang-alang ang dalawang pangunahing konsepto:
- Mga breakpoint.
- Konsultasyon sa media.
Ang mga breakpoint ay nagsasaad kung saan ang lapad ng screen ay binago ang layout., Inilalapat ng mga query sa media ang mga parameter ng istilo batay sa ilang partikular na katangian ng browser at operating system. Sa madaling salita, ang bawat breakpoint ay magkakaroon ng kaukulang istilo.
Ang Bootstrap ay may anim na paunang natukoy na mga breakpoint na maaaring baguhin ng mas advanced na mga programmer. Ang mga default na puntos ay:
- Extra Small: Walang preset na identifier at nalalapat sa mga screen na mas mababa sa 576 pixels ang lapad.
- Maliit: Kinikilala ito sa sm at ginagamit para sa mga screen mula sa 576 pixels.
- Katamtaman: Ito ay nakilala sa md at ginagamit para sa mga screen mula sa 768 pixels.
- Haba: Kinilala bilang lg ay ginagamit para sa mga screen mula sa 992 pixels.
- Napakahaba: Mayroon itong identifier lg at inilalapat ang mga istilo sa mga screen mula sa 1200 pixels.
- Extra extra long: Minarkahan ng identifier na xxl, ginagamit ito para ilapat ang disenyo sa mga screen mula sa 1400 pixels.
Ang mga sukat na ito ay hindi basta-basta pinili bilang bawat isa sa mga breakpoint ay maaaring maglaman ng mga lalagyan na ang lapad ay multiple ng 12. Hindi rin sila naka-target sa isang partikular na device, ngunit sa halip ay umaangkop sa iba't ibang kategorya ng mga device at laki ng screen.
Sa loob ng iba't ibang laki ng screen, makikita namin ang mga lalagyan. Responsable ang mga ito sa pagho-host, pagpuno at pag-align ng nilalaman ng site sa isang partikular na device o graphic window.
;