Bootstrap 4 me trajnimin e redaktorit. Klasat e rendit të elementeve

Një artikull në të cilin do të analizojmë rrjetin Bootstrap 4, i cili përdoret për të krijuar paraqitje responsive të faqes në internet.

Qëllimi i rrjetit

Korniza e rrjetit Bootstrap 4 është krijuar për krijimin e paraqitjeve të përgjegjshme të faqes në internet.

Rrjeti Bootstrap 4 bazohet në pyetjet e medias CSS Flexbox dhe CSS. Studimi i tyre do t'ju lejojë të kuptoni më në detaje se si funksionon rrjeti Bootstrap 4.

Një paraqitje adaptive është një paraqitje që mund të ndryshojë pamjen e saj në varësi të gjerësisë së zonës kryesore (portit të shikimit) të shfletuesit. Kjo do të thotë që në disa gjerësi të portave të pamjes, faqosja e përgjegjshme mund të duket në një mënyrë, por në të tjera mund të duket krejtësisht ndryshe.

Në Bootstrap 4, ndryshimi i pamjes së paraqitjes zbatohet përmes pyetjeve të medias. Çdo kërkesë për media në Bootstrap bazohet në gjerësinë minimale të pamjes së shfletuesit (pika e ndërprerjes, pika e ndërprerjes, emri i pajisjes).

Korniza e Bootstrap 4 ka 5 pika ndërprerjeje ose emra pajisjesh (të paetiketuara, sm, md, lg, xl), dhe për këtë arsye ju lejon të krijoni një plan urbanistik që mund të duket ndryshe në secilën prej tyre.

Në Bootstrap 4, në krahasim me Bootstrap 3, numri i pikave të ndërprerjes është ndryshuar. Në Bootstrap 3 kishte katër prej tyre: xs, sm, md dhe lg.

Elementet e rrjetit

Rrjeti Bootstrap 4 përbëhet nga elementët e mëposhtëm:

• Kontejnerë mbështjellës (enë dhe kontejner-lëng);
• Rreshtat (rresht);
• Blloqe adaptive (col).

Mbështillni kontejnerët

Një kontejner mbështjellës është një element i rrjetit Bootstrap 4 nga i cili fillon krijimi i një faqosjeje reaguese ose blloku. Elementë të tjerë të rrjetit (rreshtat dhe blloqet adaptive) duhet të vendosen brenda tij.

Bootstrap 4 ka 2 lloje të mbështjellësve të kontejnerëve: reagues-fiks dhe reagues-fluid.

Shënimi HTML i një kontejneri të fiksuar me përgjegjshmëri:

...

Shënimi HTML i kontejnerit të përgjegjshëm të gomës:

...

Kontejneri i parë (reagues-fiks) përdoret kur ju duhet të krijoni një plan urbanistik me një gjerësi që duhet të mbetet konstante brenda një gjerësie të caktuar të portës së shikimit të shfletuesit.

Varësia e gjerësisë së një kontejneri të fiksuar me përshtatje nga gjerësia e portit të shikimit të shfletuesit tregohet në tabelë:

Kjo do të thotë që një kontejner i fiksuar me përshtatje do të ketë:

• Gjerësia 100% për gjerësinë e portës së pamjes deri në 576 px;
• 540px me gjerësi të portës së pamjes nga 576 në 768px;
• 720px me gjerësi të portës së pamjes nga 768 në 992px, etj.

Në drejtimin horizontal, kontejneri me përgjigje fikse pozicionohet në qendër, kjo bëhet në bootstrap.css nëpërmjet veçorive CSS margin-majtas: auto dhe margin-djathtas: auto .

Kontejneri i dytë (gome reaguese) përdoret kur ju duhet të krijoni një plan urbanistik plotësisht fleksibël të një faqeje ose një blloku. Ky kontejner ka 100% gjerësi për çdo gjerësi të portit të pamjes.

Për më tepër, kontejnerët me mbështjellës (kontenierë dhe kontenier-lëng) kanë gjithashtu mbushje të brendshme në të majtë dhe të djathtë prej 15 px. Vendosja e mbushjes për kontejnerët e mbështjelljes bëhet në skedarin Bootstrap 4 CSS duke përdorur vetitë padding-left: 15px dhe padding-right: 15px.

Kur krijoni një plan urbanistik duke përdorur rrjetin Bootstrap 4, mos vendosni kontejnerë mbështjellës brenda të tjerëve.

Rreshtat

Një rresht është një element i veçantë i rrjetit (rresht) që përdoret kur krijoni një plan urbanistik në rastet e mëposhtme:

• midis kontejnerit dhe blloqeve adaptive që duhet të vendosen në të;
• ndërmjet njërit dhe blloqeve të tjera adaptive, të cilat duhet të vendosen në bllokun e parë përshtatës.

Shënimi HTML i rreshtit:

...

Ndryshe nga Bootstrap 3, në të cilin rreshti vepronte vetëm për të kompensuar mbushjen e brendshme majtas dhe djathtas të kontejnerëve të mbështjellësit ose blloqeve reaguese, në Bootstrap 4 ai luan një rol shumë të rëndësishëm. Kjo për faktin se ky rrjet është ndërtuar në CSS Flexbox. Në këtë rrjet, ai vepron si një enë përkulëse për elementët fleksibël (blloqe përshtatëse). Ato. nëse përdorni blloqe adaptive jashtë rreshtit, ato nuk do të funksionojnë. Në Bootstrap 4, blloqet reaguese duhet të jenë në një bllok me klasën e rreshtit.

Kompensimi për mbushjen e brendshme të marzheve kryhet në të njëjtën mënyrë si në Bootstrap 3, për shkak të marzheve negative majtas dhe djathtas të barabarta me 15 px (margin-majtas:-15px dhe margin-djathtas:-15px).

Një shembull se si kompensohet mbushja e fushës:

