Shkarkoni dhe instaloni bootstrap nënshkruar. Ndërfaqja e përdoruesit e bazuar në bootstrap në Twitter për fillestarët

Djema, mendoj se Bootstrap është një gjë shumë e lezetshme. Pse kështu, do të përpiqem të shpjegoj në këtë artikull. Epo, le të shkojmë, kërkoj ndjesë menjëherë për faktin se pothuajse e gjithë gjysma e parë e artikullit është shkruar pa foto, ka vetëm teori, një shpjegim se si funksionon rrjeti. Por kjo është shumë e rëndësishme! Cilit prej jush i duhet, ai do ta marrë në dorë, do ta lexojë dhe, shpresoj, do ta kuptojë. Gjysma e dytë e artikullit tashmë perceptohet më e thjeshtë, ka më shumë shembuj me pamje nga ekrani.

Bootstrap - çfarë është?

Pra, le të fillojmë me një pyetje të rëndësishme. Bootstrap është një kornizë css dhe js, në fakt, në fakt, një grup skedarësh me kod të shkruar gati. Qëllimi i zhvilluesve të pothuajse çdo kornize është të thjeshtojnë zhvillimin e faqes për veten dhe të tjerët që do të kenë akses në mjet. Në rastin e Bootstrap, është plotësisht falas, kështu që mund ta përdorni në çdo mënyrë, modifikoni burimi dhe si dëshironi të ribëni kornizën për veten tuaj. Është në mënyrë perfekte.

Instalimi i Bootstrap

Nëse thjesht duhet të përfshini skedarët e kornizës në një dokument html (për praktikë, për shembull), thjesht shkarkoni kornizën nga faqja zyrtare getbootstrap.com, kopjoni skedarët e tij në projekt dhe përfshini ato që ju nevojiten. Unë do të jap një përmbledhje të shkurtër të këtyre skedarëve:

  1. bootstrap.css dhe bootstrap.min.css janë versione të pakompresuara dhe të kompresuara të kodit të kornizës css. Rekomandohet të lidheni me projektin e punës skedar i ngjeshur, kështu ju përmirësoni pak shpejtësinë e shkarkimit. Por nëse planifikoni të shikoni kodin në një skedar, përfshini versionin e pakompresuar.
  2. bootstrap.js dhe bootstrap.min.js - skedar skripti
  3. dosja e shkronjave dhe skedarët e glyphicons në të janë fonti i ikonës Bootstrap. Ai përmban rreth 200 ikona. Në shumicën e rasteve, ato do t'ju mjaftojnë, ndonjëherë ju duhet të lidhni të tjerët. Ne do të flasim më shumë për fontet e ikonave më vonë.

Ky është grupi standard i kornizës. Në fakt, mund ta personalizoni lehtësisht dhe ta ndryshoni vetë. Për shembull, mos përdorni fare skripta ose lidhni vetëm një rrjet. Në përgjithësi, ne gjithashtu do të flasim për këtë.

Dokumentacioni rus Bootstrap

Duke shkuar në getbootstrap Ju ndoshta keni vënë re se gjithçka këtu është në anglisht. Do të na duhej edhe ndihma ruse për këtë kornizë. Gjetja e saj është e lehtë. Për ta bërë këtë, shkoni nga faqja kryesore në seksion Fillimi. Lëvizni deri në fund, do të ketë një lidhje me përkthimet. Kërkoni rusisht atje dhe klikoni mbi të. Kjo është ajo, tani ju jeni në versionin rus të faqes. Vërtet, jo gjithçka është përkthyer këtu, por diku rreth 70-80% është e saktë, kështu që do të kuptoni gjithçka.

Rrjetë bootstrap

Ju pëlqen apo jo, elementi kryesor i Bootstrap është rrjeti i përgjegjshëm. Në përgjithësi, pa të, korniza do të humbiste pothuajse të gjithë vlerën e saj, sepse falë rrjetit mund të krijoni shpejt shabllone përshtatës. Në të njëjtën kohë, mund të mos jeni fare të njohur me pyetjet e medias, nuk ju nevojiten, sepse korniza merr përsipër zbatimin e përshtatshmërisë, thjesht duhet të vendosni klasat e sakta për blloqet.

Cilat janë këto klasa? Shkojmë te dokumentacioni, do të na ndihmojë shumë. Shkoni te seksioni CSS - Sistemi i Rrjetit. Rregullat e përgjithshme për të punuar me një rrjet janë të thjeshta, tani unë do t'i rendis ato.

Si të punoni me një rrjet?

Mendojeni si një tabelë html. Nëse keni shkruar ndonjëherë kod html për tabela, atëherë e dini që e gjithë përmbajtja vendoset në etiketën e tabelës, një rresht vendoset në etiketën tr dhe qelizat tashmë janë vendosur në të - td .

Pra, në rrjet gjithçka është e njëjtë. Klasa e kontejnerëve shërben si një enë gjenerike për rrjetin. Ekzistojnë 2 opsione për rrjetën e bootstrap - plotësisht gome dhe ende me një gjerësi maksimale të kufizuar. Pra, kur u pyet blloku i përbashkët të klasës së kontejnerit, siti do të ketë një gjerësi maksimale prej 1170 piksele. Nuk do të zgjerohet më tej. Natyrisht, përmbajtja do të jetë në qendër.

Nëse vendosni klasën e lëngut të kontejnerit, atëherë rrjeta do të jetë plotësisht gome, domethënë nuk do të ketë kufizime në madhësi. Për shembull, nëse një person hap një faqe interneti në një monitor të gjerë 1920 pikselësh, ai do ta shohë atë me gjerësi të plotë.

Prandaj, gjëja e parë kur zhvilloni një sit, duhet të vendosni se cili do të jetë shablloni - plotësisht gome, ose gjerësia e tij ende duhet të jetë e kufizuar.

E shkëlqyeshme, në bllokun e kontejnerit, duhet të vendosni një rresht të rrjetës. Ju duhet të vendosni të gjitha blloqet që janë në të njëjtën linjë në të. Kjo do të thotë, nëse marrim shabllonin më tipik: kokën, trupin, kolonën e djathtë dhe fundin, atëherë ka 3 kolona. E para do të ketë vetëm një kokë, e dyta do të ketë përmbajtje dhe një shirit anësor, dhe e fundit do të ketë një fund. Shënimi për një faqe të tillë do të ishte diçka si kjo:

Kapelë
Përmbajtja... dhe shiriti anësor
Fundi i faqes

Por tani për tani, kjo është shënim i pasaktë, sepse mungon ... çfarë? Kjo është e drejtë, qeliza! Në rastin e Bootstrap, ato quhen gjithashtu kolona. Rrjeti i nisjes përbëhet nga 12 kolona. Mund të futet në çdo bllok të çdo gjerësie, të paktën 1200 pikselë, të paktën 100. E gjithë kjo për shkak se gjerësia e kolonave nuk vendoset në piksel, por në përqindje.

Si funksionon ky sistem me 12 kolona?

Pra, vijmë te çështja më e rëndësishme që lidhet me kornizën. Më besoni, nëse e kuptoni këtë, gjithçka tjetër është e pakuptimtë. Gjëja kryesore është të kuptoni se si funksionon rrjeti, dhe rruga për një plan urbanistik të shpejtë përshtatës do të jetë e hapur për ju.

Për ta bërë këtë, lëvizni nëpër dokumentacionin pak më poshtë, aty do të gjeni një tabelë që përmban vetitë e rëndësishme të rrjetit.

Meqë ra fjala, vetë kolonat janë të shënuara me klasën në Bootstrap, por kjo është një klasë e përbërë, kështu që vetëm col- nuk shkruhet kurrë. Bootstrap ka 4 klasa të veçanta që janë krijuar për të kontrolluar madhësinë e blloqeve në gjerësi të ndryshme, këtu janë ato:

  1. ld - për ekrane të mëdha, më shumë se 1200 piksele të gjera (kompjuterë desktop);
  2. md - për ekrane të mesme, gjerësi nga 992 në 1199 (kompjuterë, netbook);
  3. sm - për ekrane të vogla, gjerësi nga 768 në 991 piksele (tableta);
  4. xs - ekrane ekstra të vogla, më pak se 768 px gjerësi.

Këtu janë 4 klasa, por për të kontrolluar madhësinë e elementeve, përdoren numrat nga 1 në 12, sepse, siç e mbani mend, ka saktësisht 12 kolona në rrjet.

Kapelë
përmbajtja
Kolona anësore
Fundi i faqes

Kuptimi i tij është mjaft i thjeshtë. Para së gjithash, ne krijojmë një kokë, nuk mund të vendoset fare në rrjet, pasi gjithsesi do të zërë 100% të gjerësisë (zakonisht). Por ne do ta vendosim gjithsesi. Çfarë është kjo klasë col-md-12? Siç ju thashë tashmë, askush nuk shkruan vetëm col-, me këtë klasë ne, në fakt, i themi shfletuesit:
Kjo është një qelizë | kolonë
Në pajisjet e mesme (klasa md), gjerësia e saj duhet të jetë 12 kolona nga 12, domethënë 100% e gjerësisë së rreshtit (rreshtit).
Por çfarë ndodh me gjerësinë në pajisjet e tjera? Në ekranet e mëdhenj (lg) do të jetë gjithashtu 100%, sepse vlerat për ekranet e mëdhenj trashëgohen, por jo për ato më të vogla. Është e thjeshtë: nëse shkruani col-xs-4, atëherë gjerësia e kolonës do të ishte 33% në të gjitha pajisjet, dhe nëse col-lg-4, atëherë vetëm në ato të mëdha. Këtu është një veçori, mbani mend atë.

Epo, nëse vlera e gjerësisë nuk ruhet në ekrane më të vogla, atëherë çfarë ndodh? Është hedhur poshtë. Ja si shkon:
col-sm-4 - në ekranet e vogla, blloku do të zërë 33% të gjerësisë, do të jetë i njëjtë në ekranet md dhe lg, por në xs, domethënë ato më të voglat, gjerësia do të rivendoset në 100% . Pra, mbani mend edhe 1 rregull të thjeshtë: Nëse asgjë nuk është vendosur për ekranet më të vegjël, atëherë blloku do të shfaqet në gjerësi 100% në to.

përmbajtja
Kolona anësore

Në thelb, ne po i themi shfletuesit:
Lëreni bllokun e përmbajtjes të jetë 8 nga 12 kolona të gjerë dhe kjo situatë do të jetë në të vogla, të mesme dhe ekranet e mëdha(mjafton të specifikoni për ekranet e vogla, për ekranet e mëdha, siç e mbani mend, vlera trashëgohet). Por në ekranet më të vogla, blloku do të jetë i zënë 100%. Kjo është e drejtë, zakonisht pajisje celulare Sajtet shkojnë saktësisht në 1 kolonë.
Le të jetë kolona anësore një e treta e gjerësisë së rreshtit në të gjitha të njëjtat ekrane të vogla, të mesme dhe të mëdha. Epo, në më të voglin, siç e keni kuptuar tashmë, gjerësia e saj gjithashtu rivendoset në 100%. Është kaq e thjeshtë.

Epo, nuk ka asgjë për t'u marrë me futbollin. Epo, parimet bazë Ne kemi analizuar punën e rrjetit, por ende duhet të shohim se si funksionon ...

Bootstrap Nested Grid

Fakti është se tani ne e kemi ndarë shabllonin vetëm në blloqet kryesore, por ato gjithashtu mund të kenë një ndarje në kolona brenda. Për shembull, përmbajtja mund të shfaqë produktet në kolona të shumta. Si të jesh? Shumë e thjeshtë - ne krijojmë saktësisht të njëjtin rrjet brenda. Ai do të jetë i folezuar, por gjithashtu përmban 12 kolona. Nëse i përmbledhim të gjitha këto, atëherë arrijmë në përfundimin e mëposhtëm:
Brenda çdo blloku mund të ketë një numër të pakufizuar rrjetesh. Për shembull, në një bllok me produkte, një rrjet për ndarjen e mallrave, në bllokun me vetë një produkt, mund të krijoni një rrjet tjetër, për shembull, për të ndarë çmimet, informacionin rreth disponueshmërisë dhe informacione shtesë. informacion.

Tani do të përpiqemi të bëjmë një rrjet tjetër brenda bllokut me përmbajtje në mënyrë që të renditim produktet në 3 kolona. Pra, marrim bllokun në të cilin kemi përmbajtje:

përmbajtja

Dhe ne i shkruajmë:

Katalogu:

Emri i produktit

Përshkrim i produktit

Siç mund ta shihni, ne krijuam një rrjet të ri brenda përmbajtjes - vendosëm një rresht brenda dhe tashmë do të ketë 3 blloqe me produkte në rresht. Thjesht kopjoni bllokun col-sm-4 me kartën e produktit dhe ngjisni edhe 2 herë të tjera, do të duket kështu (mund të bëni çdo foto produkti, unë bëra një të shkëlqyer):

Kam humbur një pikë tjetër të rëndësishme, në mënyrë që fotografitë të përshtaten me blloqet në të cilat ndodhen, secilës prej tyre duhet t'i jepet klasa img-responsive. Unë, nëse ju, si unë, mendoni se është e papërshtatshme ta bëni këtë, atëherë thjesht shkruani në stilin tuaj.css si kjo:

Img (gjerësia maksimale: 100%; lartësia: automatike; ekrani: bllokimi; )

Kjo është e gjitha, ruajeni këtë kod dhe përfshini skedarin tuaj css në projekt. Tani fotografitë do të përgjigjen si parazgjedhje.

Epo, a doli mjaft mirë? Po, dhe pa bootstrap, do t'ju duhet të vuani më gjatë. E vetmja gjë është që kur krijoni një rrjet brenda çdo blloku, nuk keni më nevojë të krijoni një bllok me klasën e kontejnerit në të. Pse kjo nuk është e nevojshme? Po, sepse blloku në të cilin është krijuar rrjeti shërben si kontejner.

Kështu, ju mund të krijoni sa më shumë kolona që dëshironi në çdo bllok dhe të bëni një shabllon të çdo kompleksiteti. Dhe e gjithë kjo është shumë më e shpejtë se pa Bootstrap, sepse ju duhet të shkruani të gjithë css nga e para.

Shërbimet e përgjegjshme

Ky është një tjetër veçori e shkëlqyer e bootstrap. Ai konsiston në faktin se ju mund të fshehni ose të bëni të dukshëm çdo blloqe në gjerësinë që ju nevojitet. Për shembull, fshihni plotësisht shiritin anësor në ekrane të ngushta, shtoni disa elementë të rinj në pajisjet celulare, shtoni një kolonë në ekrane të gjera, etj.

Ka shumë opsione aplikimi, por nuk ju thashë për gjënë më të rëndësishme, si t'i përdorni këto shërbime? Për ta bërë këtë, thjesht shtoni klasa në bllokun e dëshiruar. Nëse duhet ta fshehni, thjesht specifikoni klasën e mëposhtme:

Çfarë do të bëjë klasa hidden-xs në këtë rast? Ai do të fshehë fundin në pajisjet shumë të vogla. Në të gjitha të tjerat, blloku do të jetë i dukshëm.

Nëse, përkundrazi, duhet ta shfaqni atë vetëm në ekranet më të vogla, duhet të përdorni klasën e dukshme-xs-block. Në këtë rast, blloku do të fshihet në të gjitha, përveç ekraneve më të ngushta. Pra, klasat e shërbimeve adaptive janë shkruar kështu:

  1. Fjala e fshehur ose e dukshme, në varësi të asaj që ju nevojitet
  2. Një shkurtim xs, sm, md ose lg që specifikon se në cilat ekrane të fshihet ose shfaqet blloku.
  3. Për të dukshme, ju gjithashtu duhet të shtoni një nga tre vlerat: bllok - shfaqni elementin si një bllok, bllok-inline - si bllok inline, inline - inline.

Epo, disa shembuj për ta bërë të qartë:

  1. hidden-xs hidden-lg - do të fshehë elementin në ekranet më të vogla dhe më të mëdha. Siç mund ta shihni, mund të specifikoni klasa të shumta të ndara me hapësira.
  2. visual-xs-inlinevisible-md-block — elementi nuk do të shfaqet fare në ekrane të vogla dhe të mëdha. Në ekstra të vogla do të jetë me shkronja të vogla, dhe në të mesme do të jetë një bllok.
  3. visual-lg-block - elementi do të jetë i dukshëm vetëm në ekranet më të mëdha, në të gjithë të tjerët do të jetë i fshehur

Kështu funksionon e gjitha. Pikërisht kështu dhe asgjë tjetër. Unë shpresoj që ju të kuptoni. Le ta vëmë në praktikë. Ne kemi një model provë, megjithëse shumë primitiv.

Një detyrë: bëni që shiriti anësor të zhduket në ekranet e vogla dhe një produkt më shumë në ekranet më të vogla. Dhe kështu që në pajisjet xs, mallrat ishin tashmë në 2 kolona, ​​dhe jo në 3.

Mundohuni ta bëni vetë duke redaktuar vetëm kodin html. Çfarë duhet bërë? Së pari, le të merremi me kolonën, për ta fshehur atë në ekranet sm, thjesht duhet t'i shtojmë asaj klasën e fshehur-sm.

Shkëlqyeshëm, tani duhet të shtojmë klasën hidden-xs në produktin e tretë dhe ai do të zhduket në ekranet më të vogla. Epo, klasat e dy mallrave të mbetura do të jenë si më poshtë:

Kjo do të thotë, në pajisjet e mesme, blloku do të zërë 4 kolona nga 12, të cilat mund të përkthehen në 33.33% të gjerësisë, dhe në pajisjet ekstra të vogla - 50%. Dhe meqenëse një bllok produkti do të zhduket në këtë gjerësi, të dy blloqet e produktit do të përshtaten mirë në 1 rresht, si kjo:

E shkëlqyeshme! Duke e kuptuar këtë, ju tashmë mund të manipuloni blloqet në faqen e internetit pothuajse në çdo mënyrë që dëshironi. Mundohuni të krijoni detyra për veten tuaj dhe t'i zbatoni ato.

Më lëviz plotësisht

Tjetra, unë do të tregoj edhe 1 mashtrim shumë të mirë - aftësinë për të lëvizur bllokun djathtas ose majtas. Le të themi se nuk kemi 3 produkte me radhë, por 1. Dhe nuk e zë gjithë gjerësinë. Dhe detyra juaj është ta rreshtoni atë në qendër. Kjo është e lehtë për t'u bërë nëse keni parasysh se jeni duke punuar me një sistem me 12 kolona.

Le të lëmë një bllok me produktin:

Mjafton të bësh llogaritje të thjeshta për të kuptuar se sa shumë duhet të lëvizësh bllokun për ta përqendruar atë. Duhet të zhvendoset 4 kolona në të majtë në ekranet e mesme dhe të mëdha, dhe 3 kolona në ato të vogla. Kështu duket:

Klasa col-md-offset-4 thotë: në ekranet e mesme dhe të mëdha, zhvendoseni kutinë majtas me 33% të gjerësisë së kontejnerit prind (1/3 mbushja majtas, 1/3 gjerësia e kutisë, ⅓ mbushja djathtas, përqendrohuni).
Klasa col-xs-offset-6: Në ekranet shumë të vegjël dhe të vegjël, zhvendoseni majtas me 25% (mbushja majtas ¼, gjerësia e bllokut ¼, mbushja djathtas ¼).

Shpresoj se e kuptoni thelbin dhe nëse është e nevojshme, zbatoni këto klasa.

Komponentët e bootstrap dhe shembuj të përdorimit të tyre

Une ju pergezoj ju. Sapo kemi kaluar më së shumti temë e rëndësishme, lidhur me kornizën. Është rrjeti dhe puna me të ajo që është e rëndësishme. Puna me komponentë tashmë konsiston në faktin që thjesht shkoni te dokumentacioni, kopjoni kodin e komponentit të dëshiruar atje dhe, nëse është e nevojshme, ndryshoni atë për veten tuaj. Por unë ende do të jap shembuj të mëtejshëm se si të përdoren komponentët.

Noton dhe rrjedhje e shpejtë

Klasat pull-left dhe pull-right ju lejojnë të bëni shpejt çdo bllok të notojë duke e shtyrë majtas ose djathtas. Mos harroni të anuloni mbështjelljen. Ju mund të përdorni klasën clearfix për këtë.

Bootstrap: Menyja horizontale e përgjegjshme (Mobile).