kontejner (+15 px) -> rresht (-15 px) -> col (+15 pik. -> col (+15 px) -> përmbajtje

Si rezultat, diferenca nga skajet e majta dhe të djathta të enës së mbështjelljes në përmbajtje do të jetë gjithmonë 15 px.

Për më tepër, blloqet adaptive që nuk janë logjikisht të lidhura me njëri-tjetrin nuk duhet të vendosen në një rresht brenda kornizës së një lloj kontejneri mbështjellës ose blloku tjetër përshtatës. Mënyra më e saktë është ndarja e tyre në grupe të veçanta logjike dhe vendosja e secilit prej tyre në një rresht të veçantë.

Për shembull:

... … … … ...

Blloqe adaptive

Blloqet adaptive janë blloqet kryesore të ndërtimit të një paraqitjeje reaguese, ato do të përcaktojnë se si do të duket faqosja e faqes në internet në pika të ndryshme kontrolli (pa simbol, sm, md, lg dhe xl).

Krijimi i një blloku adaptiv është shumë i thjeshtë: duke shtuar një ose më shumë klasa col-?-? te elementi i kërkuar HTML.

Në klasën col-?-?>, në vend të pikëpyetjes së parë, tregohet emri i pikës së kontrollit: pa emërtim, sm, md, lg ose xl. Në vend të pikëpyetjes së dytë, tregohet gjerësia e bllokut adaptiv, të cilin duhet ta ketë në pikën e specifikuar të kontrollit. Gjerësia e bllokut të përgjegjshëm specifikohet në formë relative duke përdorur një numër nga 1 në 12 (kolona Bootstrap).

Ky numër përcakton se sa të gjerësisë do të zërë blloku adaptiv në pikën e caktuar të kontrollit nga gjerësia e bllokut prind, d.m.th. rresht. Gjerësia e rreshtit në terma numerikë (kolonat e Bootstrap) është 12.

Për shembull, një bllok me klasën col-md-4 në pikën e kontrollit md do të zërë 4/12 të gjerësisë së rreshtit, d.m.th. 33.3% (d.m.th. 4/12*100% = 33.3%).

Blloqet përshtatëse, si dhe kontejnerët, kanë mbushje majtas dhe djathtas 15 px. Këto mbushje për blloqet adaptive të kornizës Bootstrap 4 janë vendosur duke përdorur vetitë CSS padding-left: 15px dhe padding-djathtas: 15px.

Blloqet përshtatëse duhet të vendosen në një rresht. Ato. Çdo bllok adaptiv duhet të ketë një bllok me rreshtin e klasës si prind.

Për shembull, merrni parasysh sa i gjerë do të jetë blloku i mëposhtëm i përgjegjshëm në secilën pajisje:

...

Ky bllok adaptiv do të ketë:

• deri në sm (nga xs) një gjerësi e barabartë me 12 kolona Bootstrap (d.m.th. 12/12*100%=100% e gjerësisë së rreshtit);
• në një pajisje sm, një gjerësi e barabartë me 9 kolona Bootstrap (d.m.th. 9/12*100%=75% e gjerësisë së rreshtit);
• në një pajisje md, një gjerësi e barabartë me 7 kolona Bootstrap (d.m.th. 7/12*100%=58,3% e gjerësisë së rreshtit);
• në një pajisje lg, një gjerësi e barabartë me 5 kolona Bootstrap (d.m.th. 5/12*100%=41,6% e gjerësisë së rreshtit);
• në një pajisje xl, një gjerësi e barabartë me 3 kolona Bootstrap (d.m.th. 3/12*100%=25% e gjerësisë së rreshtit).

Përveç kësaj, kur specifikoni gjerësinë e bllokut adaptiv për një pikë kontrolli, ajo do të zbatohet jo vetëm për këtë pikë, por edhe për të gjitha ato pasuese, nëse ato nuk janë të specifikuara.

Një bllok reagues në pajisjet md dhe lg do të ketë një gjerësi të barabartë me 6 kolona Bootstrap: (12) -> sm(6) -> md -> lg -> xl (3) .

Një bllok reagues në një pajisje sm do të ketë një gjerësi të barabartë me 8 kolona Bootstrap, dhe në pajisjet lg dhe xl do të ketë një gjerësi të barabartë me 4 kolona Bootstrap: (8) -> sm -> md (4) -> lg - > xl.

Blloku i përgjegjshëm në të gjitha pajisjet do të ketë një gjerësi të barabartë me 6 kolona Bootstrap: (6) -> sm -> md -> lg -> xl .

Blloqe përshtatëse pa kolona

Në Bootstrap 4 grid -auto .

Grupi i parë i klasave (col, col-sm, col-md, col-lg, col-xl) ka për qëllim krijimin e blloqeve adaptive, gjerësia e të cilave do të varet nga hapësira e lirë e linjës. Gjerësia e pa zënë (hapësira e lirë) e linjës shpërndahet në mënyrë të barabartë midis të gjitha blloqeve të tilla. Përveç kësaj, këto blloqe adaptive kanë një gjerësi zero përpara se të ndajnë hapësirën e linjës së lirë (sipas parazgjedhjes).

Le të shohim disa shembuj.

1. Krijoni 5 blloqe adaptive me të njëjtën gjerësi me radhë.

1/5 2/5 3/5 4/5 5/5

Llogaritja e gjerësisë:

• hapësira e linjës së lirë - 100% (pasi gjerësia e tyre është 0);
• gjerësia e çdo blloku adaptiv është 20% (100%/5);

2. Gjerësia e blloqeve me klasën col nëse ka një bllok adaptiv me numrin e kolonave në rresht.

? 7 kolona? ?

Llogaritja e gjerësisë:

• hapësira e linjës së lirë - 41,67% ((12-7)/12*100%);
• gjerësia e çdo blloku adaptiv, përveç col-7, është 13.89% (41.67%/3).

Në disa versione të shfletuesve Safari ka një gabim kur përdorni një shënim të tillë, ai mund të ndahet në disa rreshta.

Ka 2 mënyra për ta rregulluar këtë:

• duke vendosur kufirin e blloqeve adaptive.col (kufiri: 1px transparent; )
• duke i dhënë blloqeve adaptive vetinë CSS flex-basis .col (flex: 1 0 20%; )

Përveç kësaj, rrjeti Bootstrap 4 ju lejon të vendosni blloqe reaguese pa specifikuar numrin e kolonave në disa rreshta.

... ... ... ...

Ky veprim kryhet duke shtuar një element div bosh me klasën w-100 në shënimin përpara bllokut adaptiv, i cili duhet të fillojë me një linjë të re.

Nëse ky veprim duhet të përdoret vetëm për disa pika kontrolli, atëherë duhet të shtoni edhe klasa të shërbimeve responsive Bootstrap 4 në të (klasa w-100).

Në këtë shembull, blloqet adaptive do të transferohen në një linjë të re vetëm në pajisjet me një pamje të vogël ose të vogël.

... ... ... ...

Grupi i dytë i klasave (col-auto, col-sm-auto, col-md-auto, col-lg-auto dhe col-xl-auto) është krijuar për të krijuar blloqe adaptive, gjerësia e të cilave do të përcaktohet sipas përmbajtjen e tyre.

Për shembull:

(1) (2) - gjerësia në pikat e kontrollit md, lg dhe xl do të përcaktohet në bazë të përmbajtjes (3)

Si rezultat:

• në blloqet adaptive xs dhe sm do të vendosen vertikalisht (njëri nën tjetrin) dhe do të zënë të gjithë gjerësinë e rreshtit;
• në md, blloku i përgjegjshëm 2 do të ketë gjerësinë e nevojshme për të shfaqur përmbajtjen e tij; nëse blloku 2 nuk zë të gjithë gjerësinë e rreshtit, atëherë blloqet adaptive 1 dhe 3 do ta ndajnë atë në mënyrë të barabartë midis tyre; nëse blloku 2 zë të gjithë gjerësinë e linjës, atëherë fotografia do të jetë e njëjtë si në pikat e kontrollit xs dhe sm;
• në lg dhe xl, blloku reagues 2 do të ketë gjerësinë e kërkuar për të shfaqur përmbajtjen e tij; nëse blloku 2 nuk e zë të gjithë gjerësinë e rreshtit, atëherë blloku 3 do të zërë një gjerësi të barabartë me 2 kolona Bootstrap dhe blloku 1 do të zërë të gjithë gjerësinë e mbetur të rreshtit; nëse blloku 2 zë të gjithë gjerësinë e rreshtit, atëherë shënimi do të jetë i njëjtë si në xs dhe sm, vetëm blloku 3 në 3 rreshta do të ketë një gjerësi të barabartë me 2 kolona Bootstrap.

Rregullimi i blloqeve adaptive në një rresht

Si parazgjedhje, blloqet adaptive në një rresht janë rregulluar në vija horizontale. Brenda vijës horizontale, blloqet adaptive janë rreshtuar në mënyrë sekuenciale nga e majta në të djathtë. Blloqet adaptive me një numër total kolonash jo më shumë se 12 mund të futen në një vijë horizontale.

(1) (2) (3) (4)

Le të shohim një shembull tjetër në të cilin blloqet adaptive kanë gjerësi të ndryshme në pika të ndryshme kontrolli:

Parimi themelor i paraqitjes së paraqitjes

Parimi bazë i paraqitjes së një faqosjeje të faqes në internet në rrjetin Bootstrap 4 është të futni disa blloqe përshtatëse brenda të tjerëve.

Në të njëjtën kohë, gjerësia e blloqeve adaptive është gjithmonë një vlerë relative, e cila vendoset në kolonat Bootstrap dhe varet vetëm nga gjerësia e prindit, d.m.th. rresht.

Përmbajtja e faqes së internetit duhet të vendoset vetëm në blloqe reaguese.

Për shembull, në paraqitjen ekzistuese, përkatësisht në bllokun adaptiv col-8, do të shtojmë edhe 2 blloqe të tjera:

... ...

Për ta bërë këtë, së pari duhet të vendosni një rresht (enë për blloqe adaptive) në bllokun col-8:

... ... Bootstrap 4 - Futja e një rreshti në përmbajtjen e një blloku reagues col-8

Pas kësaj, shtoni 2 blloqe adaptive me radhë:

... ... ... Bootstrap 4 - Futja e blloqeve reaguese në një rresht

Përafrimi i blloqeve adaptive

Përafrimi i blloqeve adaptive në drejtimet horizontale dhe vertikale bëhet në Bootstrap 4 duke përdorur klasat flex të shërbimeve.

Rreshtimi vertikal i blloqeve adaptive

Shtrirja vertikale e blloqeve adaptive brenda një linje rreshti kryhet duke përdorur një nga klasat e mëposhtme, e cila duhet të shtohet në rresht:

• align-item-start (në lidhje me fillimin e rreshtit);
• align-item-center(center);
• align-item-end (në lidhje me fundin).

Për shembull, le të rreshtojmë të gjitha blloqet adaptive në qendër të vijës së rreshtit:

1/2 2/2

Si parazgjedhje, elementët reagues zënë të gjithë lartësinë e rreshtit të rreshtit në të cilin ndodhen.

Rreshtimi vertikal i një blloku specifik adaptiv brenda një linje mund të kryhet nga një nga klasat e mëposhtme:

• align-self-start (në lidhje me fillimin e linjës);
• align-self-center (në qendër);
• align-self-end (në lidhje me fundin).

Këto klasa duhet të shtohen në blloqe adaptive, jo në një rresht.

Për shembull, ne rreshtojmë bllokun adaptiv 2 në skajin e poshtëm të rreshtit:

(1) (2)

Rreshtimi horizontal i blloqeve adaptive

Klasat e mëposhtme janë të destinuara për rreshtimin e blloqeve adaptive në drejtimin horizontal:

• justify-content-start (në lidhje me fillimin e rreshtit të rreshtit - default);
• justifikoj-përmbajtje-qendër (qendër);
• justify-content-end (në lidhje me fundin e rreshtit);
• justify-content-rreth (në mënyrë të barabartë, duke marrë parasysh hapësirën para bllokut të parë dhe të fundit adaptiv);
• justify-content-mes (në mënyrë të barabartë, me hapësirë ​​të barabartë midis blloqeve reaguese).

Për shembull, le të shpërndajmë blloqet adaptive në drejtimin horizontal në mënyrë të barabartë:

(1) (2)

Struktura e përgjegjshme pa kufij

Mbushja e brendshme e blloqeve adaptive dhe kufijtë e jashtëm negativ të rreshtave mund të hiqen nëse kësaj të fundit i shtohet klasa pa ulluqe (d.m.th. rreshti).

... ... ...

Ju lutemi vini re se kjo klasë (pa ulluqe) prek vetëm blloqet adaptive që vendosen drejtpërdrejt në këtë rresht. Ato. Vetitë CSS për heqjen e mbushjes nuk do të zbatohen për blloqet adaptive që nuk e kanë këtë rresht si prind.

Në Bootstrap 4, kompensimet e përgjegjshme të bllokut mund të bëhen duke përdorur:

• kompensimi i klasave (për një numër të caktuar kolonash);
• klasat e marzhit të shërbimit (të shërbimeve).

klasat e kompensuara

Klasat e kompensimit janë krijuar për të zhvendosur blloqet adaptive në të djathtë me një numër të caktuar kolonash.

Këto klasa kanë sintaksën e mëposhtme:

Offset-(1) ose offset-(pika e ndërprerjes)-(1)

(pika e ndërprerjes) - pika e kontrollit, duke filluar nga e cila do të aplikohet një kompensim në këtë bllok (nëse nuk është specifikuar, atëherë kompensimi do të aplikohet duke filluar nga pajisjet më të vogla).

(2) – vlera e kompensimit e specifikuar duke përdorur numrin e kolonave Bootstrap.

Si shembull, le të vendosim kompensimin në blloqet adaptive siç tregohet në figurë.

(1) (2) (1) (2) (1)

Kompensimi duke përdorur klasat e marzhit

Në versionin e katërt të Bootstrap, ju gjithashtu mund të vendosni kompensimin për blloqet adaptive duke përdorur indencat e margjinës (margin-majtas: auto dhe (ose) margin-djathtas: auto). Ky opsion kompensimi vjen sepse rrjeti në versionin e ri të Bootstrap (4) bazohet në CSS Flexbox.

Ky opsion i zhvendosjes (duke përdorur klasat e marzhit) përdoret kur blloqet duhet të zhvendosen në lidhje me njëri-tjetrin me një sasi të ndryshueshme.

Në Bootstrap 4, për një vendosje më të përshtatshme dhe më përshtatëse të indenteve të margjinës për blloqet (diferencë-majtas: auto dhe (ose) marzh-djathtas: auto), mund të përdorni klasat ml-auto , mr-auto , ml-(breakpoint )-auto dhe mr-(pika e ndërprerjes)-auto .

Bootstrap 4 - Kompensimi i përgjegjshëm i bllokut

(1) (2) (1) (2) (3) (1) (2)

Ndryshimi i rendit vizual të blloqeve adaptive

Si parazgjedhje, blloqet e përgjegjshme shfaqen vizualisht në rendin në të cilin ndodhen në kodin HTML.

Ndryshimi i rendit vizual të një blloku të përgjegjshëm në Bootstrap 4 bëhet duke përdorur klasën order-(visual_number). Kjo klasë është për pikën e kontrollit xs. Nëse rendi i një elementi duhet të përcaktohet jo për pikën e kontrollit xs, por për sm, md, lg ose xl, atëherë përdoret versioni i mëposhtëm i kësaj klase:

Renditja-(pika e ndërprerjes)-(numri_vizual)

Në vend të (visual_number) ju duhet të specifikoni një numër nga 1 në 12.

Ky numër përcakton se si elementët do të shfaqen vizualisht në faqe. Domethënë, të gjithë elementët përshtatës do të ndjekin vizualisht në rend rritës të këtyre numrave. Nëse një element nuk ka një grup të klasës së rendit, ai vendoset në 0.

Për shembull, le të ndryshojmë rendin e dy blloqeve adaptive:

E para (jo e renditur, pa renditje- klasë) E dyta, por do të shfaqet e fundit E treta, por do të shfaqet e dyta

Një shembull tjetër (duke përdorur klasat e rendit përshtatës):

E para (në xs, sm do të shfaqet së dyti) E dyta (në xs, sm do të shfaqet së pari)

Përveç numrave (nga 1 në 12 si parazgjedhje), mund të përdorni edhe fjalët e para dhe të fundit . Këto klasa (order-first, order-(breakpoint)-first, order-last, order-(breakpoint)-last) ju lejojnë të zhvendosni vizualisht një element në fillim ose në fund, përkatësisht.

Klasat order-first dhe order-(breakpoint)-first ushtrojnë efektin e tyre duke vendosur vetinë e rendit CSS të elementit në -1 (rend: -1), dhe klasat order-last dhe order-(breakpoint)-last vendosin CSS porosis pronën me vlerën 13 (renditja: $kolona + 1).

Le të rishkruajmë shembullin e mësipërm duke përdorur klasat e rendit, të cilat përdorin fjalët kyçe të para dhe të fundit:

E para (në xs, sm do të shfaqet e fundit) E fundit (në xs, sm do të shfaqet së pari)

Një shembull duke përdorur klasat e rendit me një numër dhe fjalët e para dhe të fundit:

#1 (XS), #FUNDIT (SM), #1 (MD, LG dhe XL) #2 (XS), #7 (MD, LG dhe XL) #3 (XS), #6 (MD, LG dhe XL ) #4 (XS), #5 (MD, LG dhe XL) #5 (XS), #4 (MD, LG dhe XL) #6 (XS), #3 (MD, LG dhe XL) #7 (XS ), #2 (MD, LG dhe XL) #8 (XS), #FIRST (SM), #8 (MD, LG dhe XL)

Një shembull i paraqitjes adaptive në rrjetin Boostrap 4

Le të krijojmë një plan urbanistik të përgjegjshëm për bllokun e faqes së internetit të paraqitur në figurë duke përdorur rrjetin Bootstrap 4 - Shembull i paraqitjes së bllokut reagues

1. Krijoni shënjimin e bllokut për pajisjet celulare (xs).

(1) (2) (3) (4) (5)

2. Vendosni shënimin për pikën e kontrollit sm:

(1) (2) (3) (4) (5)

3. Vendosni blloqet në numrin e kolonave që duhet të kenë në pajisjet md dhe lg:

(1) (2) (3) (4) (5)

4. Krijo shënim për xl:

(1) (2) (3) (4) (5)

Ne heqim pikat e panevojshme të kontrollit nga blloqet adaptive:

(1) (2) (3) (4) (5)

Përveç kësaj, fillimisht në Bootstrap 4 blloku i përgjegjshëm ka një gjerësi prej 100%. Kjo ju lejon të mos specifikoni numrin e kolonave kur krijoni blloqe adaptive, nëse gjerësia e tyre fillestare duhet të jetë 12 kolona (100%).

(1) (2) (3) (4) (5)

Bazuar në numrin e yjeve në GitHub.

Nëse dëshironi të zotëroni Bootstrap, në veçanti versionin e tij të fundit, të katërt, atëherë ky material është përgatitur posaçërisht për ju. Këtu, duke përdorur një shembull të vogël nga fundi në fund që mund të zotërohet vërtet në gjysmë ore, do të demonstrohen bazat e Bootstrap, pasi t'i kuptoni ato, do të jeni në gjendje të bëni diçka nga vetja duke përdorur këtë kornizë.

Parakushtet Ky material ka për qëllim zhvilluesit fillestarë të uebit të cilët kanë një kuptim bazë të HTML, CSS dhe jQuery.

Këtu është një faqe interneti me një faqe për të cilën do të flasim për krijimin duke përdorur Bootstrap.

Projekt i gatshëm i krijuar duke përdorur Bootstrap

Npm instaloni bootstrap
Bootstrap mund të lidhet me një faqe duke përdorur një rrjet të ofrimit të përmbajtjes. Për ta bërë këtë, shtoni lidhjen e mëposhtme në etiketë:

Versioni më i fundit i Bootstrap mund të shkarkohet nga këtu dhe të përdoret në nivel lokal.

Struktura e projektit duhet të duket si figura e mëposhtme.

Struktura e projektit Rreth aftësive të Bootstrap 4 Versioni i parë i qëndrueshëm i Bootstrap 4 doli në fund të janarit të këtij viti. Bootstrap tani përfshin disa veçori interesante që nuk ishin të pranishme në versionin e tij të mëparshëm. Gjegjësisht, nëse flasim për përmirësime dhe ndryshime, mund të vërejmë sa vijon:

• Bootstrap 4 u rishkrua duke përdorur teknologjinë flexbox, ndërsa Bootstrap 3 përdorte teknologjinë float. Nëse nuk jeni njohur me flexbox, hidhini një sy këtij burimi.
• CSS e Bootstrap 4 përdor njësi rem, ndërsa më parë përdorte njësi px. mund të zbuloni se si ndryshojnë ato.
• Disa komponentë, të tillë si panelet, janë hequr. Mund të gjeni detaje rreth ndryshimeve të bëra në Bootstrap 4.

Në fakt, Bootstrap 4 ka shumë gjëra të reja në krahasim me Bootstrap 3, nëse ju nevojitet, mund të njiheni me këto risi. Tani po fillojmë të punojmë në projektin tonë arsimor Bootstrap Grid System Sistemi Bootstrap Grid është krijuar për krijimin e paraqitjeve të faqeve. E bën të lehtë zhvillimin e faqeve të internetit të përgjegjshme. Në versionin e ri të Bootstrap, emrat e klasave nuk kanë ndryshuar (duhet theksuar se class.xs nuk ekziston më).

Rrjeti është i ndarë në 12 kolona, ​​kjo strukturë, e konfiguruar sipas nevojës së zhvilluesit, është baza e paraqitjes së faqes.

Për të përdorur rrjetin Bootstrap, duhet të shtoni klasën .row në elementin kryesor të faqes. Kur vendosni madhësitë e elementeve të mbivendosur, përdoren klasat e mëposhtme (në vend të një ylli në fund të emrit të klasës, tregohet numri i kolonave të rrjetit bazë me 12 kolona që duhet të zërë një element i veçantë):

• col-lg-* - klasa e përdorur për faqet e destinuara për pajisje me ekran të madh si laptopët;
• col-md-* - klasa për faqet e krijuara për pajisje me ekran të mesëm, të tilla si tabletët;
• col-sm-* - klasë për faqet që janë krijuar për ekrane të vegjël, si ato që gjenden në telefonat inteligjentë.

Shiriti i navigimit Shiritat e navigimit në Bootstrap krijohen duke përdorur klasën .navbar. Në fakt, është një mbështjellës në të cilin vendosen elementët që formojnë shiritin e navigimit. Më poshtë është paneli që do të krijojmë tani. Ndodhet në krye të faqes dhe nuk zhduket kur lëviz.

Shiriti i navigimit

Pra, në mënyrë që një shirit navigimi të shfaqet në faqe, ne do të shtojmë një etiketë në index.html me klasën .navbar , brenda së cilës, duke përdorur klasa të tjera si .navbar-brand , .navbar-toggler dhe .nav -item , ne krijojmë disa elementë dhe strukturë të veçantë të sistemit të navigimit të faqes. Klasa .fixed-top ju lejon të rregulloni shiritin e navigimit në krye të faqes. Këtu është faqosja e shiritit të navigimit:

Shtëpi

• Rreth
• Portofoli
• Ekipi
• Posto
• Kontaktoni

Tani le të krijojmë një skedar main.css dhe ta lidhim atë me faqen duke vendosur sa vijon në etiketën e skedarit index.html:

Kjo do t'ju lejojë të personalizoni stilet e elementeve të faqes duke vendosur rregullat CSS në këtë skedar. Le të shtojmë rregulla në këtë skedar CSS që vendosin modelin e ngjyrave të shiritit të navigimit:

Navbar( sfond:#F97300; ) .nav-link , .navbar-brand( ngjyra: #f4f4f4; kursori: treguesi; ) .nav-link( margin-djathtas: 1em !i rëndësishëm; ) .nav-link:hover( sfond : #f4f4f4; ngjyra: #f97300;
Rrjeti i ri Bootstrap bazohet në flexbox, kështu që ju duhet të përdorni vetitë e duhura për të lidhur përmbajtjen. Për shembull, për të vendosur menunë e shiritit në të djathtë, duhet të përdorni veçorinë justify-content dhe të vendosni vlerën e saj në flex-end:

Navbar-collapse ( justify-content: flex-end; )
Për të personalizuar ngjyrën e sfondit të shiritit të navigimit, mund të përdorni klasat .bg-light (sfondi i hapur), .bg-dark (sfondi i errët) dhe .bg-primary (ngjyra kryesore e sfondit). Ne përdorim cilësimet e mëposhtme:

Bg-errë (ngjyra e sfondit:#343a40! e rëndësishme) .bg-primare (ngjyra e sfondit:#343a40! e rëndësishme)

Kreu i faqes Etiketa e mëposhtme përdoret për të përshkruar kokën e faqes:

Le të përgatisim një plan urbanistik për kokën e faqes. Ne duam që ajo të zërë të gjithë lartësinë e dritares, kështu që jQuery do të jetë i dobishëm këtu. Le të krijojmë një skedar main.js dhe ta lidhim atë me index.html përpara etiketës mbyllëse:

Le të shtojmë sa vijon në skedarin main.js:

$(dokument).ready(funksion())( $(".header").height($(dritare).height()); ))
Do të ishte një ide e mirë të vendosni një imazh të bukur të sfondit në kokën e faqes. Le ta bëjmë kështu:

/*stili i kokës*/ .header( sfond-imazhi: url("../images/headerback.jpg"); bashkëngjitja e sfondit: fikse; madhësia e sfondit: kopertina; pozicioni i sfondit: në qendër; )
Kjo është ajo me të cilën përfunduam.

Kreu i faqes me imazhin e sfondit

Për momentin, kreu i faqes duket pak bosh, kështu që le t'i shtojmë një element, duke i caktuar klasën .overlay , e cila do të çojë në krijimin e një blloku që ndodhet në krye të imazhit të sfondit të kokës. Le të ndryshojmë seksionin e skedarit index.html ku kemi përshkruar kokën si më poshtë:

Pastaj, në main.css, shtoni sa vijon:

Mbivendosja (pozicioni: absolute; min-lartësia: 100%; min-gjerësia: 100%; majtas: 0; lart: 0; sfondi: rgba (244, 244, 244, 0.79); )
Tani le të shtojmë një përshkrim të projektit në kokë. Do ta vendosim në një element të ri me klasën .container . Kjo është një klasë ndihmëse për kornizën Bootstrap e krijuar për të vendosur përmbajtjen bazuar në nevojat e një paraqitjeje të përgjegjshme. Ja se si do të ndryshojë shënimi në këtë hap:

Tani le të shtojmë një element tjetër këtu, të cilit do t'i caktojmë class.description:

▍ Përshëndetje, Mirë se vini në faqen time zyrtare të internetit

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat jo proident, ndodh në culpa qui officia deserunt mollit anim id est laborum.

Shiko me shume
Kësaj etikete do t'i caktojmë gjithashtu klasën .text-center, e cila do të lejojë që përmbajtja e saj të përafrohet në qendër të faqes. Ekziston një buton në fund të përshkrimit të faqes. Le të flasim se si ta konfigurojmë atë.

Buttons Bootstrap ofron shumë klasa për butona. Ju mund të shihni disa shembuj të dizajnit të butonave. Ne, siç mund ta shihni në shembullin e shënjimit nga seksioni i mëparshëm, shtuam klasat .btn dhe elementit. btn-outline-secondary .

Tani le të vendosim stilet për class.description:

Përshkrimi( pozicioni: absolut; sipër: 30%; margjina: automatik; mbushja: 2em; ) .përshkrimi h1( ngjyra:#F97300 ; ) .përshkrimi p( ngjyra:#666; madhësia e shkronjave: 20 px; gjerësia: 50%; lartësia e linjës: 1,5;
Kështu do të duket kreu i faqes pasi të keni përfunduar hapat e mësipërm:

Kreu i faqes që përmban një përshkrim të projektit Rreth seksionit Së pari, le të shohim se çfarë duam të krijojmë. Këtu është një seksion i faqes me informacione rreth zhvilluesit të uebit.

Rreth seksionit

Këtu do të përdorim aftësitë e rrjetit të Bootstrap për të krijuar një plan urbanistik me dy pjesë. Le të fillojmë duke shtuar një klasë .row në elementin prind të seksionit:

Pjesa e parë e paraqitjes do të jetë në të majtë, do të përmbajë një foto. Pjesa e dytë, e vendosur në të djathtë, përmban një përshkrim.

Ja se si duket shënimi në anën e majtë të këtij seksioni:

// ana e majte S.Web Developer
Dhe kjo është ajo që do të ndodhë pasi përshkrimi i anës së djathtë të paraqitjes të shtohet këtu:

Zhvilluesi i S.Web ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ushtrime ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

Vini re vendosjen e gjerësisë së kolonave duke përdorur klasat col-lg-*, col-md-* dhe col-sm-* të përshkruara më sipër.

Këtu janë stilet për të gjitha këto:

Rreth( margjina: 4em 0; mbushja: 1em; pozicioni: relative; ) .rreth h1 (ngjyra:#F97300; diferenca: 2em; ) .rreth img (lartësia: 100%; gjerësia: 100%; rreze-kufitare: 50% ) .about span( ekran: bllok; ngjyra: #888; pozicioni: absolut; majtas: 115 px; ) .about .desc(mbushje: 2em; kufiri-majtas:4px solid #10828C; ) .rreth .desc h3( ngjyra: #10828C;

Seksioni i portofolit Le të kalojmë tani në seksionin në të cilin do të prezantohet portofoli i zhvilluesit. Ai do të përmbajë një galeri me vepra.

Seksioni i portofolit

Kur krijoni paraqitjen e këtij seksioni, zbatohen të njëjtat parime të punës me rrjetin që diskutuam më lart:

Portofoli
Shtimi i klasës .img-fluid në secilën prej imazheve i bën ato të përgjegjshme.

Çdo element në galerinë tonë, në ekranet e mesme dhe të mëdha, zë 4 kolona (mos harroni - klasa col-sm-12 përdoret për pajisjet me ekrane të vogla, klasa col-md-4 përdoret për ekranet e mesme, col-lg-4 - për pajisjet me ekrane të mëdha). Si rezultat, në ekranet e mëdha dhe të mesme, një element do të përbëjë afërsisht 33.3% të elementit të kontejnerit në pajisjet e vogla, secili element do të zërë të gjithë ekranin (12 kolona).

Stilimi i galerisë së punimeve:

/*Portfolio*/ .portfolio( marzhi: 4em 0; pozicioni: relative; ) .portofoli h1( ngjyra:#F97300; marzhi: 2em; ) .portofoli img(lartësia: 15rem; gjerësia: 100%; diferenca: 1em; )

Seksioni i blogut dhe puna me karta Le të flasim për krijimin e një seksioni që përmban njoftime të materialeve nga blogu i mbajtur nga zhvilluesi ynë i kushtëzuar i uebit.

Seksioni i blogut

Për të krijuar këtë seksion do të na duhen të ashtuquajturat karta (kartat në terminologjinë Bootstrap).

Për të krijuar një kartë, duhet të përfshini një element në paraqitje dhe të shtoni klasën .card në të. Ju mund të përdorni klasat e mëposhtme për të konfiguruar elementë të ndryshëm të kartës:

• .card-header: kokë
• .kartë-trup: përmbajtja kryesore
• .card-title: titull
• .card-footer: footer
• .kartë-imazh: imazh

Shënimi HTML për këtë seksion do të duket kështu:

Blog Titulli i postimit

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lexo më shumë Titulli i postimit

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lexo më shumë Titulli i postimit

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lexo më shumë
Këtu janë stilet për kartat:

Blog( margjina: 4em 0; pozicioni: relative; ) .blog h1( ngjyra:#F97300; margjina: 2em; ) .blog .kartë( kuti-hije: 0 0 20px #ccc; ) .blog .kartelë img( gjerësia: 100%; lartësia: 12em; .blog .card-title(color:#F97300;)
Kështu do të duket faqja jonë me një faqe pas krijimit të seksionit Blog:

Faqe pas shtimit të seksionit Blog Seksioni i ekipit Ky seksion do të përmbajë informacion rreth ekipit të projektit.

Seksioni i ekipit

Për të formuar këtë seksion, ne do të përdorim një rrjet, duke e ndarë hapësirën e disponueshme në mënyrë të barabartë midis imazheve. Çdo imazh (në ekrane të mëdha dhe të mesme) do të zërë 3 kolona rrjeti, që është 25% e hapësirës totale.

Këtu është shënimi HTML për këtë seksion:

Ekipi ynë Sara Menaxher Chris S.inxhinjer Zhvilluesi i Layla Front End J.Jirard Team Manger
Dhe këtu janë stilet:

Ekipi ( diferenca: 4em 0; pozicioni: relative; ) .ekipi h1 ( ngjyra:#F97300; diferenca: 2em; ) .team .artikull( pozicioni: relative; ) .team .des( sfondi: #F97300; ngjyra: #fff ;
Le ta dekorojmë këtë seksion me animacion që shfaqet kur vendosni miun mbi imazhe. Duhet të duket si imazhi më poshtë.

Animacion kur rri pezull miun mbi një imazh

Për të arritur këtë efekt, shtoni stilet e mëposhtme në main.css:

Ekipi .artikulli:hover .des(lartësia: 100%; sfondi:#f973007d; pozicioni: absolute; gjerësia: 89%; mbushja: 5em; lart: 0; rrezja kufi-poshtë-majtas: 0; )

Formulari i komenteve Ky seksion i faqes do të përmbajë një formular me të cilin vizitorët e faqes mund t'i dërgojnë mesazhe pronarit të sajtit. Këtu, si zakonisht, për të stiluar elementët dhe për të siguruar reagimin e tyre, ne do të përdorim aftësitë e Bootstrap.

Formulari i komenteve

Ashtu si Bootstrap 3, Bootstrap 4 përdor klasën .form-control për fushat e hyrjes, por tani ka diçka të re. Për shembull - në vend të class.input-group-addon e vjetëruar, përdoret class.input-group-prepend e re (për ikonat dhe etiketat). Më shumë detaje rreth kësaj mund të gjenden në dokumentacionin e Bootstrap 4 Në rastin tonë, çdo fushë hyrëse do të vendoset në një element që i është caktuar një klasë .form.

Le të shtojmë sa vijon në skedarin index.html:

Kontaktoni
Këtu janë stilet për seksionin e formularit të komenteve, të cilat duhet të vendosen në skedarin main.css:

Forma e kontaktit( margjina: 6em 0; pozicioni: relative; ) .forma e kontaktit h1( mbushja:2em 1px; ngjyra: #F97300; ) .forma e kontaktit .djathtas( gjerësia maksimale: 600 px; ) .forma e kontaktit . djathtas .btn-secondary( sfondi: #F97300; ngjyra: #fff; kufiri:0; ) .contact-form .right .form-control::placeholder(ngjyra: #888; madhësia e shkronjave: 16px; )

Fontet Fontet standarde nuk janë të përshtatshme për të gjithë. Ne përfituam nga Google Font API për të përdorur fontin Raleway në projektin tonë. Këtu do të duket shumë mirë. Për të importuar fontin, shtoni direktivën e mëposhtme në skedarin main.css:

@import url ("https://fonts.googleapis.com/css?family=Raleway");
Më pas, le të vendosim stile globale për etiketa të ndryshme HTML:

Html,h1,h2,h3,h4,h5,h6,a( font-familja: "Raleway"; )

Efektet e lëvizjes Imazhi më poshtë tregon sjelljen e faqes që duam të arrijmë.

Lëvizja e faqes kur klikoni lidhjet në shiritin e navigimit

Në mënyrë që faqja të lëvizë pa probleme në seksionin e dëshiruar kur klikoni në lidhjet e shiritit të navigimit, do të duhet t'i drejtohemi aftësive të jQuery. Nëse nuk jeni shumë të njohur me këtë bibliotekë, dijeni se nuk ka asgjë të komplikuar këtu - thjesht shtoni kodin e mëposhtëm në skedarin tuaj main.js:

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("vlera")).offset ( ).lart ),1000) ))
Pas kësaj, shtoni një atribut të vlerës së të dhënave në secilën prej lidhjeve në shiritin e navigimit dhe bëni shënimin të duket si ky:

Rreth

Portofoli

Blog

Ekipi

Kontaktoni

Në mënyrë që e gjithë kjo të funksionojë më në fund, mbetet vetëm shtimi i atributit id në elementin kryesor të çdo seksioni të faqes. Në këtë rast, duhet të siguroheni që vlera e tij të jetë identike me atë të specifikuar në atributin e vlerës së të dhënave të lidhjes përkatëse. Për shembull, këtu është atributi përkatës për seksionin Rreth:

Kjo e plotëson shembullin tonë. Shto etiketa

Lëshimi i versionit të ri të Bootstrap4 më shtyu të shkruaj këtë udhëzues sepse versioni i ri është dukshëm i ndryshëm. Do t'ju duhet të kaloni pak kohë për ta studiuar, por ia vlen. Ky udhëzues nuk është një udhëzues i plotë për Bootstrap4, dhe pa dyshim që do t'ju duhet t'i hidhni një sy dokumentacionit më shumë se një herë, por këtu do të mbulojmë bazat e krijimit të një faqosjeje të faqes në internet me Bootstrap4 në dy mënyra të ndryshme.

Instalimi Në rastin tonë ne do të përdorim SASS dhe për këtë arsye do të përdorim instalimin e plotë.

Nëse ju nevojitet vetëm Bootstrap për prototipim të shpejtë, ka kuptim të përdorni metodën CDN. Ju thjesht lidhni skedarë që ndodhen në burime të tjera në internet, pa instalim (shkarkim). Në këtë mënyrë ju i shtoni ato në projektin tuaj si lidhje.

Ju thjesht mund të shtoni kodin nga shembulli më poshtë në skedarin e projektit tuaj - index.html

Modeli fillestar i Bootstrap 4 Përshëndetje< /h1>

Ky kod është drejtpërdrejt nga faqja e bootstrap Bootstrap 4.

Me këtë shabllon mund të filloni të përdorni Bootstrap menjëherë. Avantazhi është se është e lehtë për të filluar, por disavantazhi është se ju humbisni personalizimin që ofron Sass.

Instalimi i Bootstrap 4 nëpërmjet NPM Ne do të fillojmë projektin tonë pikërisht këtu në këtë pikë. Kjo do të kërkojë përdorimin e Node.js dhe menaxherin e tij të paketave për të instaluar vetë pajisjen e nisjes së bashku me disa paketa të tjera. Kjo do të na japë akses në Sass, ringarkim në kohë reale, etj.

Së pari, sigurohuni që të keni instaluar Nodejs duke hapur tastierën ose linjën e komandës:

Nëse merrni versionin aktual, atëherë gjithçka është në rregull dhe mund të vazhdoni, por nëse jo, atëherë shkarkoni instaluesin e duhur bazuar në OS tuaj dhe ndiqni procedurën e instalimit me cilësimet e paracaktuara.

Ju mund të lexoni disa informacione të dobishme konfigurimi në postimin tim - NPM Konfigurimi Gulp dhe Përpilimi SASS

Pasi të përfundojë instalimi, rinisni konsolën ose linjën e komandës dhe do të keni akses në komandat Node.js.

Le të krijojmë një dosje për projektin tonë dhe të hyjmë në të:

Mkdir bs4 && cd bs4

Më pas do të ekzekutojmë npm init për të krijuar një skedar package.json që thjesht ruan varësitë tona.

(Shënim: Flamuri -y thjesht na lejon të kapërcejmë përgjigjet ndaj pyetjeve të ndryshme dhe t'u ofrojmë atyre vlerat e paracaktuara)

Më pas do të përdorim përsëri npm për të instaluar disa paketa të ndryshme në varësi të varësive tona të zhvillimit:

Npm instaloni shfletuesin gulp-sync gulp-sass --save-dev

Gulp është një menaxher detyrash për kryerjen automatike të detyrave të përdorura shpesh. Do të shihni se si funksionon nëse jeni fillestar.

Brows-sync përditëson automatikisht shfletuesin tuaj për ne kur skedari ndryshon.

gulp-sass ju lejon të ndërtoni projektin tonë duke e integruar atë me sass.

--save-dev - instaloni në një dosje të veçantë. Në rastin tonë, në dosjen e projektit, domethënë në nivel lokal.

Më pas do të përdorim npm për herë të fundit për të instaluar disa paketa si varësi të rregullta të projektit:

Npm instaloni bootstrap jquery popper.js --save

bootstrap është sigurisht një paketë bootstrap.

jquery - biblioteka e skripteve java e përdorur direkt nga vetë shablloni i bootstrap

popper.js përdoret gjithashtu nga Bootstrap. Kjo ju lejon të vendosni dritare kërcyese, këshilla veglash, etj.

Tani, është koha për të hapur projektin tonë në redaktuesin e kodit. Do të përdor Sublime 3.

Ne duhet të krijojmë një dosje src për projektin tonë dhe disa nënfolderë brenda tij. Pema duket si kjo:

/src /assets /css /js /scss

Brenda /src gjithashtu krijoni 4 dosje siç tregohet më sipër.

Pastaj krijoni një skedar index.html brenda /src/ me përmbajtjen e mëposhtme:

Bootstrap 4 Layout< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>

Unë jam duke importuar fontin Raleway së bashku me FontAwesome për ikonat. Pastaj i referohem skedarit bootstrap.css dhe styles.css. Ata nuk ekzistojnë ende, por ne do t'i krijojmë ato së shpejti.

Le të krijojmë gjithashtu një skedar styles.scss brenda dosjes /src/scss/. Ne do të prezantojmë një variabël të shpejtë dhe një sërë rregullash për t'u siguruar që përpilimi Sass funksionon:

$bg-ngjyra: e kuqe; trupi ( sfondi: $bg-color; )

Në dosjen rrënjë (dosja e projektit), krijoni një skedar gulpfile.js dhe ngjisni përmbajtjen e mëposhtme:

Var gulp = kerkoj("gulp"); var browserSync = kërkoj("shfletuesi-sinkronizimi").krijoj(); var sass = kërkoj ("gulp-sass"); // Përpiloni sass në CSS dhe injektoni automatikisht në shfletues gulp.task("sass", funksion() ( return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss "]).pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); )); // Zhvendosni skedarët javascript në dosjen tonë /src/js gulp.task("js", funksion() ( return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/ jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream ()); // Server statik + shikimi i skedarëve scss/html gulp.task("serve", ["sass"], function() ( browserSync.init(( server: "./src" )); gulp.watch (["node_modules /bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload )); gulp.task ("default", ["js", "serve"]);

Unë do të përshkruaj se çfarë po ndodh këtu bazuar në detyrat e përcaktuara më sipër:

detyrë e paracaktuar - detyrë e paracaktuar. Kur futim gulp në vijën e komandës, ai i thotë që të ekzekutojë të dyja js dhe të shërbejë detyra.

Detyrë js Kjo është thjesht specifikimi i tre skedarëve të ndryshëm javascript që ruhen në dosjen node_modules që krijohet kur ekzekutojmë instalimin npm... dhe i zhvendosim në dosjen tonë /src/js. Në këtë mënyrë ne mund t'i përfshijmë ato në skedarin tonë HTML të mësipërm duke treguar /src/js në vend të dosjes node_modules.

serve task nis një server të thjeshtë dhe shikon skedarët tanë sass dhe nëse ndryshojnë, ai thërret detyrën sass. Gjithashtu bën që shfletuesi të sinkronizohet kur ruan ndonjë skedar *.html.

detyrë sass Kjo detyrë merr si skedarët sass bootstrap ashtu edhe skedarët tanë të personalizuar sass dhe i përpilon ato në CSS të rregullt dhe i ruan këta skedarë CSS në dosjen tonë /src/css

Le të ekzekutojmë gulp në vijën e komandës:

Ajo funksionon si kjo:

• Ju përdorni m për diferencë ose p për mbushje
• Pas m ose p shtoni ose: t (lart -), b (poshtë), l (majtas), r (djathtas), x (majtas dhe djathtas), y (lart dhe poshtë) ose asgjë për të 4 anët.
• Pas vizës, ju specifikoni madhësitë nga 0 në 5 (5 është numri më i madh i hapësirave).

Pra, në shembullin tonë duket se duhet ta përdorim diferencë Dhe fund për të larguar letrat poshtë.

Në kontejnerin e parë të kartës shtoni mb-4:

Tani rregulluar:

Ja se si mund t'i trajtoni lehtësisht kufijtë dhe mbushjet në Bootstrap 4.

Le të luajmë pak duke përdorur komponentë të ndryshëm të Bootstrap 4.

Puna me "Tipografi" në Bootstrap 4 Le të shtojmë një seksion poshtë 3 kolonave tona në fund të mbylljes për klasën e rreshtit, e cila do të ketë 2 kolona.

Kolona e parë do të përdorë shumicën e kolonave (8), dhe kolona e djathtë do të jetë për navigim vertikal në seksionin pas kësaj.

Një titull i rëndësishëm

Këtu mund të shkojë një lloj nëntitulli i rëndësishëm, i cili është më i madh dhe gri.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ushtrime ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud ushtrime ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

..navigacion vertikal së shpejti..

Bootstrap 4 ka një seksion Tipografie në Dokumentacionin e tij që do t'ju japë të gjitha klasat ndihmëse të bazuara në tip. Është shumë e thjeshtë. Ne përdorim .udhëheq për të theksuar nëntitullin poshtë elementit tonë h3.

Ai gjithashtu ka një seksion Text Utilities në Dokumentacionin e tij që ju jep opsione për shtrirjen e tekstit, konvertimin, kursivet dhe peshat e shkronjave.

Në portat e vogla të shikimit, le të themi se duam që lloji ynë të jetë i përqendruar në vend të paracaktuar, i cili është i rreshtuar majtas.

Kjo do të bëjë që teksti i përfshirë në div të përqendrohet në portat e vogla të shikimit dhe të lihet i rreshtuar në ato të mesme dhe më të mëdha.

Navigimi vertikal i Bootstrap 4 Ne do të shtojmë një element më shumë përpara se të hyjmë në personalizimin. Në kolonën tonë të djathtë që sapo shtuam, le të shtojmë navigimin vertikal:

Menyja dytësore

• Aktiv< /li>
• Lidhje
< li class="nav-item">Lidhje < li class="nav-item">I paaftë

Rezultati në shfletues duhet të duket si ky:

Ju gjithashtu mund ta provoni atë në porta të vogla shikimi dhe të vini re se është reaguese. Ka, sigurisht, shumë opsione të tjera që lidhen me navigimin.

Përshtatje në Bootstrap 4 Tani ne kemi një plan urbanistik mjaft standard që mund ta gjeni në shumicën e faqeve të internetit.

Për fat të mirë, Bootstrap 4 ka një sistem solid që e bën të lehtë personalizimin e elementeve të thjeshtë.

Hapni skedarin /src/scss/styles.scss dhe ngjisni sa vijon:

// Mbështetjet e variablave // ​​Bootstrap Sass Imports @import "node_modules/bootstrap/scss/bootstrap";

Sipas seksionit Theming, ju mund të zgjidhni ose të përfshini të gjithë skedarët e Bootstrap 4 sass ose të shtoni elementë individualë në varësi të nevojave tuaja. Për t'i mbajtur gjërat të thjeshta, ne thjesht do të importojmë gjithçka si më sipër.

Ndryshimi i ngjyrave të temave në Bootstrap 4 Ndoshta problemi më i zakonshëm është ndryshimi i ngjyrave.

Nëse hapni skedarin node_modules/bootstrap/scss/_variables.scss, do të vini re se në krye përmend një sistem ngjyrash. Në këtë seksion do të shihni të gjitha variablat që mund të rishkruani për t'u përshtatur me ngjyrat.

Le të ndryshojmë vetëm ngjyrën bazë, të ndryshojmë styles.scss në sa vijon:

// Variable Anulon $theme-colors: ("primary": #d95700);

Ruajeni dhe ky është rezultati:

Shume e thjeshte!

Le të ndryshojmë gjithashtu ngjyrën e sfondit:

// Variable Anulon $theme-colors: ("primary": #d95700); $body-bg: #ededed;

Tani rezultati duket si ky:

Hmm, tani seksioni ynë jumbletron (hero) duket i shëmtuar pasi ishte gjithashtu gri.

Mund të vendosim cilësime të personalizuara për elementë të caktuar duke përdorur inspektorin në chrome ose firefox, të gjejmë klasat e elementeve të lidhura që duam të ndryshojmë dhe t'i ndryshojmë në skedarin tonë styles.scss.

Në këtë rast, klasa përgjegjëse për jumbotron është .jumbotron. Le të ndryshojmë ngjyrën e sfondit dhe të shtojmë një kufi të vogël në krye për të simuluar hijen nga shiriti navigues:

// Variable Anulon $theme-colors: ("primary": #d95700); $body-bg: #ededed; .jumbotron (ngjyra e sfondit: #ffffff !rëndësishme; kufiri në krye: 3px solid rgb(219, 219, 219); )

Tani rezultati:

Përfundim Shpresoj se ju ka pëlqyer ky kurs/tutorial për Bootstrap 4. Ne kemi gërvishtur vetëm sipërfaqen e bazave dhe ka shumë më tepër që mund të mësoni. Në këtë pikë, gjithçka që ju duhet të mësoni duhet të jetë e thjeshtë, pasi tani i kuptoni bazat dhe se pothuajse gjithçka është e mbuluar në dokumentacion.

Në janar të këtij viti, Bootstrap 4 (i njohur gjithashtu si v4) u lëshua më në fund pasi u vu në versionet alfa për më shumë se dy vjet. Ai përfaqëson një rishkrim serioz të funksionalitetit. Jo vetëm që prezanton shumë ndryshime nën kapuç, Bootstrap 4 gjithashtu përmban një numër konceptesh të reja që do t'ju nevojiten për t'i mbështjellë kokën.

Prandaj, në këtë artikull, unë do të flas për ndryshimet më të rëndësishme në Bootstrap në v4 në krahasim me v3. Unë po supozoj se ju keni përdorur tashmë Bootstrap, kështu që nuk do t'i shpjegoj parimet bazë.

Tani le të shohim ndryshimet më të rëndësishme (pa rend të veçantë):

#1: Pamja e butonit

Le të fillojmë me diçka argëtuese dhe vizuale! Butonat në v4 kanë një dizajn më të sheshtë se në v3. Këtu janë butonat e mëparshëm:

Dhe këtu janë disa nga të rejat:

Kjo është më shumë në përputhje me udhëzuesit modernë të dizajnit, të tilla si udhëzuesit e Material Design që kanë fituar popullaritet të madh gjatë dy viteve të fundit.

#2: Pyetje të përmirësuara në media

Sipas mendimit tim, Boostrap v3 kishte shumë pak pika kontrolli për rrjetin, për shembull më i vogli, xs, ishte në 768 piksele. Shumë trafik sot vjen nga pajisje shumë më të vogla, dhe kjo ka qenë zhgënjyese për shumë zhvillues.

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

rrjeti $ - pikat e ndërprerjes : ( xs: 0, sm: 576 px, md: 768 px, lg: 992 px, xl: 1200 px ) ! default;

Kjo e bën të lehtë krijimin e rrjetave që funksionojnë mirë në të gjitha madhësitë e ekranit.

#3: Mbështetja e Flexbox na jep më shumë fleksibilitet

Rrjetet e famshme të Bootstrap tani krijohen duke përdorur Flexbox në vend të float. Në shikim të parë, kjo nuk bën shumë ndryshim për zhvilluesit pasi shumica e paraqitjeve të rrjetit funksionojnë saktësisht njësoj. Megjithatë, kjo hap disa mundësi të reja.

Më parë, ne duhej të përcaktonim gjerësinë e secilës kolonë (nga 1 në 12). Tani mund të përcaktoni gjerësinë e një kolone dhe më pas lejoni që Flexbox të vendosë automatikisht gjerësinë e të tjerave. Këtu është një shembull se si ta bëni këtë:

Siç mund ta shihni, ne vendosëm gjerësinë e kolonës së mesme në 6 (që është gjysma e gjerësisë së plotë) dhe kolonat e tjera thjesht zënë pjesën tjetër të hapësirës.

1 nga 3 2 nga 3 (më gjerë) 3 nga 3

< div class = "container" > < div class = "row" > < div class = "col" > 1 nga 3 < / div > < div class = "col-6" > 2 nga 3 (më gjerë) < / div > < div class = "col" > 3 nga 3 < / div > < / div > < / div >

Klasat Flexbox

Bootstrap 4 vjen gjithashtu me një sërë klasash që mund t'i përdorni për të menaxhuar kontejnerët dhe elementët Flexbox. Për ta kthyer një element në një kontejner Flexbox, thjesht jepini atij klasën d-flex.

Unë jam një enë flexbox!

< div class = "d-flex" >Unë jam një enë flexbox!< / div >

Kjo jep një enë Flexbox me tekst brenda tij:

Shënim. Unë po mbuloj vetëm stilet e lidhura me Flexbox.

Le të shtojmë disa elementë të tjerë dhe të prezantojmë një klasë tjetër për të kontrolluar se si janë pozicionuar në kontejner.

Korniza e Bootstrap 4. Fillimi i shpejtë

Mësoni bazat e Bootstrap 4 me një shembull praktik të dizajnimit të një blogu nga e para

< div >Artikull Flex< / div >

< div >Artikull Flex< / div >

< div >Artikull Flex< / div >

< / div >

Si rezultat, elementët përqendrohen në enë:

#4: Menaxhimi i dhëmbëzimit duke përdorur klasa

Është shumë e lezetshme. Tani mund të kontrolloni mbushjen dhe kufijtë duke përdorur klasat p-* dhe m-*. Mbushja mund të ndryshojë nga 0,25 në 3 rem duke përdorur numrat nga 0 në 5. Për shembull, le ta vendosim kontejnerin Flexbox në klasën p-5 për të krijuar mbushje maksimale.

Përshëndetje të gjithëve, miq! Bootstrap 3 u lëshua në mesin e vitit 2013 dhe me kalimin e viteve ka dëshmuar veten të jetë një kornizë e përshtatshme dhe e zgjeruar CSS për krijimin e shpejtë të paraqitjeve të përgjegjshme. Miliona faqe e përdorin me sukses këtë kornizë dhe ne tashmë jemi mësuar me të.

I ftohtë

Belbëzimi

Më 18 janar 2018, ndodhi një ngjarje e rëndësishme - versioni i shumëpritur i Bootstrap 4 doli nga beta, bazuar në përdorimin e modelit Flexbox për shënim, i cili aktualisht tashmë ka mbështetje për të gjithë shfletuesit modernë dhe është më i përshtatshëm dhe fleksibël. për zhvilluesit sesa modeli klasik i shënjimit i bazuar në Float. Tani mund të themi me besim të plotë se nuk është e mundur, por DUHET të shkruhet duke përdorur Flex!

Materiale shtesë mësimore Bootstrap 4

Të gjithë shembujt e mësimeve mund t'i provoni vetë: Shkarkoni arkivin

Mund të lexoni më shumë rreth dokumentacionit të Bootstrap 4 në zyrë. faqe interneti;

Fillestari i fundit duke përfshirë Bootstrap 4: OptimizedHTML 5.

Sot do të hedhim një vështrim më të afërt në punën me rrjetin Bootstrap 4, duke e krahasuar atë me versionin e vjetër gjatë rrugës. Ky mësim do të jetë i dobishëm për ju jo vetëm nëse jeni fillestar dhe po njiheni me Bootstrap, por edhe nëse jeni një zhvillues me përvojë dhe dëshironi të mësoni të gjitha rregullat dhe nuancat e paraqitjes duke përdorur rrjetin Bootstrap 4 dhe mjetet Flexbox të përfshira në atë.

1. Parametrat bazë të paracaktuar të rrjetit

Rrjeti i paracaktuar i Bootstrap 4 është shumë i ngjashëm me versionin e tretë, por ka disa dallime të rëndësishme.

Nga tabela e opsioneve kryesore, mund të vërejmë dallime të dukshme nga rrjeti i versionit të tretë. Prefiksi i klasës ".col-xs-", i cili është përgjegjës për rezolucionet më të vogla, tani është hequr, duke u zëvendësuar me një parashtesë të thjeshtuar ".col-". Ju mund të mendoni gabimisht se prefiksi ".col-" është përgjegjës për rezolucionet minimale të pajisjeve celulare, por kjo nuk është plotësisht e vërtetë. Ndër të tjera, prefiksi ".col-" është një nga risitë më të rëndësishme në Bootstrap 4. Kjo është një klasë që është përgjegjëse për vendosjen automatike të kolonave në çdo rezolutë. Por më shumë për këtë më vonë.

Për rezolucione të vogla, prefiksi ".col-sm-" me një pyetje mediatike prej 576 pikselësh është përgjegjës. Gjerësia e kontejnerit është 540 px. Rezolucionet mesatare fillojnë nga 768 piksele. Gjerësia e kontejnerit - 720 px. Rezolucionet më të larta funksionojnë me rezolucionet e pajisjes prej 992 piksele ose më shumë. Gjerësia e kontejnerit - 960 px. Dhe më të mëdhenjtë - nga 1200 piksele. Gjerësia e kontejnerit është fiksuar në 1140 px.

Vini re se vlerat maksimale të pyetjeve mediatike kanë vlera të pasakta me pjesën fraksionale ".98" në pixel. Kjo vihet re kur zgjedh metodën e paraqitjes së Desktop First, ku gjerësia maksimale e pyetjes së medias është e kufizuar. Për shembull, kur përpilojmë Sass "+media-breakpoint-down(lg)" do të marrim "@media (max-width: 1199.98px)". Këtu lirohen 0,02 pikselë për të nisur pyetjen tjetër të medias. Mbani parasysh këtë. Në numrat e ardhshëm të "Jedi Layout 8" do të shikojmë këtë dhe shumë pika të tjera nga ky mësim duke përdorur një shembull real.

2. Paraqitja automatike e kolonës 2.1 Kolonat me të njëjtën gjerësi

Duke përdorur klasën e re gjenerike ".col", mund të specifikoni deri në 12 kolona në një rresht (prind i ".row"), gjerësia e të cilave do të llogaritet automatikisht në varësi të numrit të elementeve dhe do të jetë e barabartë.

Për shembull:

2.2 Vendosja e gjerësisë së një kolone

Ju gjithashtu mund të vendosni në mënyrë eksplicite gjerësinë e një kolone dhe ta lini pjesën tjetër automatike.

1 nga 3 2 nga 3 (gjerë) 3 nga 3 1 nga 3 2 nga 3 (gjerë) 3 nga 3

Në këtë shembull, elementi i dytë në rreshtin e tretë ka klasën ".col-6" dhe elementi i dytë në rreshtin e dytë ka klasën ".col-5", të cilat zënë numrin përkatës të kolonave në të gjitha rezolucionet e ekranit. Gjerësia e kolonave të mbetura është reaguese dhe llogaritet automatikisht, duke zënë të gjithë hapësirën e mbetur.

2.3 Përmbajtja me gjerësi të ndryshueshme

Ju mund të përdorni klasën "col-(breakpoint)-auto" për të përcaktuar përmbajtjen me një gjerësi të ndryshueshme, në varësi të hapësirës së zënë nga përmbajtja e kolonës. Ku pika e ndërprerjes është madhësia e ekranit (xl, lg, md ose sm).

1 nga 3 Përmbajtja me gjerësi të ndryshueshme 3 nga 3 1 nga 3 Përmbajtja me gjerësi të ndryshueshme Numri dy 3 nga 3

Këtu shohim se dy kolonat qendrore zënë një gjerësi që korrespondon me gjerësinë e përmbajtjes, por në rreshtin e parë, falë klasës ".justify-content-sm-center" të ".row", i gjithë rreshti është në qendër. dhe gjerësia totale varet vetëm nga gjerësia e kolonës qendrore, ndërsa rreshti i dytë shtrihet në gjerësinë e plotë të disponueshme, por kolona e dytë mbetet e fiksuar në gjerësinë e përmbajtjes.

2.4 Shumë rreshta

Falë Bootstrap 4, ju mund të krijoni linja të shumta (vizore) në një rresht. Kjo mund të zbatohet duke përdorur klasën ".w-100", e cila është shumë e ngjashme me etiketën "br" dhe në thelb thjesht mbështjell kolonat në një linjë të re.

col col col col col

Ju lutemi vini re se kjo klasë është pjesë e shtesave të Bootstrap 4 që përfshihen veçmas në projekt nëse jeni duke përdorur versionin Sass të projektit Bootstrap dhe gjenden në dosjen "scss/utilities". Ju gjithashtu mund të lidhni shtojca të tjera nga kjo dosje me projektin tuaj sipas nevojës. 3. Klasat adaptive 3.1 Pikat e ndërprerjes

Një veçori shumë interesante e Bootstrap 4 është aftësia për të vendosur kolona universale që do të shfaqen në të gjitha rezolucionet. Kjo është klasa ".col" e përmendur më parë. Përveç kësaj, ju mund të përcaktoni një klasë që tregon numrin specifik të kolonave që do të zërë përmbajtja - këto janë klasa me prefiksin ".col-(numri i kolonave)", për shembull ".col-6" na tregon se përmbajtja do të zërë 6 kolona nga 12. Në rastet kur nuk është e nevojshme të specifikoni një sasi specifike, mund të përdorni me siguri klasën universale “.col”.

col col col col col-8 col-4

3.2 Në pajisjet celulare

Ju mund të përdorni prefiksin e klasës ".col-sm-(numri i kolonave të zëna)" për të përcaktuar rrjetin bazë fare, përveç rezolucioneve më të vogla. Në ekranet e vogla, kolonat e një rrjeti të tillë do të grumbullohen nën njëra-tjetrën. Më shumë për lejet - ato do të zënë aq hapësirë ​​sa keni përcaktuar në klasa.

col-sm-8 col-sm-4 col-sm col-sm col-sm

Këtu shohim se rreshti i parë në pajisjet me një rezolucion prej më shumë se "sm", domethënë më shumë se 576 piksele. ndahet në 2 kolona - përkatësisht 8 dhe 4 nga 12 të gjera. Gjerësia e kolonave në rreshtin e dytë llogaritet automatikisht, por në rezolucionet më të vogla këto kolona grumbullohen gjithashtu njëra nën tjetrën, falë klasës ".col-sm".

3.3 Krijimi i një rrjete komplekse të kombinuar

Me Bootstrap mund të krijoni çdo kombinim kolonash kur krijoni një rrjet. Për secilën kolonë, mund të vendosni çdo sjellje në rezolucione të ndryshme duke përdorur klasa adaptive. Këtu ndryshimet nga versioni i tretë janë vetëm në emrat e klasave.

.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .kol-6 .kol-6

4. Rreshtimi

Bootstrap 4 bazohet në "flex" dhe na jep të gjitha tiparet e këtij modeli, të cilat janë të disponueshme në klasa të thjeshta të gatshme. Mundësitë përfshijnë shtrirjen vertikale dhe horizontale.

4.1 Shtrirje vertikale Sipër Sipër Sipër Mesme Mesme Poshtë Poshtë Poshtë

Përveç kontrollit të shtrirjes përmes ".row" prindëror, ju mund të rreshtoni kolonat duke u dhënë atyre klasat e duhura:

Sipër fundi i mesëm

4.2 Shtrirja horizontale

Përveç kësaj, Bootstrap 4 ka mjete për shtrirjen horizontale të kolonave duke përdorur parashtesën ".justify-content-" në ".row".

rresht justify-content-start rresht justify-content-start rresht justify-content-center rresht justify-content-centre justify-content-end justify-content-end justify-content-rreth justify-content-rreth justifikoj-përmbajtjen-ndërmjet justifikoj -përmbajtja-ndërmjet

4.3 Heqja e kufijve midis kolonave

Shumë shpesh ka situata kur është e nevojshme të hiqen kufijtë midis kolonave. Për shembull, nëse po krijoni një galeri dhe elementët duhet të vendosen afër njëri-tjetrit, si kjo:

Për ta bërë këtë, thjesht vendosni klasën shtesë ".no-gutters" në elementin ".row".

col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md -4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col -md-4 col-6 col-sm-4 col-md-4

4.4 Zhvendosja e kolonave në një rresht të ri

Nëse një rresht (. rresht) është i mbushur me një numër total kolonash prej më shumë se 12, kolona tjetër zhvendoset në një rresht të ri.

.col-9 .col-4
9 + 4 = 13 kolona - kjo është më shumë se 12. Ky element, me gjerësi 4 kolona, ​​do të zhvendoset në një rresht të ri. .kol-6
Kolonat e mëposhtme do të vendosen përgjatë vijës.

Gjithçka këtu është e njëjtë si në versionin 3 të Bootstrap. 5. Rendi i elementeve 5.1 Klasat e renditjes së elementeve

Ju mund të përdorni klasa speciale me prefiksin ".order-" për të përcaktuar renditjen e elementeve. Nëse jeni të njohur me Flex-layout, këto rregulla do të jenë të njohura për ju. Bootstrap 4 ju jep mundësinë për të vendosur rendin e elementeve duke përdorur klasa. Ju mund ta vendosni porosinë drejtpërdrejt (.order-1.order-md-2):

Elementi i parë i parregulluar

Ose mund të përdorni klasa speciale që përcaktojnë rendin e elementeve të parë dhe të fundit (.order-first, .order-last):

E para e parenditur E dyta, e renditur si e fundit E treta, e renditur si e para

5.2 Kompensimi i kolonës

Për analogji me Bootstrap 3, versioni 4 ka gjithashtu aftësinë për të zhvendosur horizontalisht kolonat, por kjo zbatohet disi ndryshe dhe ka klasa të veçanta për këtë me prefiksin ".offset-".

5.2.1 Klasat e zhvendosjes

Ju mund ta zhvendosni një kolonë djathtas duke përdorur klasat “.offset-md-*”, të cilat rrisin dhëmbëzimin e majtë me * numrin e elementeve. Nga shembulli më poshtë, klasa ".offset-md-2" do të zhvendosë kolonën ".col-md-4" 2 kolona në të djathtë, pjesa tjetër e shembujve funksionojnë në të njëjtën mënyrë:

.col-md-4 .col-md-4 .offset-md-4 .col-md-3 .offset-md-3 .col-md-3 .offset-md-3 .col-md-6 .offset -md-3

Mund të rivendosni kompensimin në të gjitha rezolucionet falë klasës ".offset-*-0", ku * është sm, md, lg ose xl. 6. Folezimi

Është mjaft e pritshme që Bootstrap 4 të mbështesë folenë e elementeve. Gjithçka këtu funksionon njësoj si në versionin e tretë - për të futur kolonat brenda të tjerëve, duhet të krijoni një ".row" të klasës së fëmijës dhe të vendosni kolona në të.

Niveli 1: ".col-sm-9" Niveli 2: ".col-8 .col-sm-6" Niveli 2: ".col-4 .col-sm-6"

Ne shikuam tiparet kryesore të punës me rrjetin Bootstrap 4 Nëse dëshironi të njiheni më shumë me të gjitha aftësitë e kornizës, ju rekomandoj të studioni dokumentacionin në faqen zyrtare.

Në mësimin tjetër, ne do të shikojmë konfigurimin e rrjetit Bootstrap për projektin tuaj specifik duke përdorur shembullin e përdorimit të OptimizedHTML 4 në shabllonin fillestar, domethënë, konfigurimin, punën me variablat e indenteve, pikat e ndërprerjes, numrin e kolonave dhe gjëra të tjera.