Ne do t'i shtojmë komponentët e mëposhtëm drejtpërdrejt në shabllon, kështu që nëse doni të punoni me kodin, dhe jo vetëm të lexoni, ndiqni të gjitha hapat për mua.

Në fakt, në Bootstrap është shumë e lehtë të bësh jo vetëm një menu adaptive, por të ashtuquajturën celulare, e cila shembet plotësisht në ekranet e vogla dhe fshihet nën një buton. Kjo qasje mund të shihet në shumë shabllone adaptive dhe në fakt është shumë e lehtë për t'u zbatuar. Shembulli i kodit të menusë celulare është në dokumentacion, do ta marr prej andej dhe do ta ribëj pak.

Pra, gjëja e parë që do të bëj është të heq bllokun e kokës, sepse menyja jonë, në fakt, do të jetë titulli në rastin e shabllonit tim. Kodi i menusë duhet të vendoset përpara gjithë përmbajtjes së faqes, madje edhe përpara bllokimit të kontejnerit. Pse? Po, tani do të shihni vetë se rrjeti është tashmë i integruar në shiritin e navigimit. Pra, këtu është kodi:

Fakti që ka shumë kode, mos kini frikë nga kjo. Kjo është se si duket faqja tani:

Por nëse menyja juaj nuk do të zërë të gjithë gjerësinë e ekranit, ka kuptim ta përqendroni atë. Për ta bërë këtë, më pas duhet të krijoni një bllok mbështjellës shtesë për menunë, i cili duhet të vendoset pas bllokut me klasën kontejner-fluid. Mos harroni të mbyllni këtë bllok. I dhashë klasën navbar-wrap. Këtu janë stilet për të:

Kjo do të thotë, thjesht mund të kufizoni gjerësinë dhe qendrën. Ose zëvendësoni fillimisht lëngun e kontejnerit me kontejnerin.

Siç mund ta shihni, ne shtuam një logo në meny, dy artikuj të thjeshtë, një artikull drop-down dhe një formular kërkimi. Domethënë ka shumë elementë. Mund ta personalizoni lehtësisht menunë për veten tuaj duke shtuar klasat tuaja në të. Por tani për tani, qëllimi im është vetëm t'ju tregoj këtë komponent.

Kështu do të duket menyja në pajisjet me gjerësi ekrani më të vogël se 768 piksele:

Siç mund ta shihni, menyja është shembur. Hapet kur klikoni në butonin në këndin e sipërm të djathtë. Në ekran mbeti vetëm logoja.

Menyja rënëse

Në të njëjtën kohë, nga shembulli i mësipërm, mund të kuptoni se si bëhet një artikull i menusë rënëse në Bootstrap, ne do ta nxjerrim këtë kod për një vështrim më të afërt:

  • simulatorë

    • Pra, kontejneri për artikullin rënës është një artikull i rregullt i listës me klasën rënëse. Brenda saj shtrihet lidhja kryesore, duke klikuar mbi të cilën hapet një menu drop-down. Është shumë e rëndësishme t'i shkruani asaj atribut i të dhënave, të cilën e shihni në kod, asgjë nuk do të funksionojë pa të. Ju gjithashtu duhet të siguroheni që skedari bootstrap.js të përfshihet në faqet e internetit.

    Një hapësirë ​​​​me klasën e kujdesit nuk është asgjë më shumë se një shigjetë, falë së cilës mund të kuptoni se artikulli është në rënie, por poshtë menusë vetë formohet duke përdorur një listë standarde me pika. Kjo është e gjitha, gjithçka është mjaft e thjeshtë, ju mund ta përdorni këtë kod për të zbatuar artikujt rënës.

    Shtimi i Breadcrumbs me Bootstrap (Breadcrumbs)

    Në shumë dyqane mund të gjeni të ashtuquajturin bllokun e thërrimeve të bukës, i cili përmban rrugë të plotë në faqen aktuale. Duke përdorur kornizën, kjo është gjithashtu e lehtë për t'u bërë, shihni kodin:

    1. në shtëpi
    2. Katalogu
    3. Produktet

    Në fakt, mjafton të tregoni klasën e bukës në listën e numëruar dhe të futni artikujt e zakonshëm të listës në të. Nga rruga, unë do të përqendroj titujt e nivelit të dytë në shabllon (kjo duhet të shkruhet në css):

    H2 (lidhja e tekstit: në qendër;)

    Nëse doni të ndryshoni disi pamjen grimca të bukës, mjafton t'i referohemi përzgjedhësit css.breadcrumb . Për shembull, mund të hiqni ngjyrën e sfondit si kjo:

    Breadcrumb (sfondi: transparent;)

    Kjo është se si duket faqja tani:

    Tavolina bootstrap

    Si parazgjedhje, tabela do të shtrihet për të mbushur të gjithë dritaren, kështu që mbështilleni atë në një kuti me gjerësi të kufizuar për të kufizuar madhësinë. Si parazgjedhje, duket e tmerrshme, por nëse shtoni klasën e tabelës në etiketën e tabelës, gjithçka do të jetë shumë më e bukur:

    Vini re se në këtë version, qelizat kanë kufij të qartë vetëm në fund, nëse dëshironi që kufijtë të jenë në të katër anët, duhet të shtoni një klasë tjetër:

    Në parim, këto janë të gjitha mundësitë e tabelave. Unë kam shkruar tashmë një artikull të veçantë se si të bëj një tabelë përshtatëse, kështu që nuk do ta përsëris veten. E vetmja gjë është që ju mund të shtoni edhe klasa të tilla si informacion, sukses, paralajmërim dhe të tjera në rreshtat dhe qelizat e tabelës në mënyrë që t'i pikturoni ato në ngjyrën e dëshiruar.

    Sigurisht, ju lehtë mund t'i shkruani klasat tuaja në style.css dhe t'i përdorni ato.

    Rezultati

    Shpresoj se artikulli ishte i dobishëm dhe keni qenë në gjendje të kuptoni gjënë më të rëndësishme. Ju mund të bëni çdo pyetje duke përdorur komentet.

    Avantazhi i përdorimit të kornizave CSS është se projektuesi i paraqitjes nuk ka nevojë të mendojë për shumë nuanca të paraqitjes që krijuesit e kornizës kanë menduar tashmë për të. Nuanca të tilla përfshijnë përputhshmërinë e ndër-shfletuesve, mbështetjen për rezolucione të ndryshme të ekranit dhe shumë më tepër. Projektuesi i paraqitjes tregon vetëm se çfarë, si dhe kur të tregojë, pjesa tjetër bëhet nga vetë korniza. Kjo qasje mund të përshpejtojë shumë paraqitjen e faqes. Përparësitë e Bootstrap përfshijnë popullaritetin e tij. Kjo do të thotë se do të jetë më e lehtë për një kodues tjetër të ruajë kodin tuaj.

    Disavantazhi i përdorimit të kornizave është fakti se faqja do të duhet të "bartë" të gjithë stilet shtesë të kornizës, edhe nëse përdor vetëm një pjesë të vogël të tyre. Korniza është një mjet i shkëlqyeshëm për prototipin dhe krijimin e faqeve për të cilat dizajni është dytësor, siç janë faqet e administrimit. Nëse keni një dizajn shumë specifik, atëherë shtrimi i tij me ndihmën e një kornize mund të jetë më i vështirë sesa me mjetet vendase. Megjithatë, kjo është gjithashtu e mundur.

    Rreth përdorimit të Bootstrap

    Aktualisht, ka disa mënyra për të punuar me stilet e Bootstrap.
    Pa përdorur LESS
    Për fillestarët, vetë Bootstrap rekomandon qasjen e mëposhtme: duhet të shkarkoni Bootstrap-in e përpiluar nga faqja dhe ta vendosni në projektin tuaj pa ndryshuar asgjë. Pastaj ju duhet të krijoni skedarin tuaj bosh CSS dhe ta përfshini atë pas bootstrap.css.


    Pas kësaj, për të ndryshuar stilet e Bootstrap, duhet t'i anashkaloni ato në styles.css tuaj si kjo:

    A (ngjyra: #beceda; )
    Disavantazhi i dukshëm i kësaj qasjeje është se ju duhet të kërkoni manualisht stilet e dëshiruara, të cilat duhet të ndërpriten dhe nuk do të jenë gjithmonë të parëndësishme, sepse disa opsione Bootstrap aplikohen në shumë përzgjedhës në një formë të modifikuar, për shembull përmes formulave. Vegla Customize mund të ndihmojë pak këtu, do t'ju ndihmojë të përpiloni saktë ndryshimet tuaja, por vetëm një herë. Nëse në të ardhmen dëshironi të ndryshoni ndonjë parametër, do t'ju duhet të rifusni vlerat e ndryshuara për të gjitha fushat në mënyrë që të përpiloni stilet tuaja.

    Përdorimi i LESS
    Kjo metodë supozon se të gjitha variablat e Bootstrap ruhen në skedarë .less. Zhvilluesi punon me këto variabla dhe, nëse është e nevojshme, i përpilon ato manualisht ose automatikisht në skedarë CSS, dhe vetë HTML përfshin vetëm skedarë të përpiluar CSS. Është ky opsion që do të konsiderohet në artikull si më fleksibil.

    Ka shumë mënyra për të përpiluar skedarë LESS dhe Bootstrap ia lë atë në dorë zhvilluesit. Vetë Bootstrap përdor Grunt për të përpiluar, ju mund të preferoni shtojcën për produktet JetBrains, dhe ne, meqenëse artikulli ka për qëllim fillestarët, do të shikojmë drejt më shumë zgjidhje të thjeshta. Zgjidhje të tilla janë WinLess për Windows, SimpLESS për Mac ose Koala për Linux. Të gjitha këto programe bëjnë të njëjtën gjë: ata marrin një dosje me më pak skedarë si hyrje dhe dëgjojnë ndryshimet në to. Sapo të bëni ndryshime në ndonjë skedar, ai përpilohet menjëherë në skedarin e specifikuar CSS. Në këtë mënyrë ju nuk keni pse të ekzekutoni përpilimin me dorë pas çdo ndryshimi. Ju ndryshoni skedarin LESS, e ruani dhe shikoni menjëherë ndryshimet në sit në një formë të kompiluar tashmë të ngjeshur.

    Krijo një projekt

    Si hap i parë, le të krijojmë një strukturë të thjeshtë skedari për projektin tonë.

    Parapamje

    Pas krijimit të strukturës së skedarit, hapeni skedar psd në Photoshop. Është e rëndësishme të ekzaminoni me kujdes shabllonin dhe ta vlerësoni atë. Ne duhet të kuptojmë gjërat e mëposhtme:
    • Si do të priten imazhet?
    • Çfarë komponentësh do të përdoren?
    • Cilat do të jenë stilet kryesore?
    • Çfarë faqosjeje do të marrim?
    Vetëm pasi t'i përgjigjeni mendërisht këtyre pyetjeve, mund të vazhdoni me paraqitjen. Le t'i shikojmë këto pyetje me radhë.

    Imazhe të përgjithshme

    Në këtë fazë ju duhet të shkurtoni dhe ruani vetëm imazhe të përgjithshme që do të jenë në të gjitha faqet e faqes dhe nuk kanë të bëjnë me përmbajtjen. Në rastin tonë, ky do të jetë një sfond faqeje gri e lehtë, një sfond kokë, një imazh harte, dy logo dhe butona. rrjete sociale.

    Ruani imazhin e hartës:

    Le t'i ruajmë logot si kjo:

    images/logo.png
    images/footer-logo.png

    Imazhet e përsëritura të sfondit duhet të priten në një pjesë minimale të mjaftueshme për të formuar një imazh të plotë duke përsëritur vertikalisht dhe horizontalisht.

    /images/bg.png
    /images/h1-bg.png

    Është i përshtatshëm për të ruajtur ikonat e rrjeteve sociale me të njëjtën madhësi në një skedar dhe për t'i përdorur ato si sprite për ngarkim më të shpejtë. Më shumë detaje rreth ngjitjes së imazheve përshkruhen në pjesën e parë. Rezultati do të jetë dy skedarë:

    /images/social.png
    /images/social-small.png

    Komponentët

    Dallimi kryesor midis paraqitjes me Bootstrap dhe paraqitjes me mjete amtare është se Bootstrap prezanton konceptin e komponentëve. Komponentët përdoren zakonisht blloqe HTML të gatshme me stile të paracaktuara. Ndonjëherë komponentët përdorin JavaScript. Projektuesi i paraqitjes mund të përdorë si një komponent të gatshëm dhe të përcaktojë pamjen e tij për të. Për ta bërë këtë, shpesh ju vetëm duhet të ndryshoni vlerën e variablave në Bootstrap. Nëse nevojiten ndryshime më fleksibël, projektuesi i paraqitjes mund të ndryshojë gjithmonë HTML dhe CSS sipas gjykimit të tij.

    Nëse i hidhni një sy shabllonit tonë, mund të shihni se na duhen komponentët e mëposhtëm:

    1. Për paraqitjen në kolona - sistemi i rrjetit (rresht, kolonë)
    2. Për kërkim - formulari inline (formë-në linjë), kontrollet e grupuara (grupi i hyrjes), butoni (btn)
    3. Për navigimin - shiriti i navigimit (navbar) dhe vetë navigimi (nav)
    4. Për të shfaqur një nënmenu - një listë të grupuar (listë-grup)
    5. Për bllokun e hartës - panel vizual(panel)
    6. Për të shfaqur një njësi të madhe qendrore - jumbotron
    7. Për të shfaqur kornizat e fotografive - miniaturë (miniaturë)
    Ne do të ndalemi në çdo komponent më në detaje kur ta takojmë atë në paraqitje.

    Stilet bazë

    Në Bootstrap, të gjitha stilet janë vendosur tashmë si parazgjedhje, ne duhet t'i anashkalojmë ato vetëm nëse ato ndryshojnë nga dizajni ynë. Le ta bëjmë këtë në skedarin src/less/variables.css.

    Para së gjithash, ju duhet të shtoni variabla që nuk janë në cilësimet e Bootstrap në mënyrë që të mund t'i përdorni ato në të ardhmen. Tek ne, ky është vetëm një font specifik dizajni.

    @brand-font: "Oswald",sans-serif;
    Nëse dëshironi të përdorni një shabllon për faqet ruse, atëherë mund të provoni të zëvendësoni fontin Oswald me Cuprum më të afërt që mbështet cirilik.

    Tani le të zëvendësojmë cilësimet e Bootstrap me tona:

    Pasi të kemi mbaruar me variablat, le të fillojmë të stilojmë dizajnin tonë në skedarin styles.less. Së pari, le të përfshijmë vetë Bootstrap dhe variablat tanë:

    @import "bootstrap/bootstrap.less"; @import "variables.less";
    Jo të gjitha stilet e paracaktuara të Bootstrap mund të ndryshohen me variabla, le ta bëjmë atë manualisht:

    P (diferencë: 20 px 0; ) .form-kontroll (box-shadow: asnjë;) .btn (font-familje: @brand-font;)
    Këtu kemi hequr hijen nga elementët e formës, dhe tekstet në butona janë specifikuar në një font të veçantë faqeje.

    Pastaj ne përshkruajmë sfondin e faqes dhe shiritin e sipërm:

    Trupi (kufitar-lart: 5px solid #7e7e7e; sfondi-imazhi: url(../images/bg.png); )
    Më tej në tekst nuk do të tregohet se në cilin skedar janë shkruar stilet. Vetëm mos harroni se ne i ruajmë të gjitha variablat në skedarin variables.less, dhe Stilet CSS do të ruajmë në stile.më pak.

    Korniza HTML

    Ne tradicionalisht fillojmë paraqitjen e faqes me kornizën HTML. Ne futim kodin e shabllonit më të thjeshtë nga faqja Fillimi në skedarin index.html, pasi të kemi hequr të gjitha të panevojshmet:

    Sheshi i bardhë


    Ky bllok krijon një strukturë dokumenti HTML5. Në titull, ne tregojmë emrin e faqes sonë - Whitesquare. Me meta etiketën e viewport, ne specifikojmë që gjerësia e faqes në pajisjet celulare do të jetë e barabartë me gjerësinë e ekranit dhe shkalla fillestare do të jetë 100%. Më pas përfshihet skedari i stilit. Dhe për versionet Internet Explorer më pak se i nënti, ne lidhim skriptet që na lejojnë të shfaqim saktë paraqitjen tonë.

    Paraqitja

    Në këtë rast, shohim se faqja përbëhet nga dy pjesë: kontejneri kryesor me përmbajtje, i cili është i përqendruar në ekran dhe fundi i fundit. Kontejneri kryesor përbëhet nga dy kolona: përmbajtja kryesore dhe shiriti anësor. Mbi to është titulli (header), navigimi (nav) dhe titulli i faqes (.heading).

    Le të shtojmë kodin e mëposhtëm në trup:


    Këtu takojmë komponentin e parë të Bootstrap - kolonat. Elementit prind të kolonave i jepet klasa "rresht", dhe klasat e kolonave fillojnë me parashtesën "col-", e ndjekur nga madhësia e ekranit (xs, sm, md, lg) dhe mbarojnë me gjerësinë relative të kolonë.

    Një kolonë mund t'i jepet klasa të ndryshme në të njëjtën kohë me vlera për ekranet, për shembull class="col-xs-12 col-md-8". Këto klasa thjesht vendosin gjerësinë e një kolone si përqindje për një madhësi të caktuar ekrani. Nëse klasa e një ekrani të caktuar nuk është vendosur për kolonën, atëherë do të aplikohet klasa për ekranin minimal të përcaktuar, dhe nëse nuk specifikohet, atëherë nuk do të aplikohet gjerësia dhe blloku do të marrë gjerësinë maksimale të mundshme.

    Klasat tona "col-md-7" dhe "col-md-17" tregojnë se blloqet janë kolona me gjerësi 7 dhe 17 në lidhje me kontejnerin mëmë. Si parazgjedhje, shuma e gjerësisë së kolonave në Bootstrap është 12, por ne e kemi dyfishuar atë numër për të arritur fleksibilitetin që na nevojitet.

    Trupi (… .mbështjellës (mbushje: 0 0 50px 0; ) koka (mbushje: 20px 0;) )
    Ne e vendosëm këtë strukturë brenda trupit. Sintaksa LESS ju lejon të vendosni rregulla në njëra-tjetrën, të cilat më pas përpilohen në konstruksione të tilla:

    Trupi .mbështjellës(...) koka e trupit (...)
    Kjo qasje ju lejon të shihni strukturën e HTML brenda CSS dhe u jep një lloj "fushëveprimi" rregullave.

    Logo

    Ngjitni logon në etiketën e kokës:

    (!LANG: Nuk kërkohet stilim shtesë.

    Kërko

    Për të krijuar një kërkim, na duhen komponentët e mëposhtëm të Bootstrap: një formë inline, kontrolle të grupuara dhe një buton.
    Në etiketën e kokës, ne krijojmë një formë inline, të rreshtuar djathtas. Fushat e një formulari të tillë duhet të kenë klasën "form-kontroll" dhe etiketën.

    Në formular vendosim komponentin "kontrollet e grupuara". Kontrollet e grupimit ju lejojnë të hiqni dhëmbëzimin midis futjes së tekstit dhe butonit dhe, si të thuash, t'i bashkoni ato në një element të vetëm.
    Është një div me klasën "input-group" dhe fusha, dhe butoni i një komponenti të tillë vendoset në një bllok me klasën "input-group-btn".

    Meqenëse nuk kemi nevojë të shfaqim një etiketë për kutinë e kërkimit, do ta fshehim atë me klasën "vetëm sr". Kjo është e nevojshme për lexuesit e veçantë të ekranit.

    Klasa "btn-primary" i shtohet butonit, që do të thotë se ky është butoni kryesor i kësaj forme.

    …

    Gjithçka që na mbetet është të vendosim gjerësinë e formularit të kërkimit në stile.

    Trupi ( … .mbështjellësi ( … titulli ( … .forma-kërkimi ( gjerësia: 200 px; ) ) )

    Menu

    Për të shfaqur menunë, le të marrim komponentin "navigation bar" dhe të vendosim komponentin "navigation" në të, që është një listë me lidhje. Për navigim, shtohet klasa "navbar-nav", e cila aplikon stile të veçanta navigimi brenda shiritit të navigimit.


    Për ta sjellë këtë menu në dizajnin tonë, ne vendosëm vlerat e mëposhtme për variablat:

    /*lartësia e shiritit*/ @navbar-lartësia: 37px; /*vendos më shumë mbushje horizontale*/ @nav-link-padding: 10px 30px; /*sfondi për artikujt e menysë*/ @navbar-default-bg: @panel-bg; /*ngjyra e tekstit në artikujt e menysë*/ @navbar-default-link-color: #b2b2b2; /*dhe në mouse hover - njëjtë*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*sfondi i artikullit aktiv të menysë është ngjyra jonë specifike blu*/ @navbar-default-link-active-bg: @brand-primary; /*ngjyra e tekstit të artikullit aktiv të menysë*/ @navbar-default-link-active-color: #fff;
    Përveç parametrave të personalizueshëm, ne do të përshkruajmë ato shtesë në stile - ky është teksti me shkronja të mëdha dhe fonti ynë specifik:

    Trupi (… .mbështjellësi (… .navbar a (transformimi i tekstit: shkronja të mëdha; fonti: 14 px @brand-font; )) )

    Titulli i faqes

    Titulli i faqes vendoset në një div me klasën "titull".

    Rreth nesh


    Dhe ka stilet e mëposhtme:

    Trupi ( … .mbështjellës ( … .titulli (lartësia: 40px; sfondi: url transparent (../images/h1-bg.png); margjina: 30px 0; mbushje-majtas: 20px; h1 (ekrani: inline-block; ngjyra: #7e7e7e; fonti: normal 40px/40px "Oswald", sans-serif; sfondi: url(../images/bg.png); margjina: 0; mbushja: 0 10px; transformimi i tekstit: shkronja të mëdha; ) ) ) )
    Këtu vizatojmë një shirit gri si sfond në një div, dhe e lidhim atë me një h1 inline me fontin e dëshiruar dhe sfondin e ngjyrës së faqes për të dhënë përshtypjen sfond transparent për h1.

    Nënmenyja

    Kur krijojmë një nënmenu, ne nuk do të përdorim komponentin "navigacion", pasi nuk na përshtatet shumë për sa i përket stileve, komponenti "lista e grupuar" është shumë më i përshtatshëm për ne. Çdo element i një komponenti të tillë ka klasën "list-grup-artikull".

    Nënmenyja duhet të vendoset në etiketën anash. Ne krijojmë një listë lidhjesh në mënyrë të ngjashme me menunë kryesore.


    Në cilësimet e komponentëve, specifikoni që të gjitha listat e grupuara duhet të shfaqen me sfondin dhe kornizën e komponentit "panel":

    @lista-grup-bg: @panel-bg; @list-grup-border: @panel-inner-border;
    Dhe aplikoni stilet e mëposhtme në nënmenu:

    Trupi ( … .mbështjellës ( … .nënmenu ( margin-fund: 30px; li ( shfaqja: list-item; font: 300 14px @brand-font; list-style-position: brenda; list-style-type: katror; mbushje : 10 px; transformimi i tekstit: shkronja të mëdha; &.aktive (ngjyra: @brand-primary; ) a (ngjyra: @text-color; dekorimi i tekstit: asnjë; &:hover (ngjyra: @text-color;)) ) ))
    Së pari, ne i kthejmë stilet standarde në elementët e listës, pasi Bootstrap i ndërpreu ato me të tyret. Shtoni një dhëmbëzim në fund. Nënmenutë përdorin një font më të hollë dhe pika katrore. Dhe për lidhjet vendosim ngjyrat, shkronjat e mëdha dhe heqim nënvizimin. Ampersand në kodin "&.active" do të zëvendësohet nga sintaksa LESS në kohën e kompilimit me përzgjedhësin prind: ".submenu li.active".

    Përmbajtja e shiritit anësor

    Në përmbajtjen e shiritit anësor, përveç nënmenusë, gjendet edhe një imazh me vendndodhjen e zyrave.

    Për ta shfaqur atë, komponenti "panel" është i përshtatshëm për ne, ose më mirë variacioni i tij "paneli kryesor" (paneli-primar) për ngjyrosjen e titullit. Ky komponent përmban një bllok header (panel-heading) dhe një bllok të përmbajtjes së panelit (panel-body). Ne shtojmë klasën "img-responsive" në imazhin e hartës, e cila do të lejojë që imazhi të tkurret në një gjerësi të vogël të ekranit.


    Në variablat Bootstrap ne kemi vendosur tashmë ngjyrën e sfondit të panelit (panel-bg), dhe tani do të specifikojmë se paneli "primar" do të ketë një kufi të paracaktuar të panelit gri, dhe jo kufirin blu të paracaktuar:

    @panel-primary-border: @panel-inner-border;
    Tani, në stilet e faqes, duhet të ndryshoni cilësimet e parazgjedhura të panelit që nuk ndryshohen përmes variablave:

    Paneli (box-hije: asnjë; .panel-heading ( font: 14px @brand-font; tekst-transformim: shkronja të mëdha; mbushje: 10px; ) .panel-body ( mbushje: 10px; ) )
    Këtu hoqëm hijen nga panelet, vendosëm mbushjen tonë dhe vendosëm fontin tonë të titullit.

    Citim

    Le të fillojmë paraqitjen e përmbajtjes duke shtuar një citat.

    Ky element i faqes është më i ngjashëm me komponentin Jumbotron. Le ta shtojmë atë në kolonën e përmbajtjes:

    Quisque in enim velit, at dignissim est. nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat.”

    John Doe, Lorem Ipsum

    Nëpërmjet variablave për komponentin jumbotron, ne vendosim Ngjyra e bardhë teksti dhe sfondi blu i markës:

    @jumbotron-bg: @brand-primary; @jumbotron-color: #fff;
    Dhe le të përshkruajmë stilet tona:

    Trupi ( … .mbështjellës ( … .jumbotron ( rreze-kufi: 0; mbushje: 0; margjina: 0; bllok thonjëza (kufi në majtas: asnjë; p ( font: 300 italic 33 px @brand-font; tekst-transformim: shkronja të mëdha; margin-fund: 0; ) i vogël (përafrimi i tekstit: djathtas; ngjyra: #1D8EA6; fonti: 300 20px @brand-font; &:para (përmbajtja: ""; ) ) ) ) )
    Në këto, ne heqim rrumbullakimin e këndit, mbushjen e komponentëve dhe dekorimet e kuotave që Bootstrap i paracakton. Le të shtojmë edhe stilet tona të shkronjave.

    përmbajtja


    Lorem ipsum dolor sit amet…

    Donec vel nisl nibh…

    Donec vel nisl nibh…


    Hapi tjetër është të shtoni dy imazhe që janë në fund të tekstit të përmbajtjes. Kjo bëhet duke përdorur dy kolona:


    Klasa "thumbnail" i kthen imazhet në një komponent "thumbnail". Ajo do të bëjë të gjithë punën e imazheve styling për ne. E vetmja gjë që na mbetet është të vendosim ngjyrën e mbushjes dhe kufirit në variablat për këtë komponent:

    @thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

    Blloku "Ekipi ynë"


    Kur vendosni këtë bllok, së pari shtoni një titull:

    Ekipi ynë


    me stil:

    Trupi ( … .mbështjellësi ( … h2 ( sfondi: asnjë rrëshqitje nuk përsëritet 0 0 #29C5E6; ngjyra: #fff; font: 300 30 px @brand-font; mbushje: 0 10 px; transformimi i tekstit: shkronja të mëdha; )) )
    Dhe pastaj shtoni një bllok me klasën "ekip", i cili përbëhet nga dy rreshta që përmbajnë kartat e punonjësve. Çdo kartë është një kolonë. Karta ka një gjerësi të barabartë me katër kolona të rrjetit tonë. Të gjitha kartat përveç të parës në rresht kanë një dhëmbëzim në të majtë, e cila krijohet nga klasa "col-md-offset-1". Përmbajtja e kartës përbëhet nga një imazh dhe një përshkrim (.caption)

    John Doe

    Saundra Pittsley

    lideri i ekipit

    …

    Erica Nobriga

    drejtor arti

    Cody Rousselle

    projektuesi i lartë i UI

    …

    Pas krijimit të shënimit, ne do të vendosim stilet e mëposhtme për këta elementë:

    Trupi ( … .mbështjellës ( … .ekipi ( .rresht (diferencë-lartë: 20px; .col (hapësirë ​​e bardhë: nowrap; .miniaturë (diferencë-fund: 5px;)) .col-md-offset-1 (diferencë- majtas: 3,7%; ) .titra ( h3 ( font: 300 16 px @brand-font; margjina: 0; ) p ( font: 300 14 px @brand-font; ngjyra: @brand-primary; margjina: 0; ) ) ) ) ))
    Përveç indenteve dhe stileve të shkronjave që janë vendosur këtu, ne kemi ndryshuar klasën "col-md-offset-1". Ai duhej të vendoste dhëmbëzimin në 3.7%. dhëmbëzimi standard ishte shumë i madh.

    Fundi i faqes

    Fundi përbëhet nga katër blloqe të mëdha: një furnizim në Twitter, një hartë e faqes, lidhje sociale dhe një logo e të drejtës së autorit.

    Së pari, le të krijojmë një kontejnerë fundor me këto blloqe:


    Dhe aplikoni dizajnin në të:

    Footeri ( sfondi: #7e7e7e; ngjyra: #dbdbdb; madhësia e shkronjave: 11 px; .container (lartësia: 110 px; mbushja: 10 px 0; ) )
    Etiketa e footer-it përcakton një zonë gri në të gjithë gjerësinë e ekranit dhe kontejneri brenda tij shfaq zonën e përqendruar në ekrane të mëdha dhe cakton lartësinë dhe mbushjen e futbollit. Ne përdorim kolona për të rreshtuar blloqet në fund të faqes.

    Furnizimi në Twitter

    Lloji i përmbajtjes së furnizimit në Twitter:


    Stilet:

    Trupi ( … fundi i faqes ( … .kontejneri ( … h3 ( kufiri-fund: 1px solid #919191; ngjyra: #ffffff; madhësia e shkronjave: 14 px; lartësia e rreshtit: 21 px; font-familja: @brand-font; margjina: 0 0 10px; transformimi i tekstit: shkronja të mëdha; ) p ( margjina: 5 px 0; ) .twitter ( p ( mbushje-djathtas: 15 px; ) koha a ( ngjyra: #b4aeae; dekorimi i tekstit: nënvizoni; ) ) ) )
    Për të gjitha titujt e fundeve, vendosni fontet dhe dhëmbëzimet, si dhe nënvizoni përmes kornizës së poshtme. Ndarja për paragrafët. Për lidhjen që shfaq datën, vendosni ngjyrën dhe nënvizoni.

    harta e faqes

    Harta e faqes përbëhet nga dy kolona të barabarta me lidhje:

    Harta e faqes

    Shtëpi Rreth Shërbimet
    Partnerët Mbështetje kontakt

    Lidhjet vendosin ngjyrën, fontin dhe dhëmbëzimin ndërmjet tyre.

    Trupi ( … fundi i faqes (… .kontejneri ( … a ( ngjyra: #dbdbdb; ) . harta e faqes a ( shfaqja: bllok; madhësia e shkronjave: 12 px; margjina e poshtme: 5 px; )) )

    Lidhje sociale

    Ne futim një grup lidhjesh në një bllok me klasën "sociale".


    Dhe stilojini ato:

    Trupi ( … fundi i faqes ( … .kontejneri ( … .social ( .social-icon ( gjerësia: 30px; lartësia: 30px; sfondi: url(../images/social.png) pa përsëritje; shfaqja: blloku në linjë; margjina -djathtas: 10px; ) .social-icon-small ( gjerësia: 16px; lartësia: 16px; sfondi: url(../images/social-small.png) pa përsëritje; ekrani: inline-block; margjina: 5px 6px 0 0. ; ) .youtube ( pozicioni i sfondit: -16 px 0; ) .flickr ( pozicioni në sfond: -32 px 0; ) .instagram ( pozicioni në sfond: -48 px 0; ) .rss ( pozicioni i sfondit: -64 px 0; ) )))))
    Këtu kemi përdorur teknikën sprite - kur një skedar imazhi përdoret për fotografi të ndryshme. Të gjitha lidhjet ndahen në ikona të mëdha (.social-icon) dhe të vogla (.social-icon-small). Ne vendosëm që këto klasa të shfaqen si një bllok inline me madhësi fikse dhe të njëjtin sfond. Dhe më pas me ndihmën e CSS ne e zhvendosëm këtë sfond në mënyrë që imazhi përkatës të shfaqet në secilën lidhje.

    E drejta e autorit

    Një bllok me një të drejtë autori dhe një logo është një foto me një lidhje dhe një paragraf me tekst nën të.


    Stilet janë bërë në mënyrë të ngjashme me blloqet e mëparshme, me ndryshimin e vetëm që blloku është gozhduar në skajin e djathtë dhe shtrirja brenda tij është gjithashtu në skajin e djathtë:

    Trupi ( … .footer ( … .container ( … .footer-logo (float: djathtas; margin-lart: 20px; madhësia e shkronjave: 10px; rreshtimi i tekstit: djathtas; a (dekorimi i tekstit: nënvizoni; ) ) ) )

    Kjo plotëson paraqitjen. Projekti i përfunduar mund të shkarkohet

    24 shkurt 2012 në orën 09:25

    Ndërfaqja e përdoruesit e bazuar në bootstrap në Twitter për fillestarët

    • Ueb dizajn

    shënim

    Në këtë artikull, do të përpiqem të flas se si, bazuar në Twitter Bootstrap, mund të zbatoni shumë lehtë një ndërfaqe të këndshme përdoruesi për një aplikacion të vogël ueb (me një faqe), duke pasur vetëm njohuri bazë të html. Unë ju paralajmëroj menjëherë se specialistët nuk do të jenë të interesuar, ne do të flasim për funksionalitetin standard bazë.

    hyrëse

    Në kohën time të lirë, si hobi, zhvilloj një grumbullues një faqeje të titujve interesantë të burimeve të lajmeve. Në një moment, funksionaliteti bazë i prototipit doli të ishte gati, e vetmja gjë që mungonte ishte një shenjë përballë detyrës "Dizajn".

    Formulimi i problemit

    Merrni një ndërfaqe të bukur të përdoruesit pa pasur nevojë të zotëroni magjinë e një projektuesi (ekziston vetëm njohuri bazë për paint) dhe një programuesi (ekziston vetëm njohuri bazë për html dhe css).
    Faqja përbëhet nga elementët e mëposhtëm
    • Emri
    • Formulari i lidhjes së buletinit
    • Formulari për dërgimin e një kodi unik lexuesi me e-mail
    • Formulari për futjen e një kodi unik lexues
    • Lista e lajmeve të grupuara sipas datës (data, ora, lidhja e titullit, numri i klikimeve, lajmet mund të lexohen ose të reja)
    • Lidhje me rss
    • Lidhja me shtesën e kromit
    • ID e lëshimit
    • email feedback

    Procesi

    Pas disa ditësh kërkimi të qetë për një shabllon të gatshëm (shabllon css), arrita në përfundimin se kjo nuk është mënyra e një Jedi të vërtetë, sepse. gjithçka që kaloi përmes filtrit estetik u mbërthye në filtrin teknik (shiko deklaratën e problemit, thjesht nuk mund ta përshtatja kodin kompleks me nevojat e mia). Dhe kështu, thuajse rastësisht, përfundova në parajsë. Unë nuk do ta përshkruaj Bootstrap në detaje, ju mund t'i shihni detajet duke klikuar në lidhje, unë do të listoj elementët kryesorë për të cilët ka stile të gatshme (ndonjëherë disa):
    1. Elementet standarde të formatimit html
    2. Listat
    3. Copë kodi
    4. tabelat
    5. Format
    6. Butonat
    7. Elementet e navigimit
    8. Faqezim
    9. Miniatura
    10. Mesazhet informative
    11. Shiritat e progresit
    Sipas mendimit tim, kjo është shumë e lezetshme. Gjithçka që ju nevojitet për të hartuar një prototip. Më pas, do t'ju tregoj se si kam përdorur elementët 1,4,5 dhe 7 nga lista.

    Pra, hapi 1. Lidhni Bootstrap

    Shkarkoni dhe shpaketoni arkivin me Bootstrap në dosjen rrënjë të faqes sonë, përfshini css:
    ... ...
    Rreshti i dytë nevojitet për të përshtatur automatikisht ndërfaqen me pajisjet e mbështetura nga Bootstrap

    Hapi 2. Ne bëjmë "mishin".

    Me "mish" nënkuptoj një listë lajmesh. nga më së shumti në një mënyrë të thjeshtë kjo mund të bëhet me një tabelë me kufij të çaktivizuar. Kolona e parë është data (vetëm një herë për grup), kolona e dytë është koha, e treta është titulli dhe numri i goditjeve. E gjithë kjo, sipas rregullave të Bootstrap, duhet të paketohet në një enë:
    (Data) (Koha) (Titulli) ((Numri i goditjeve))



    Për lajmet e lexuara, specifikoni një klasë të veçantë:
    (titulli)

    Hapi 3. Formulari për dërgimin e një lidhjeje për lajmin.

    Këtu përsëri, gjithçka është e thjeshtë, Bootstrap ofron disa stilet e para-bëra formularët: një formë e rregullt, një formë me një rresht, një formular kërkimi ... Ne kemi nevojë për një të dytë, e përfundojmë në enën tonë përpara tabelës:
    ...

    class = "span10"- Bootstrap përfshin ndërtimin e një ndërfaqeje të bazuar në një rrjet prej 12 kolonash, elementët tanë mund të rreshtohen me të. Nëpërmjet provave dhe gabimeve shkencore, dola me një gjerësi të fushës hyrëse prej 10.

    Hapi 4,5,6. Kapelë.

    Idetë e mia se si duhet të duket një faqe miqësore për përdoruesit sugjerojnë një stil minimalist: gjithçka që nuk nevojitet është e fshehur, gjithçka që nuk mund të fshihej është e zbehtë. Ne i fshehim formularët në menunë rënëse, krijojmë lidhje me rss dhe zgjerimin e kromit të zbehtë. Ne e paketojmë të gjithë këtë në një kokë, të cilën e ngjitim në krye të faqes (klasa = "navbar navbar-fiks-top»):
    ***
    • rss
    • zgjerimi i kromit
    • Kodi juaj unik i lexuesit (Kodi)
      • Dërgo me e-mail
      • Fut një kod tjetër
    ...


    Vetë format:
    ...

    Një pikë e rëndësishme. Për ta bërë atë të funksionojë, duhet të lidhni disa skripta:
    ...

    Hapi 7. Fundi.

    Shtimi i kontejnerit kryesor:
    ...

    lëshimi 2012/02/19 23:49 *****

    Rezultati

    Epilogu

    Twitter Bootstrap bëri të mundur, pa shumë përpjekje dhe njohuri, pa shkruar një rresht të vetëm css dhe pa thyer shumë kodin html, të merrte një prototip shumë të bukur ndërfaqe që njerëzit nuk kanë turp ta shfaqin. Nëse jeni të interesuar, në artikullin vijues do t'ju tregoj se si, pa njohuri të thella të PHP + MySQL (duke pasur vetëm aftësi bazë programuese), të zbatoni funksionalitetin që ju lejon të tregoni idenë tuaj miliona dollarëshe jo vetëm në letër, por në forma e një prototipi pune.
    Faleminderit per vemendjen!
    UPD: Nuk dua të heq temën në "Unë jam PR", hoqi të gjitha lidhjet e panevojshme

    Përshëndetje! Në këtë artikull do t'ju tregoj se si të instaloni dhe lidhni kornizën Bootstrap. Ju mund të lexoni se çfarë është Bootstrap.

    Instalimi standard i kornizës

    Unë kam thënë tashmë shumë për instalimin standard në artikujt e kaluar. Gjithçka është e thjeshtë këtu. Shkojmë në faqen zyrtare të internetit getbootstrap.com, klikoni në artikullin Fillimi dhe zgjidhni opsionin e parë. Kështu, ne shkarkojmë versionin e plotë të bootstrap me të gjithë komponentët js dhe css.

    Bootstrap CDN- kjo është aftësia për të lidhur kornizën nga ruajtja CDN pa shkarkuar skedarët e saj në kompjuterin tuaj. Natyrisht, në këtë rast nuk mund të flitet për ndonjë personalizim.

    Përshtatja e kornizës

    Por fakti është se bootstrap-i i paracaktuar përmban shumë komponentë, dhe disa prej tyre thjesht mund të mos jenë të dobishëm për ju kur zhvilloni një faqe të veçantë. Për shembull, po ndërtoni një dyqan online. Ndoshta nuk keni nevojë për modale dhe këshilla veglash, dhe nuk keni nevojë për shumë nga komponentët css. Në këtë rast, do të ishte e mençur të mos përfshiheshin këto përbërës në kornizë.

    Ose po krijoni një blog të thjeshtë. Le të themi se nuk keni nevojë fare për asgjë, kështu që mund të lini vetëm rrjetën dhe disa nga komponentët më të rëndësishëm.

    Zgjedhja e vetëm asaj që ju nevojitet është një qasje profesionale për ndërtimin e faqeve të internetit dhe përdorimin e Bootstrap. Si parazgjedhje, versioni i pakompresuar i stileve css të kornizës në Versioni i fundit peshon 143 kilobajt. Dhe skriptet janë mbi 60 kilobajt. Po, nëse kompresoni kodin, mund të arrini një ulje të peshës prej 20-40%, por gjithsesi skedarët nuk do të jenë më të lehtat.

    Nëse, për shembull, çaktivizoni të gjithë përbërësit dhe lini vetëm rrjetin (kjo bëhet shumë shpesh), atëherë pesha e css do të jetë vetëm 15-20 kilobajt, dhe në formë të ngjeshur do të jetë disa kilobajt më pak. Në këtë mënyrë ju do të arrini shpejtësinë maksimale dhe optimizimin e projektit tuaj.

    Mirë, kjo ishte vetëm një teori. Për të personalizuar kornizën, vizitoni të njëjtën faqe zyrtare dhe shkoni te Personalizoje.

    Zgjedhja e komponentëve të kërkuar

    Para së gjithash, këtu mund të konfiguroni se cilët komponentë dëshironi të përfshini në versionin tuaj. Bootstrap. Le të fillojmë me CSS:

    Stilet e medias së printuar– pyetje mediatike për printim. Nëse nuk planifikoni të printoni faqet e sajtit, mund ta çaktivizoni.

    Tipografia, kodi, tabelat, format dhe butonat janë gjithçka që mund t'i stiloni vetë në css nëse vërtet dëshironi. Sigurisht, kjo do të marrë kohë, por nëse dizajni i elementeve tuaj është shumë i ndryshëm nga ajo që ofron korniza si parazgjedhje, mund t'i fikni të gjitha këto stile css dhe t'i shkruani ato vetë.

    Sistemi i Rrjetit Në fakt, është një rrjet. Nuk shoh asnjë arsye për ta çaktivizuar ndonjëherë, sepse kjo është fuqia kryesore e kornizës. Falë rrjetit mund t'i përshtatni lehtësisht shabllonet në çdo pajisje, dhe sot, në epokën e trafikut celular, kjo është jashtëzakonisht e rëndësishme. Në asnjë rrethanë nuk do ta fikim atë.

    Shërbimet e përgjegjshme- Shërbimet adaptive, unë gjithashtu rekomandoj që të mos i fikni kurrë. Ne do të flasim për shërbimet adaptive në artikullin tjetër, ku thjesht do të hedhim një vështrim më të afërt të sistemit të rrjetit. Këto janë klasa që ju lejojnë të fshehni një element ose ta bëni atë të dukshëm në një gjerësi të caktuar ekrani. Shumë i përshtatshëm dhe i dobishëm.

    Këto janë, për shembull, gjëra të tilla si grupet e listave, shiritat e butonave, ikona, panele, sinjalizime, faqezim, therrime buke etj. Ju gjithashtu mund të çaktivizoni fontin e ikonës. Kjo duhet të bëhet në rastin kur nuk keni nevojë fare për ikona në sit, ose lidhni një grup tjetër. Në fakt, ju duhet të uleni dhe të mendoni se çfarë ju nevojitet nga të gjithë komponentët e paraqitur dhe çfarë jo. Çdo faqe individuale do të ketë grupin e vet, sepse kudo ka një dizajn dhe funksionalitet të ndryshëm.

    Komponentët Javascript

    Këto janë menutë me zbritje, këshilla veglash, modale, rrëshqitës. Nëse nuk keni nevojë për ndonjë nga këto, çaktivizoni atë. Në disa raste, të gjithë komponentët mund të jenë vërtet të dobishëm kur keni një meny rënëse në faqen tuaj dhe një rrëshqitës në faqja kryesore, dhe dritare modale. Në disa raste, vetëm 1-2 komponentë mund të jenë të dobishëm, atëherë nuk ka nevojë të zgjasni kodin, çaktivizoni përbërësit e panevojshëm.

    shtojcat jquery

    Këtu mund të çaktivizoni shtojcat e bibliotekës jquery që ndihmojnë komponentët e javascript të funksionojnë siç duhet. Prandaj, nëse nuk përdorni një rrëshqitës në faqen tuaj, atëherë nuk keni nevojë për një shtojcë për krijimin e karuselit, nëse nuk keni nevojë për këshilla të veglave, atëherë çaktivizoni tooltips.js, etj.

    Shtojca scrollspy monitoron pozicionin e tekstit dhe, në varësi të kësaj, nënvizon një ose një artikull tjetër të menusë. Në mënyrë tipike, një veçori e tillë nevojitet në faqet e uljes, unë praktikisht nuk e pashë atë në faqet e rregullta. Epo, e kështu me radhë. Mendoni me kujdes se çfarë keni nevojë dhe çfarë jo.

    Më pak variabla

    Më pas, një artikull i madh do të hapet para jush, në të cilin do të ketë shumë nën-artikuj me cilësime për më pak variabla. Këtu mund të ndryshoni pothuajse gjithçka: ngjyrat, madhësitë e shkronjave, pikat e ndërprerjes, numrin e kolonave në rrjet, mbushjen, etj.

    Sigurisht, për ta bërë këtë, duhet të dini të paktën bazat e Less, ose të paktën të lundroni në mënyrë intuitive në këto forma.

    Për shembull, nëse shihni variablin @font-family-base, atëherë duhet të kuptoni të paktën në një nivel intuitiv se ai është përgjegjës për emrin e fontit që është fonti bazë në sajt. Epo, ndryshorja @font-size-base vendos madhësinë bazë të shkronjave. Si parazgjedhje në bootstrap është 14 piksele.

    Ju mund t'i modifikoni të gjitha këto fusha. Thjesht ndryshoni 14 në 20 dhe tani mund të shkarkoni një kornizë që ka një madhësi të paracaktuar të shkronjave prej 20 pikselësh. Prandaj, mund të rregulloni menjëherë madhësinë e titujve, etj.

    Konfigurimi i rrjetit

    Cilësimet e sistemit të rrjetit janë gjithashtu shumë interesante për ne, këtu janë ato:

    Siç mund ta shihni, mund të ndryshoni numrin e kolonave dhe gjerësinë e dhëmbëzimeve ndërmjet tyre në disa sekonda. E ndryshueshme rrjet-noton-pikë ndërprerjeje cakton pikën në të cilën menyja celulare shembet në një ikonë.

    Nëse ndryshoni vlerën, për shembull, në @screen-md-min, atëherë në një gjerësi prej 991 piksele ose më pak, do të ndodhë palosja. Ju gjithashtu mund ta hiqni këtë variabël dhe të shkruani vlerën në pixel. Për shembull, 520 piksele. Pastaj palosja e menysë do të ndodhë vetëm në telefonat inteligjentë dhe celularë.

    Në fakt, faqja e personalizimit të Bootstrap ka shumë cilësime, por në përgjithësi, kjo mënyrë e personalizimit (duke përdorur faqen Customize në faqen zyrtare të internetit) nuk është më e shpejta dhe më e përshtatshme. Më pas, unë do t'ju tregoj mënyrën më të shpejtë.

    Përdorni faqen Personalizo kur duhet të bëni 2-10 modifikime në kornizë, ose thjesht çaktivizoni komponentët e nevojshëm. Nëse do të ndryshoni shumë më tepër vlera, do t'ju duhet të përdorni një metodë tjetër.

    Në fakt, kur konfiguroni versionin tuaj të kornizës, klikoni në butonin e madh në fund të faqes. Ai do të përpilojë versionin Bootstrap për ju dhe do ta shkarkojë atë në kompjuterin tuaj. Atëherë ju vetëm duhet të lidheni dhe të përdorni. Unë kam folur tashmë për lidhjen në artikujt e mëparshëm (përfshirë mënyrën se si ta bëjmë atë në WordPress).

    Shkarkimi i më pak burimeve dhe redaktimi i tyre

    Siç thashë, nëse ju duhet të bëni shumë modifikime në kodin burimor të kornizës dhe dëshironi të shihni ndryshimet në çast, atëherë do t'ju duhen më pak burime. Mund t'i shkarkoni në të njëjtin vend si versioni i plotë i kornizës - në seksionin Fillimi.

    Për të punuar me më pak burime dhe për t'i modifikuar ato, ju nevojiten:

    Të paktën disa njohuri për css dhe më pak ose një tjetër paraprocesor

    Më pak përpilues (mund të shkarkohet falas)

    Në fakt, nuk do të ndalem në personalizimin përmes më pak burimeve, por kjo është më e shumta metoda më e mirë, sepse nuk do t'ju duhet të vizitoni faqen Personalizo 100 herë dhe të përpiloni gjithnjë e më shumë versione të kornizës.

    Tematika e bootstrap ose ndryshimi i pamjes së elementeve

    Si parazgjedhje në versioni i plotë kornizë në dosjen css, gjithashtu mund të gjeni skedarin bootstrap-theme.css. Nuk është e nevojshme të lidheni me sitin. Çfarë funksionesh kryen? Skedari nevojitet vetëm për të ndryshuar, nëse është e nevojshme, stilet për elementët që ju nevojiten.

    Të njëjtin rol mund ta luajë stili juaj.css, në të cilin mund të anashkaloni edhe stilet. Bootstrap-theme nuk është një skedar i kërkuar, ai përdoret më shumë për porosi. Për shembull, ju keni 3 skedarë:

    bootstrap.css- sigurisht, ky është kodi i vetë kornizës;

    bootstrap-theme.css- këtu ju anashkaloni stilet për elementët e bootstrap;

    stil.css- dhe në këtë skedar shkruani stilet për elementët tuaj.

    Më pas do të keni renditje në kod dhe në strukturën e projektit. Por askush nuk ju ndalon të kryeni të gjitha operacionet në një skedar të vetëm - stil.css dhe mos përdorni fare një skedar teme.

    Gjëja më e rëndësishme është të përfshini skedarin e temës dhe css-në tuaj në shënimin html më vonë se skedari i kodit të kornizës, në mënyrë që stilet të anashkalohen me sukses.

    Shembull i temizimit

    Siç thashë, si parazgjedhje Bootstrap bashkon skedarin bootstrap-theme. Mundohuni ta lidhni atë. Unë vërej, lidhuni pas skedarit kryesor.

    Si parazgjedhje, butonat në bootstrap duken kështu:

    Dhe kështu ndryshon pamja e tyre pas lidhjes së skedarit me temën:

    Siç mund ta shihni, shfaqet një gradient i lehtë. Prandaj, mund ta rishkruani kodin në skedar bootstrap-theme dhe merrni stilet tuaja për butona. Por ju mund të pyesni veten pse të mos i bëni këto ndryshime direkt në bootstrap.css? Epo, fakti është se versionet e reja të kornizës lëshohen vazhdimisht dhe nëse vendosni të përmirësoni, modifikimet tuaja do të jenë të vështira për t'u zbatuar në version i ri. Është një formë e mirë që një zhvillues të mos prekë kodin burimor kur është e mundur të krijohet skedar të veçantë dhe përshkruani ndryshimet atje. Është shumë më i zgjuar dhe më i përshtatshëm.

    Si të instaloni tema të reja Bootstrap të shkarkuar nga interneti?

    Ka mjaft site, kryesisht të huaja, ku mund të shkarkoni falas një sërë temash dhe shabllonesh. Për të shmangur konfuzionin, le të konsiderojmë një sajt të krijuar me Bootstrap si shabllon dhe një temë si një grup rregullash css që anashkalojnë pamjen standarde të elementeve.

    Tema të tilla mund të shkarkohen, për shembull, në bootswatch.com/, dhe duke përdorur motorin e kërkimit mund të gjeni dhjetëra të tjerë.

    Parimi i përgjithshëm i instalimit të temave të tilla varet nga faqja në të cilën i shkarkoni. Nëse mund ta shkarkoni në format bootstrap-theme- shkëlqyeshëm, shkarkoni dhe lidheni. Në bootswatch, për shembull, duhet të shkarkoni bootstrap.css dhe të zëvendësoni fletën e stilit të kornizës standarde me të. Ekziston edhe një variant me më pak burime.

    » u njohëm me kornizën, analizuam avantazhet e tij, rishikuam shkurtimisht të ashtuquajturin rrjetë të tij, tani është koha të praktikojmë se si të përdorim Bootstrap.

    Ju mund të shkarkoni Bootstrap nga faqja zyrtare getbootstrap.com. Në faqen kryesore, klikoni në butonin Shkarkoni Bootstrap».

    Pasi klikojmë, ne transferohemi në një faqe që ofron disa lloje shkarkimesh. Në këtë artikull, ne do të shqyrtojmë shkarkimin e zakonshëm të versionit të plotë të kornizës.

    Pas shkarkimit dhe shpaketimit të arkivit, marrim tre dosje:

    • css- dosja e stileve
    • JS- dosje me skriptet js
    • FONTET- dosje me fontet e ikonave

    Ky është i gjithë korniza. Për punë të mëtejshme me Bootstrap, do të krijoj një dosje me të njëjtin emër bootstrap, në dosje do të krijoj një skedar bosh index.html dhe do të plotësoj dosjen dhe skedarin së bashku me analizën e kornizës në këtë artikull, dhe në fund të postimin do te jap nje link qe te shikoni rezultatin. Nëse e përsëritni pas meje, do të kuptoni se puna me kornizën është vërtet e lehtë.

    Nga korniza e shkarkuar, na nevojitet e gjithë dosja e shkronjave, një skedar stili nga dosja css i quajtur bootstrap.css ose bootstrap.min.css dhe në mënyrë të ngjashme një skript nga dosja js i quajtur bootstrap.js ose bootstrap.min.js.

    Dallimi midis skedarëve me ".min." nga ato të zakonshmet në ato skedarë me ".min." i optimizuar, domethënë, kodi është shkruar në një rresht pa ndërprerje dhe hapësira, kështu që ato peshojnë më pak se zakonisht, dhe përmbajtja e skedarëve është saktësisht e njëjtë.

    Tani do të krijoj një dosje css në dosjen time bootstrap, do të vendos skedarin bootstrap.min.css në të dhe do të krijoj një dosje js në të cilën do të vendos bootstrap.min.js. Për më tepër, në dosjen css, unë do të krijoj një skedar bosh style.css për momentin për të shtuar stilet e mia.

    Skedarët e nevojshëm të kornizës janë zhvendosur dhe tani do të punojmë vetëm me skedarin index.html. Për të mos shkruar vetë kodin, le t'i drejtohemi dokumentacionit, në faqen e shkarkimit të faqes zyrtare më poshtë ekziston një skelet i gatshëm HTML i dokumentit, kopjoni atë dhe ngjisni në skedarin tonë të indeksit.

    Skedari ynë i stilit, skripti js dhe biblioteka jQuery janë përfshirë tashmë në skelet, por nëse nuk e bëni në " bootstrap» shabllon, por në disa nga tuajat, ju duhet midis etiketave lidhni skedarin e stilit bootstrap.min.css, dhe pas tij stilin e krijuar.css.

    Pastaj përpara etiketës mbyllëse Së pari ne përfshijmë bibliotekën jQuery.

    Dhe pas bibliotekës, ne lidhim skriptin js.

    Në përgjithësi, skeleti HTML i dokumentit rezulton i tillë.

    Bootstrap

    Procesi përgatitor ka mbaruar, Bootstrap është lidhur, mund të vazhdoni dhe të filloni të mbushni faqen tonë WEB me komponentë kornizë.

    Si të përdorni dokumentacionin

    Dokumentacioni i kornizës është shumë i mirë, gjë që e bën të lehtë përdorimin. Ka disa seksione në menunë kryesore të faqes zyrtare të internetit: Duke filluar», « css», « Komponentët», « JavaScript"dhe" Personalizoje”, në faqen e secilit seksion në kolonën e djathtë janë emrat e komponentëve të ndryshëm, duke klikuar mbi të cilët shfaqen përshkrimi dhe rastet e përdorimit të tyre në formën e kodit të gatshëm.

    Nëse vështirësitë me gjuhe angleze, pastaj ka disa burime me dokumentacion të përkthyer në rrjet, këtu është adresa e një prej këtyre faqeve www.oneskyapp.com/ru/docs/bootstrap. Ju gjithashtu mund të përdorni ndonjë përkthyes për shfletuesin, përkthimi, natyrisht, do të jetë i shtrembër, por thelbi i asaj që shkruhet do të jetë i qartë. Në përgjithësi, ju vetëm duhet të lexoni dokumentacionin, të merrni mostra të kodit dhe të praktikoni.

    Duke punuar me Bootstrap Grid

    Siç thashë në artikullin e fundit, rrjeti funksionon si një tabelë, duke përfshirë rreshtat .rresht dhe kolonat .kol, mund të ketë maksimumi dymbëdhjetë kolona. Prefikset (lg, md, sm, xs) i shtohen klasës .col për të treguar gjerësinë kolona e dhënë në një rezolucion specifik të ekranit.

    Mbështillni rreshtat me kolona në një bllok me një klasë .enë ose klasa .konteiner-lëng. Dallimi midis tyre është se klasa .container ka një gjerësi maksimale prej 1170 pikselësh, ndërsa klasa .container-fluid ka një gjerësi të pakufizuar, domethënë të gjithë gjerësinë e ekranit, edhe nëse rezolucioni i ekranit është shumë i madh. Informacion i plotë në lidhje me rrjetin Bootstrap, shihni seksionin e dokumentacionit " css».

    Duke përdorur rrjetën e kornizës, ne do të bëjmë paraqitjen klasike të faqes sonë (header, përmbajtje, kolonë anësore dhe fund), për këtë ne do të krijojmë tre rreshta dhe katër kolona, ​​marrim këtë kod.

    HEADER

    PËRMBAJTJA

    SHIRTI ANËSOR

    FOOTER

    Për të ndarë blloqet, shkrova dy klasa shtesë: .block , .block2 dhe shtova disa rregulla në to në skedarin e krijuar style.css.

    Blloku (sfondi: #eee; kufiri: 1px solid #000; ) .block2 (sfondi: #ccc; kufiri: 1px solid #000; )

    Le të shtojmë një font ikonash në titujt tanë. në kapitullin " Komponentët» zgjidhni ikonat që ju pëlqejnë, kopjoni tekstin nën imazh, ky tekst është një klasë. Krijo një etiketë brenda etiketës së titullit dhe ngjitni klasën e kopjuar.

    HEADER

    Tani nuk ishte e dëmshme të shtoni një lloj menuje. Për ta bërë këtë, në seksionin Komponentët» shko te « Navbar”, zgjidhni menunë që ju pëlqen, kopjoni kodin dhe pas etiketës hapëse , fut.

    Mbetet për të mbushur përmbajtjen t" dhe " shirit anësor". Ne bëjmë gjithçka sipas të njëjtës skemë: zgjidhni një komponent në dokumentacion, lexoni përshkrimin, kopjoni dhe ngjisni atë në vendin e duhur. Do të shtoj një formular dhe një buton, duke klikuar mbi të cilin do të hapet një dritare modale me një tabelë.

    Ashtu, në vetëm 5 minuta, ne skicuam paraqitjen më të thjeshtë të faqes, përshtatëse për të gjitha pajisjet, dhe praktikisht nuk e shkruajmë vetë kodin. Ndiqni lidhjen dhe shikoni rezultatin.

    Mbi këtë do ta mbyll artikullin. Ne kemi shqyrtuar vetëm një pjesë të vogël të funksionalitetit të kornizës, por mendoj se e kuptoni se si të punoni me Bootstrap. Hapi tjetër është të ndryshoni stilet e kornizës për t'iu përshtatur nevojave tuaja dhe të shkarkoni vetëm ato përbërës që ju nevojiten. Ne do t'i analizojmë të gjitha këto në artikull "



    Po ngarkohet...
    Top