Bootstrap 4 ar redaktora apmācību. Elementu secības klases

Raksts, kurā analizēsim Bootstrap 4 režģi, kas tiek izmantots, lai izveidotu adaptīvu vietņu izkārtojumu.

Režģa mērķis

Bootstrap 4 režģa ietvars ir paredzēts adaptīvu vietņu izkārtojumu izveidei.

Bootstrap 4 režģis ir balstīts uz CSS Flexbox un CSS multivides vaicājumiem. To izpēte ļaus sīkāk izprast, kā darbojas Bootstrap 4 režģis.

Adaptīvais izkārtojums ir izkārtojums, kas var mainīt savu izskatu atkarībā no pārlūkprogrammas galvenā apgabala (skata porta) platuma. Tas nozīmē, ka dažos skata loga platumos adaptīvais izkārtojums var izskatīties vienā virzienā, bet citos tas var izskatīties pavisam savādāk.

Programmā Bootstrap 4 izkārtojuma izskata maiņa tiek īstenota, izmantojot multivides vaicājumus. Katrs multivides pieprasījums programmā Bootstrap ir balstīts uz pārlūkprogrammas skata porta minimālo platumu (pārtraukuma punkts, pārtraukuma punkts, ierīces nosaukums).

Bootstrap 4 ietvarā ir 5 pārtraukuma punkti vai ierīču nosaukumi (bez etiķetes, sm, md, lg, xl), un tāpēc tas ļauj izveidot izkārtojumu, kas katrā no tiem var izskatīties atšķirīgi.

Programmā Bootstrap 4, salīdzinot ar Bootstrap 3, ir mainīts pārtraukuma punktu skaits. Programmā Bootstrap 3 tie bija četri: xs, sm, md un lg.

Režģa elementi

Bootstrap 4 režģis sastāv no šādiem elementiem:

• Iesaiņošanas konteineri (konteiners un konteiners-šķidrums);
• Rindas (rinda);
• Adaptīvie bloki (col).

Aptiniet konteinerus

Aptinuma konteiners ir Bootstrap 4 režģa elements, no kura sākas adaptīvas lapas vai bloka izkārtojuma izveide. Tajā jāievieto citi režģa elementi (rindas un adaptīvie bloki).

Bootstrap 4 ir 2 veidu konteineru iesaiņojumi: reaģējoši-fiksēti un reaģējoši-fluid.

Adaptīvi fiksēta konteinera HTML marķējums:

...

Adaptīvā gumijas konteinera HTML marķējums:

...

Pirmais (responsīvi fiksētais) konteiners tiek izmantots, ja ir jāizveido izkārtojums ar platumu, kuram ir jāpaliek nemainīgam noteiktā pārlūkprogrammas skata porta platumā.

Adaptīvi fiksēta konteinera platuma atkarība no pārlūkprogrammas skata loga platuma ir parādīta tabulā:

Tas nozīmē, ka adaptīvi fiksētam konteineram būs:

• 100% platums skata loga platumam līdz 576 pikseļiem;
• 540 pikseļi ar skata loga platumu no 576 līdz 768 pikseļiem;
• 720 pikseļi ar skata loga platumu no 768 līdz 992 pikseļiem utt.

Horizontālā virzienā fiksēts reaģējošais konteiners ir novietots centrā, tas tiek darīts bootstrap.css, izmantojot CSS rekvizītus margin-left: auto un margin-right: auto .

Otro (responsīvo gumijas) konteineru izmanto, ja nepieciešams izveidot pilnīgi elastīgu lapas vai kāda bloka izkārtojumu. Šim konteineram ir 100% platums jebkuram skata loga platumam.

Turklāt iesaiņojuma konteineriem (konteiners un tvertnes šķidrums) ir arī iekšējais polsterējums kreisajā un labajā pusē 15 pikseļi. Polsterējuma iestatīšana konteineru iesaiņošanai tiek veikta Bootstrap 4 CSS failā, izmantojot rekvizītus polsterējums-left: 15px un padding-right: 15px.

Veidojot izkārtojumu, izmantojot Bootstrap 4 režģi, neievietojiet iesaiņojuma konteinerus citos.

Rindas

Rinda ir īpašs režģa elements (rinda), ko izmanto, veidojot izkārtojumu šādos gadījumos:

• starp konteineru un adaptīvajiem blokiem, kas tajā jāievieto;
• starp vienu un citiem adaptīvajiem blokiem, kas jāievieto pirmajā adaptīvajā blokā.

Rindas HTML marķējums:

...

Atšķirībā no Bootstrap 3, kurā rinda darbojās tikai, lai kompensētu iesaiņojuma konteineru vai reaģējošo bloku kreiso un labo iekšējo polsterējumu, Bootstrap 4 tai ir ļoti svarīga loma. Tas ir saistīts ar faktu, ka šis režģis ir veidots uz CSS Flexbox. Šajā režģī tas darbojas kā elastīgs konteiners elastīgiem elementiem (adaptīviem blokiem). Tie. ja izmantosit adaptīvos blokus ārpus rindas, tie nedarbosies. Programmā Bootstrap 4 atsaucīgajiem blokiem ir jāatrodas blokā ar rindu klasi.

Piemales iekšējās polsterēšanas kompensācija tiek veikta tāpat kā Bootstrap 3, jo negatīvās kreisās un labās piemales ir vienādas ar 15 pikseļiem (margin-left:-15px un margin-right:-15px).

Piemērs, kā tiek kompensēts lauka polsterējums:

konteiners (+15 pikseļi) -> rinda (-15 pikseļi) -> kolonna (+15 pikseļi) -> satura konteinera šķidrums (+15 pikseļi) -> rinda (-15 pikseļi) -> kolonna (+15 pikseļi) -> rinda (-15 pikseļi) -> kolonna (+15 pikseļi) -> saturs

Rezultātā robeža no iesaiņojuma konteinera kreisās un labās malas līdz saturam vienmēr būs 15 pikseļi.

Turklāt adaptīvie bloki, kas loģiski nav saistīti viens ar otru, nav jāliek vienā rindā kaut kāda iesaiņojuma konteinera vai cita adaptīva bloka ietvaros. Pareizākais veids ir tos sadalīt atsevišķās loģiskās grupās un katru no tām ievietot atsevišķā rindā.

Piemēram:

... … … … ...

Adaptīvie bloki

Adaptīvie bloki ir adaptīvā izkārtojuma galvenie elementi, kas noteiks, kā tīmekļa lapas izkārtojums izskatīsies dažādos kontroles punktos (bez simbola, sm, md, lg un xl).

Adaptīvā bloka izveide ir ļoti vienkārša: pievienojot vienu vai vairākas klases col-?-? uz nepieciešamo HTML elementu.

Kol-?-?> klasē pirmās jautājuma zīmes vietā norāda kontrolpunkta nosaukumu: bez apzīmējuma, sm, md, lg vai xl. Otrās jautājuma zīmes vietā ir norādīts adaptīvā bloka platums, kuram tam jābūt norādītajā kontrolpunktā. Adaptīvā bloka platums ir norādīts relatīvā formā, izmantojot skaitli no 1 līdz 12 (sāknēšanas kolonnas).

Šis skaitlis nosaka, cik lielu daļu platuma adaptīvais bloks aizņems norādītajā kontroles punktā no vecākbloka platuma, t.i. rinda. Rindas platums skaitliskā izteiksmē (Bootstrap kolonnas) ir 12.

Piemēram, bloks ar klasi col-md-4 kontrolpunktā md aizņems 4/12 no rindas platuma, t.i. 33,3% (t.i., 4/12*100% = 33,3%).

Adaptīvajiem blokiem, kā arī konteineriem ir 15 pikseļu kreisais un labais polsterējums. Šie Bootstrap 4 struktūras adaptīvo bloku polsterējumi ir iestatīti, izmantojot CSS rekvizītus polsterējums-left: 15px un padding-right: 15px.

Adaptīvie bloki ir jāievieto rindā. Tie. Jebkuram adaptīvajam blokam ir jābūt blokam ar klases rindu kā vecāku.

Piemēram, apsveriet, cik plats būs šāds atsaucīgais bloks katrā ierīcē:

...

Šim adaptīvajam blokam būs:

• līdz sm (par xs) platums, kas vienāds ar 12 Bootstrap kolonnām (t.i., 12/12*100%=100% no rindas platuma);
• sm ierīcē platums, kas vienāds ar 9 Bootstrap kolonnām (t.i., 9/12*100%=75% no rindas platuma);
• md ierīcē platums, kas vienāds ar 7 Bootstrap kolonnām (t.i., 7/12*100%=58,3% no rindas platuma);
• lg ierīcē platums, kas vienāds ar 5 Bootstrap kolonnām (t.i., 5/12*100%=41,6% no rindas platuma);
• xl ierīcē platums, kas vienāds ar 3 Bootstrap kolonnām (t.i., 3/12*100%=25% no rindas platuma).

Turklāt, norādot adaptīvā bloka platumu kādam kontrolpunktam, tas attieksies ne tikai uz šo punktu, bet arī uz visiem nākamajiem, ja tie nav norādīti.

Adaptīvā bloka platums md un lg ierīcēs būs vienāds ar 6 Bootstrap kolonnām: (12) -> sm(6) -> md -> lg -> xl(3) .

Adaptīvā bloka platums sm ierīcē būs vienāds ar 8 Bootstrap kolonnām, savukārt lg un xl ierīcēs tā platums būs vienāds ar 4 Bootstrap kolonnām: (8) -> sm -> md(4) -> lg - > xl.

Responsīvā bloka platums visās ierīcēs būs vienāds ar 6 Bootstrap kolonnām: (6) -> sm -> md -> lg -> xl .

Adaptīvie bloki bez kolonnām

Speciālās klases col , col-sm , col-md , col-lg , col-xl , col-auto , col-sm-auto , col-md-auto , col-lg-auto un col-xl ir pievienotas. Bootstrap 4 grid -auto .

Pirmā klašu grupa (col, col-sm, col-md, col-lg, col-xl) paredzēta adaptīvu bloku izveidošanai, kuru platums būs atkarīgs no rindas brīvās vietas. Līnijas neaizņemtais platums (brīvā vieta) tiek vienmērīgi sadalīts starp visiem šādiem blokiem. Turklāt šiem adaptīvajiem blokiem ir nulles platums pirms brīvas rindiņas vietas piešķiršanas (pēc noklusējuma).

Apskatīsim dažus piemērus.

1. Izveidojiet 5 adaptīvus blokus ar vienādu platumu pēc kārtas.

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

Platuma aprēķins:

• brīva rindas telpa - 100% (jo to platums ir 0);
• katra adaptīvā bloka platums ir 20% (100%/5);

2. Bloku platums ar klasi col, ja ir adaptīvs bloks ar kolonnu skaitu rindā.

? 7 kolonnas? ?

Platuma aprēķins:

• brīva rindas telpa - 41,67% ((12-7)/12*100%);
• katra adaptīvā bloka platums, izņemot kolonnu-7, ir 13,89% (41,67%/3).

Dažās Safari pārlūkprogrammu versijās, izmantojot šādu marķējumu, to var sadalīt vairākās rindās.

Ir 2 veidi, kā to novērst:

• iestatot adaptīvos blokus border.col ( apmale: 1px cieta caurspīdīga; )
• piešķirot adaptīvajiem blokiem CSS rekvizītu flex-basis .col ( flex: 1 0 20%; )

Turklāt Bootstrap 4 režģis ļauj izvietot atsaucīgus blokus, nenorādot kolonnu skaitu vairākās rindās.

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

Šī darbība tiek veikta, pievienojot tukšu div elementu ar klasi w-100 marķējumam pirms adaptīvā bloka, kuram jāsākas ar jaunu rindiņu.

Ja šī darbība ir jāizmanto tikai dažiem kontroles punktiem, jums ir jāpievieno arī Bootstrap 4 reaģējošās utilītas klases (klase w-100).

Šajā piemērā adaptīvie bloki tiks pārsūtīti uz jaunu rindu tikai ierīcēs ar niecīgu vai mazu skata logu.

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

Otrā klašu grupa (col-auto, col-sm-auto, col-md-auto, col-lg-auto un col-xl-auto) ir paredzēta adaptīvo bloku izveidošanai, kuru platums tiks noteikts saskaņā ar to saturu.

Piemēram:

(1) (2) - platums md, lg un xl kontrolpunktos tiks noteikts, pamatojoties uz saturu (3)

Rezultātā:

• uz xs un sm adaptīvie bloki atradīsies vertikāli (viens zem otra) un aizņems visu rindas platumu;
• uz md atsaucīgajam blokam 2 būs platums, kas nepieciešams tā satura attēlošanai; ja 2. bloks neaizņem visu rindas platumu, tad adaptīvie 1. un 3. bloki to savā starpā sadalīs vienādi; ja 2. bloks aizņem visu līnijas platumu, tad attēls būs tāds pats kā kontrolpunktos xs un sm;
• lg un xl adaptīvajam blokam 2 būs platums, kas nepieciešams tā satura attēlošanai; ja 2. bloks neaizņem visu rindas platumu, tad 3. bloks aizņems platumu, kas vienāds ar 2 Bootstrap kolonnām, un 1. bloks aizņems visu atlikušo rindas platumu; ja 2. bloks aizņem visu rindas platumu, tad marķējums būs tāds pats kā xs un sm, tikai 3. blokam uz 3 rindām būs platums, kas vienāds ar 2 Bootstrap kolonnām.

Adaptīvo bloku izkārtojums pēc kārtas

Pēc noklusējuma adaptīvie bloki rindā ir sakārtoti horizontālās līnijās. Horizontālajā līnijā adaptīvie bloki ir sakārtoti secīgi no kreisās puses uz labo. Adaptīvie bloki, kuru kopējais kolonnu skaits nepārsniedz 12, var ietilpt vienā horizontālā rindā Adaptīvie bloki, kas neietilpst pašreizējā rindā, pāriet uz nākamo.

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

Apskatīsim citu piemēru, kurā adaptīvajiem blokiem dažādos vadības punktos ir atšķirīgs platums:

Izkārtojuma izkārtojuma pamatprincips

Tīmekļa lapas izkārtojuma izkārtojuma Bootstrap 4 režģī pamatprincips ir iekļaut dažus adaptīvos blokus citos.

Tajā pašā laikā adaptīvo bloku platums vienmēr ir relatīva vērtība, kas tiek iestatīta Bootstrap kolonnās un ir atkarīga tikai no vecāku platuma, t.i. rinda.

Tīmekļa lapas saturs ir jāievieto tikai atsaucīgos blokos.

Piemēram, esošajā izkārtojumā, proti, adaptīvajā blokā col-8, mēs pievienosim vēl 2 blokus:

... ...

Lai to izdarītu, blokā col-8 vispirms ir jāievieto rinda (konteiners adaptīvajiem blokiem):

... ... Bootstrap 4 — rindas ievietošana adaptīvā bloka col-8 saturā

Pēc tam pievienojiet 2 adaptīvos blokus pēc kārtas:

... ... ... Bootstrap 4 — reaģējošu bloku ievietošana pēc kārtas

Adaptīvo bloku izlīdzināšana

Adaptīvo bloku izlīdzināšana horizontālā un vertikālā virzienā tiek veikta Bootstrap 4, izmantojot utilīta elastības klases.

Adaptīvo bloku vertikālā izlīdzināšana

Adaptīvo bloku vertikālā izlīdzināšana rindas rindā tiek veikta, izmantojot vienu no šīm klasēm, kuras rindai papildus jāpievieno:

• align-items-start (attiecībā pret rindas sākumu);
• align-items-center(centrs);
• align-items-end (attiecībā uz beigām).

Piemēram, izlīdzināsim visus adaptīvos blokus rindas līnijas centrā:

1/2 2/2

Pēc noklusējuma atsaucīgie elementi aizņem visu rindas līnijas augstumu, kurā tie atrodas.

Konkrēta adaptīvā bloka vertikālo izlīdzināšanu līnijā var veikt viena no šīm klasēm:

• align-self-start (attiecībā pret līnijas sākumu);
• align-self-center (centrs);
• align-self-end (attiecībā uz beigām).

Šīs klases jāpievieno adaptīvajiem blokiem, nevis rindai.

Piemēram, mēs izlīdzinām adaptīvo bloku 2 ar līnijas apakšējo malu:

(1) (2)

Adaptīvo bloku horizontālā izlīdzināšana

Adaptīvo bloku izlīdzināšanai horizontālā virzienā ir paredzētas šādas klases:

• justify-content-start (attiecībā pret rindas rindas sākumu - noklusējuma);
• justify-content-center (centrs);
• justify-content-end (attiecībā pret rindas beigām);
• justify-content-around (vienmērīgi, ņemot vērā atstarpi pirms pirmā un pēdējā adaptīvā bloka);
• justify-content-starp (vienmērīgi, ar vienādu atstarpi starp atsaucīgajiem blokiem).

Piemēram, vienmērīgi sadalīsim adaptīvos blokus horizontālā virzienā:

(1) (2)

Adaptīvs bezmalu izkārtojums

Adaptīvo bloku iekšējo polsterējumu un rindu ārējās negatīvās piemales var noņemt, ja pēdējai (t.i., rindai) tiek pievienota klase bez notekas.

... ... ...

Lūdzu, ņemiet vērā, ka šī klase (bez notekas) ietekmē tikai adaptīvos blokus, kas ir tieši ievietoti šajā rindā. Tie. CSS rekvizīti polsterējuma noņemšanai netiks piemēroti adaptīvajiem blokiem, kuriem šī rinda nav norādīta kā vecākrinda.

Programmā Bootstrap 4 adaptīvās bloku nobīdes var veikt, izmantojot:

• klašu nobīde (noteiktam kolonnu skaitam);
• pakalpojumu (komunālo pakalpojumu) maržas klases.

kompensācijas klases

Nobīdes klases ir paredzētas, lai adaptīvos blokus pārvietotu pa labi par noteiktu kolonnu skaitu.

Šīm klasēm ir šāda sintakse:

Nobīde-(1) vai nobīde (pārtraukuma punkts)-(1)

(pārtraukuma punkts) – kontrolpunkts, no kura šim blokam tiks piemērota nobīde (ja tā nav norādīta, tad nobīde tiks piemērota sākot no mazākajām ierīcēm).

(2) – nobīdes vērtība, kas norādīta, izmantojot Bootstrap kolonnu skaitu.

Kā piemēru iestatīsim nobīdi adaptīvajiem blokiem, kā parādīts attēlā.

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

Nobīde, izmantojot maržu klases

Ceturtajā Bootstrap versijā varat iestatīt arī adaptīvo bloku nobīdi, izmantojot piemales atkāpes (margin-left: auto un (vai) margin-right: auto). Šī nobīdes opcija rodas tāpēc, ka režģis jaunajā Bootstrap (4) versijā ir balstīts uz CSS Flexbox.

Šī pārvietošanas opcija (izmantojot piemales klases) tiek izmantota, ja bloki ir jāpārvieto viens pret otru par kādu mainīgu lielumu.

Programmā Bootstrap 4, lai ērtāk un adaptīvāk iestatītu piemales atkāpes blokiem (margin-left: auto un (vai) margin-right: auto), varat izmantot klases ml-auto , mr-auto , ml-(breakpoint )-auto un mr-( breakpoint)-auto .

Bootstrap 4 — atsaucīga bloka nobīde

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

Adaptīvo bloku vizuālās secības maiņa

Pēc noklusējuma adaptīvie bloki tiek vizuāli parādīti tādā secībā, kādā tie atrodas HTML kodā.

Responsīvā bloka vizuālās secības maiņa programmā Bootstrap 4 tiek veikta, izmantojot klasi order-(vizuālais_numurs). Šī klase ir paredzēta xs kontrolpunktam. Ja elementa secība ir jānosaka nevis kontrolpunktam xs, bet gan sm, md, lg vai xl, tad tiek izmantota šāda šīs klases versija:

Pasūtījums-(pārtraukuma punkts)-(vizuālais_numurs)

Vārda (vizuālais_skaitlis) vietā jānorāda skaitlis no 1 līdz 12.

Šis skaitlis nosaka, kā elementi vizuāli parādīsies lapā. Proti, visi adaptīvie elementi vizuāli sekos šo skaitļu augošā secībā. Ja elementam nav iestatīta secības klase, tā noklusējuma vērtība ir 0.

Piemēram, mainīsim divu adaptīvo bloku secību:

Pirmais (nav pasūtīts, bez pasūtījuma klases) Otrais, bet tiks parādīts pēdējais Trešais, bet tiks parādīts otrais

Vēl viens piemērs (izmantojot adaptīvās secības klases):

Pirmais (uz xs sm tiks parādīts otrais) Otrais (uz xs vispirms tiks parādīts sm)

Papildus cipariem (no 1 līdz 12 pēc noklusējuma) varat izmantot arī vārdus pirmais un pēdējais . Šīs klases (order-first, order-(breakpoint)-first, order-last, order-(breakpoint)-last) ļauj vizuāli pārvietot elementu attiecīgi uz sākumu vai beigām.

Pirmās klases un secības (pārtraukuma punkts) pirmās klases iedarbojas, iestatot elementa CSS secības rekvizītu uz -1 (kārtība: -1), un klases secība-pēdējā un secība-pārtraukuma punkts iestata CSS. pasūtiet īpašumu uz vērtību 13 (kārtība: $kolonnas + 1).

Pārrakstīsim iepriekš minēto piemēru, izmantojot pasūtījumu klases, kurās tiek izmantots pirmais un pēdējais atslēgvārds:

Pirmais (uz xs, sm tiks parādīts pēdējais) Pēdējais (uz xs, sm tiks parādīts pirmais)

Piemērs, kurā izmantotas secības klases ar skaitli un vārdiem pirmais un pēdējais:

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

Adaptīvā izkārtojuma piemērs Boostrap 4 režģī

Izveidosim adaptīvu izkārtojumu attēlā redzamajam tīmekļa lapas blokam, izmantojot Bootstrap 4 režģi – adaptīvā bloka izkārtojuma piemērs

1. Izveidojiet bloku marķējumu mobilajām ierīcēm (xs).

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

2. Iestatiet sm kontroles punkta marķējumu:

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

3. Iestatiet blokiem to kolonnu skaitu, kas tiem ir jābūt md un lg ierīcēs:

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

4. Izveidojiet marķējumu priekš xl:

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

Mēs noņemam nevajadzīgos kontroles punktus no adaptīvajiem blokiem:

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

Turklāt sākotnēji Bootstrap 4 reaģējošā bloka platums ir 100%. Tas ļauj nenorādīt kolonnu skaitu, veidojot adaptīvos blokus, ja to sākotnējam platumam jābūt 12 kolonnas (100%).

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

Pamatojoties uz GitHub zvaigžņu skaitu.

Ja vēlaties apgūt Bootstrap, jo īpaši tā jaunāko, ceturto versiju, tad šis materiāls ir sagatavots īpaši jums. Šeit, izmantojot nelielu pilnīgu piemēru, ko patiešām var apgūt pusstundas laikā, tiks demonstrēti Bootstrap pamati, kurus sapratīsit, izmantojot šo ietvaru, varēsiet kaut ko darīt pats.

Priekšnoteikumi Šis materiāls ir paredzēts iesācējiem tīmekļa izstrādātājiem, kuriem ir pamatzināšanas par HTML, CSS un jQuery.

Šeit ir vienas lapas vietne, par kuras izveidi mēs runāsim, izmantojot Bootstrap.

Gatavs projekts, kas izveidots, izmantojot Bootstrap

Npm instalējiet bootstrap
Bootstrap var savienot ar lapu, izmantojot satura piegādes tīklu. Lai to izdarītu, pievienojiet tagam šādu saiti:

Jaunāko Bootstrap versiju var lejupielādēt no šejienes un izmantot lokāli.

Projekta struktūrai vajadzētu izskatīties šādi.

Projekta struktūra Par Bootstrap 4 iespējām Pirmā stabilā Bootstrap 4 versija tika izlaista šī gada janvāra beigās. Bootstrap tagad ietver dažas interesantas funkcijas, kuras nebija tās iepriekšējā versijā. Proti, ja mēs runājam par uzlabojumiem un izmaiņām, mēs varam atzīmēt sekojošo:

• Bootstrap 4 tika pārrakstīts, izmantojot flexbox tehnoloģiju, savukārt Bootstrap 3 izmantoja peldošo tehnoloģiju. Ja neesat pazīstams ar flexbox, apskatiet šo resursu.
• Bootstrap 4 CSS izmanto rem vienības, turpretim iepriekš tika izmantotas pikseļu vienības. jūs varat uzzināt, kā tie atšķiras.
• Daži komponenti, piemēram, paneļi, ir noņemti. Jūs varat atrast detalizētu informāciju par Bootstrap 4 veiktajām izmaiņām.

Patiesībā Bootstrap 4 ir daudz jaunu lietu, salīdzinot ar Bootstrap 3, ja jums tas ir nepieciešams, varat iepazīties ar šiem jauninājumiem. Tagad mēs sākam strādāt pie mūsu izglītības projekta Bootstrap Grid System ir paredzēta lapu izkārtojumu izveidei. Tas atvieglo responsīvu vietņu izstrādi. Jaunajā Bootstrap versijā klašu nosaukumi nav mainījušies (jāpiebilst, ka class.xs vairs nepastāv).

Režģis ir sadalīts 12 kolonnās, šī struktūra, kas konfigurēta atbilstoši izstrādātāja vajadzībām, ir lapas izkārtojuma pamatā.

Lai izmantotu Bootstrap režģi, lapas galvenajam elementam jāpievieno klase .row. Iestatot ligzdoto elementu izmērus, tiek izmantotas šādas klases (zvaigznītes vietā klases nosaukuma beigās tiek norādīts 12 kolonnu pamata režģa kolonnu skaits, ko konkrētajam elementam vajadzētu aizņemt):

• col-lg-* - klase, ko izmanto lapām, kas paredzētas liela ekrāna ierīcēm, piemēram, klēpjdatoriem;
• col-md-* - klase lapām, kas paredzētas vidēja izmēra ekrāna ierīcēm, piemēram, planšetdatoriem;
• col-sm-* — klase lapām, kas paredzētas maziem ekrāniem, piemēram, viedtālruņos.

Navigācijas josla Navigācijas joslas programmā Bootstrap tiek izveidotas, izmantojot .navbar klasi. Faktiski tas ir iesaiņojums, kurā tiek ievietoti elementi, kas veido navigācijas joslu. Zemāk ir panelis, kuru mēs tagad izveidosim. Tas atrodas lapas augšdaļā un, ritinot, nepazūd.

Navigācijas josla

Tātad, lai lapā parādītos navigācijas josla, mēs pievienosim tagu index.html ar klasi .navbar , kuras iekšpusē, izmantojot citas klases, piemēram, .navbar-brand , .navbar-toggler un .nav -item , mēs izveidojam dažus īpašus vietnes navigācijas sistēmas elementus un struktūru. .fixed-top klase ļauj labot navigācijas joslu lapas augšdaļā. Šeit ir navigācijas joslas izkārtojums:

Mājas

• Par
• Portfelis
• Komanda
• Post
• Sazināties

Tagad izveidosim main.css failu un savienosim to ar lapu, faila index.html tagā ievietojot šo:

Tas ļaus jums pielāgot lapas elementu stilus, ievietojot CSS kārtulas šajā failā. Pievienosim šim CSS failam noteikumus, kas nosaka navigācijas joslas krāsu dizainu:

Navbar(fons:#F97300; ) .nav-link , .navbar-brand( color: #f4f4f4; kursors: pointer; ) .nav-link( margin-right: 1em !important; ) .nav-link:hover( background : #f4f4f4; krāsa: #f97300 ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( background:#fff !important; )
Jaunais Bootstrap režģis ir balstīts uz flexbox, tāpēc jums ir jāizmanto atbilstošie rekvizīti, lai saskaņotu saturu. Piemēram, lai navigācijas joslas izvēlni novietotu labajā pusē, jums ir jāizmanto rekvizīts justify-content un jāiestata tā vērtība uz elastīgu galu:

Navigbar-collapse (attaisnot-saturs: flex-end; )
Lai pielāgotu navigācijas joslas fona krāsu, varat izmantot klases .bg-light (gaišs fons), .bg-dark (tumšs fons) un .bg-primary (galvenā fona krāsa). Mēs izmantojam šādus iestatījumus:

Bg-tumšs (fona krāsa:#343a40!svarīgi ) .bg-primary( background-color:#343a40!important )

Lapas galvene Šis tags tiek izmantots, lai aprakstītu lapas galveni:

Sagatavosim lapas galvenes izkārtojumu. Mēs vēlamies, lai tas aizņemtu visu loga augstumu, tāpēc jQuery šeit noderēs. Izveidosim main.js failu un savienosim to ar index.html pirms beigu taga:

Pievienosim failam main.js:

$(dokuments).ready(function())( $(.header").height($(window).height()); ))
Būtu laba ideja lapas galvenē ievietot kādu jauku fona attēlu. Darīsim to šādi:

/*galvenes stils*/ .header(fona attēls: url("../images/headerback.jpg"); fona pielikums: fiksēts; fona izmērs: vāks; fona pozīcija: centrā; )
Tas ir tas, ar ko mēs nonācām.

Lapas galvene ar fona attēlu

Pagaidām vietnes galvene izskatās nedaudz tukša, tāpēc pievienosim tai elementu, piešķirot tai klasi .overlay , kas novedīs pie bloka izveides, kas atrodas virs galvenes fona attēla. Mainīsim faila index.html sadaļu, kurā mēs aprakstījām galveni šādi:

Pēc tam failā main.css pievienojiet šo:

Pārklājums (pozīcija: absolūtais; minimālais augstums: 100%; minimālais platums: 100%; pa kreisi: 0; augšā: 0; fons: rgba(244, 244, 244, 0,79); )
Tagad pievienosim projekta aprakstu galvenē. Mēs to ievietosim jaunā elementā ar klasi .containter . Šī ir palīgklase Bootstrap ietvaram, kas paredzēta satura izkārtošanai, pamatojoties uz adaptīva izkārtojuma vajadzībām. Lūk, kā marķējums mainīsies šajā darbībā:

Tagad pievienosim šeit vēl vienu elementu, kuram piešķirsim class.description:

▍ Sveiki, laipni lūdzam manā oficiālajā vietnē

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Redzēt vairāk
Šim tagam piešķirsim arī klasi .text-center, kas ļaus tās saturu līdzināt lapas centram. Vietnes apraksta beigās ir poga. Parunāsim par to, kā to iestatīt.

Buttons Bootstrap nodrošina daudzas pogu klases. Jūs varat redzēt dažus pogu dizaina piemērus. Mēs, kā redzat iepriekšējās sadaļas iezīmēšanas piemērā, elementam pievienojām klases .btn un. btn-outline-secondary .

Tagad iestatīsim class.description stilus:

Apraksts( pozīcija: absolūtā; augšdaļa: 30%; piemale: automātiska; polsterējums: 2em; ) .description h1( color:#F97300 ; ) .description p( color:#666; font-size: 20px; width: 50%; līnijas augstums: 1,5; .description poga (apmale: 1px solid #F97300; background:#F97300; color:#fff; )
Pēc iepriekš minēto darbību veikšanas lapas galvene izskatīsies šādi:

Lapas galvene ar projekta aprakstu Par sadaļu Vispirms apskatīsim, ko mēs vēlamies izveidot. Šeit ir lapas sadaļa ar informāciju par tīmekļa izstrādātāju.

Par sadaļu

Šeit mēs izmantosim Bootstrap režģa iespējas, lai izveidotu divu daļu sadaļas izkārtojumu. Sāksim, pievienojot .row klasi sadaļas vecākelementam:

Kreisajā pusē atradīsies pirmā izkārtojuma daļa, tajā būs fotogrāfija. Otrajā daļā, kas atrodas labajā pusē, ir apraksts.

Lūk, kā izskatās marķējums šīs sadaļas kreisajā pusē:

// kreisā puse S.Web izstrādātājs
Un tas notiks pēc tam, kad šeit tiks pievienots izkārtojuma labās puses apraksts:

S.Web izstrādātājs ▍D.Džons

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 exercitation 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

Ņemiet vērā kolonnu platuma iestatījumu, izmantojot iepriekš aprakstītās klases col-lg-* , col-md-* un col-sm-*.

Šeit ir norādīti stili šim visam:

Par(mala: 4em 0; polsterējums: 1em; pozīcija: relatīvs; ) .about h1( color:#F97300; margin: 2em; ) .about img( augstums: 100%; platums: 100%; apmales rādiuss: 50% ) .about span( displejs: bloks; krāsa: #888; pozīcija: absolūts; pa kreisi: 115 pikseļi; ) .about .desc( polsterējums: 2em; border-left: 4px solid #10828C; ) .about .desc h3( color: #10828C; ) .about .desc p( line-height:2; color:#888; )

Portfeļa sadaļa Tagad pāriesim uz sadaļu, kurā tiks prezentēts izstrādātāja portfelis. Tajā būs darbu galerija.

Portfeļa sadaļa

Veidojot šīs sadaļas izkārtojumu, tiek piemēroti tie paši principi darbam ar režģi, par kuriem mēs runājām iepriekš:

Portfelis
Katram attēlam pievienojot .img-fluid klasi, tie kļūst atsaucīgi.

Katrs elements mūsu galerijā uz vidējiem un lieliem ekrāniem aizņem 4 kolonnas (atcerieties - ierīcēm ar maziem ekrāniem tiek izmantota klase col-sm-12, vidējiem ekrāniem tiek izmantota klase col-md-4, col-lg-4 - ierīcēm ar lieliem ekrāniem). Rezultātā uz lieliem un vidējiem ekrāniem viens elements veidos aptuveni 33,3% no konteinera elementa mazās ierīcēs, katrs elements aizņems visu ekrānu (12 kolonnas).

Darbu galerijas stilizēšana:

/*Portfolio*/ .portfolio( margin: 4em 0; pozīcija: relatīvs; ) .portfolio h1( color:#F97300; margin: 2em; ) .portfolio img( augstums: 15rem; platums: 100%; mala: 1em; )

Emuāra sadaļa un darbs ar kartēm Parunāsim par sadaļas izveidi, kurā ir mūsu nosacījuma tīmekļa izstrādātāja uzturētā emuāra materiāli.

Bloga sadaļa

Lai izveidotu šo sadaļu, mums būs nepieciešamas tā sauktās kartes (kartes Bootstrap terminoloģijā).

Lai izveidotu karti, izkārtojumā jāiekļauj elements un jāpievieno tai .card klase. Lai konfigurētu dažādus karšu elementus, varat izmantot šādas klases:

• .card-header: galvene
• .card-body: galvenais saturs
• .card-title: nosaukums
• .card-footer: kājene
• .card-image: attēls

Šīs sadaļas HTML marķējums izskatīsies šādi:

Emuārs Ziņas virsraksts

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

Lasīt vairāk Ziņas virsraksts

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

Lasīt vairāk Ziņas virsraksts

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

Lasīt vairāk
Šeit ir norādīti karšu stili:

Emuārs( piemale: 4em 0; pozīcija: relatīvs; ) .emuārs h1( krāsa:#F97300; piemale: 2em; ) .emuārs .karte( box-shadow: 0 0 20px #ccc; ) .blog .card img( platums: 100%; augstums: 12 em;
Šādi izskatīsies mūsu vienas lapas lapa pēc Blog sadaļas izveides:

Lapa pēc sadaļas Blog pievienošanas Komandas sadaļa Šajā sadaļā būs informācija par projekta komandu.

Komandas sadaļa

Lai izveidotu šo sadaļu, mēs izmantosim režģi, vienādi sadalot pieejamo vietu starp attēliem. Katrs attēls (lielos un vidējos ekrānos) aizņems 3 režģa kolonnas, kas ir 25% no kopējās vietas.

Šeit ir šīs sadaļas HTML marķējums:

Mūsu komanda Sāra menedžere Kriss S.inženieris Layla priekšgala izstrādātājs J.Jirard komandas vadītājs
Un šeit ir stili:

Komanda( margin: 4em 0; pozīcija: relatīvs; ) .team h1( color:#F97300; margin: 2em; ) .team .item(pozīcija: relatīvs; ) .team .des( fons: #F97300; krāsa: #fff teksta izlīdzināšana: apmales-apakšā-kreisais rādiuss: .3s atvieglojums;
Izrotāsim šo sadaļu ar animāciju, kas parādās, novietojot peles kursoru virs attēliem. Tam vajadzētu izskatīties kā attēlā zemāk.

Animācija, virzot peles kursoru virs attēla

Lai sasniegtu šo efektu, failam main.css pievienojiet šādus stilus:

Komanda .item:hover .des( augstums: 100%; fons: #f973007d; pozīcija: absolūts; platums: 89%; polsterējums: 5 em; augšā: 0; apmale-apakšā-kreisais-rādiuss: 0; )

Atsauksmju veidlapa Šajā lapas sadaļā būs veidlapa, ar kuru vietnes apmeklētāji var nosūtīt ziņojumus vietnes īpašniekam. Šeit, kā ierasts, elementu stilizēšanai un to atsaucības nodrošināšanai izmantosim Bootstrap iespējas.

Atsauksmes forma

Tāpat kā Bootstrap 3, arī Bootstrap 4 ievades laukiem izmanto .form-control klasi, taču tagad ir kaut kas jauns. Piemēram - novecojušā class.input-group-addon vietā tiek izmantots jaunais class.input-group-prepend (ikonām un etiķetēm). Sīkāka informācija par to ir atrodama Bootstrap 4 dokumentācijā. Mūsu gadījumā katrs ievades lauks tiks ievietots elementā, kuram ir piešķirta .form-group klase.

Pievienosim failam index.html:

Sazināties
Tālāk ir norādīti atsauksmju veidlapas sadaļas stili, kas jāievieto main.css failā:

Kontaktforma( margin: 6em 0; pozīcija: relatīvs; ) .contact-form h1( polsterējums:2em 1px; color: #F97300; ) .contact-form .right( max-width: 600px; ) .contact-form . pa labi .btn-secondary(fons: #F97300; krāsa: #fff; apmale:0; ) .contact-form .right .form-control::placeholder( krāsa: #888; fonta izmērs: 16px; )

Fonti Standarta fonti nav piemēroti visiem. Mēs izmantojām Google Font API priekšrocības, lai savā projektā izmantotu Raleway fontu. Šeit tas izskatīsies ļoti labi. Lai importētu fontu, failam main.css pievienojiet šādu direktīvu:

@import url("https://fonts.googleapis.com/css?family=Raleway");
Tālāk iestatīsim globālos stilus dažādiem HTML tagiem:

Html,h1,h2,h3,h4,h5,h6,a(fontu saime: "Raleway"; )

Ritināšanas efekti Zemāk esošajā attēlā ir parādīta lapas darbība, kuru vēlamies sasniegt.

Lapas ritināšana, noklikšķinot uz saitēm navigācijas joslā

Lai lapa vienmērīgi ritinātu līdz vajadzīgajai sadaļai, noklikšķinot uz navigācijas joslas saitēm, mums būs jāizmanto jQuery iespējas. Ja neesat īpaši pazīstams ar šo bibliotēku, ņemiet vērā, ka šeit nav nekā sarežģīta — vienkārši pievienojiet tālāk norādīto kodu savam main.js failam:

$(".navbar a").click(function())( $("body,html").animate(( scrollTop:$("#" + $(this).data("vērtība")).offset ( ).augšā ),1000) ))
Pēc tam katrai navigācijas joslas saitei pievienojiet datu vērtības atribūtu un izveidojiet marķējumu šādi:

Par

Portfelis

Emuārs

Komanda

Sazināties

Lai tas viss beidzot izdotos, atliek tikai katras lapas sadaļas galvenajam elementam pievienot id atribūtu. Šajā gadījumā jums ir jāpārliecinās, ka tā vērtība ir identiska tai, kas norādīta atbilstošās saites atribūtā data-value. Piemēram, šeit ir atbilstošais atribūts sadaļai Par:

Tas pabeidz mūsu piemēru. Pievienojiet atzīmes

Jaunās Bootstrap4 versijas izlaišana mudināja mani uzrakstīt šo rokasgrāmatu, jo jaunā versija ievērojami atšķiras. Jums būs jāpavada zināms laiks, lai to izpētītu, bet tas ir tā vērts. Šī rokasgrāmata nav pilnīgs Bootstrap4 ceļvedis, un, bez šaubām, dokumentācija būs jāizskata vairāk nekā vienu reizi, taču šeit mēs aplūkosim vietnes izkārtojuma izveides pamatus, izmantojot Bootstrap4 divos dažādos veidos.

Instalēšana Mūsu gadījumā mēs izmantosim SASS un tāpēc izmantosim pilnu instalāciju.

Ja jums vienkārši nepieciešams Bootstrap ātrai prototipēšanai, ir lietderīgi izmantot CDN metodi. Jūs vienkārši savienojat failus, kas atrodas citos interneta resursos, bez instalēšanas (lejupielādes). Tādā veidā jūs pievienojat tos savam projektam kā saites.

Jūs varat vienkārši pievienot kodu no tālāk redzamā piemēra savam projekta failam - index.html

Bootstrap 4 Starter Template Labdien< /h1>

Šis kods ir tieši no Bootstrap 4 sāknēšanas lapas.

Izmantojot šo veidni, varat nekavējoties sākt lietot Bootstrap. Priekšrocība ir tā, ka to ir viegli sākt, bet trūkums ir tas, ka jūs palaižat garām Sass piedāvātās pielāgošanas iespējas.

Bootstrap 4 instalēšana, izmantojot NPM. Šajā brīdī mēs sāksim savu projektu tieši šeit. Tam būs jāizmanto Node.js un tā pakotņu pārvaldnieks, lai instalētu sāknēšanas ierīci kopā ar vairākām citām pakotnēm. Tas mums nodrošinās piekļuvi Sass, reāllaika pārlādēšanai utt.

Vispirms pārliecinieties, vai ir instalēts Nodejs, atverot konsoli vai komandrindu:

Ja iegūstat pašreizējo versiju, viss ir kārtībā un varat turpināt, bet, ja nē, lejupielādējiet atbilstošo instalētāju, pamatojoties uz jūsu OS, un izpildiet instalēšanas procedūru ar noklusējuma iestatījumiem.

Noderīgu informāciju par konfigurāciju varat izlasīt manā ierakstā - NPM Configuring Gulp un SASS Compilation

Kad instalēšana ir pabeigta, restartējiet konsoli vai komandrindu, un jums būs piekļuve Node.js komandām.

Izveidosim mapi savam projektam un iedziļināsimies tajā:

Mkdir bs4 && cd bs4

Pēc tam mēs palaidīsim npm init, lai izveidotu pack.json failu, kurā vienkārši tiek saglabātas mūsu atkarības.

(Piezīme: karodziņš -y vienkārši ļauj mums izlaist atbildes uz dažādiem vaicājumiem un tā vietā nodrošināt tiem noklusējuma vērtības)

Pēc tam mēs atkal izmantosim npm, lai instalētu vairākas dažādas pakotnes atkarībā no mūsu attīstības atkarībām:

Npm instalējiet gulp browser-sync gulp-sass --save-dev

Gulp ir uzdevumu pārvaldnieks, kas paredzēts automātiskai bieži izmantotu uzdevumu veikšanai. Jūs redzēsiet, kā tas darbojas, ja esat iesācējs.

Brows-Sync automātiski atjaunina jūsu pārlūkprogrammu, kad fails mainās.

gulp-sass ļauj jums izveidot mūsu projektu, integrējot to ar sass.

--save-dev - instalējiet atsevišķā mapē. Mūsu gadījumā uz projekta mapi, tas ir, lokāli.

Pēc tam pēdējo reizi izmantosim npm, lai instalētu dažas pakotnes kā parastās projekta atkarības:

Npm instalēt bootstrap jquery popper.js --save

bootstrap, protams, ir bootstrap pakotne.

jquery — java skriptu bibliotēka, ko tieši izmanto pati sāknēšanas veidne

popper.js izmanto arī Bootstrap. Tas ļauj ievietot uznirstošos logus, rīka padomus utt.

Tagad ir pienācis laiks atvērt mūsu projektu koda redaktorā. Es izmantošu Sublime 3.

Mums ir jāizveido src mape mūsu projektam un vairākas apakšmapes tajā. Koks izskatās šādi:

/src /assets /css /js /scss

Mapē /src izveidojiet arī 4 mapes, kā parādīts iepriekš.

Pēc tam mapē /src/ izveidojiet failu index.html ar šādu saturu:

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

Es importēju Raleway fontu kopā ar FontAwesome ikonām. Pēc tam es atsaucos uz failiem bootstrap.css un styles.css. Tās vēl neeksistē, bet mēs tās drīzumā izveidosim.

Izveidosim arī styles.scss failu mapē /src/scss/. Mēs ieviesīsim ātru mainīgo un noteikumu kopumu, lai pārliecinātos, ka Sass kompilācija darbojas:

$bg-color:red; korpuss (fons: $bg-color; )

Saknes mapē (projekta mapē) izveidojiet failu gulpfile.js un ielīmējiet šādu saturu:

Var gulp = prasīt("gulp"); var browserSync = prasīt("browser-sync").create(); var sass = prasīt("gulp-sass"); // Sass kompilēšana CSS un automātiska ievadīšana pārlūkprogrammās gulp.task("sass", function() ( return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss" "]).pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); )); // Pārvietojiet javascript failus uz mūsu /src/js mapi gulp.task("js", function() ( 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 ()); // Statiskais serveris + scss/html failu skatīšanās gulp.task("serve", ["sass"], function() ( browserSync.init(( serveris: "./src" )); gulp.watch(["node_modules" /bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("mainīt", browserSync.reload )); gulp.task("noklusējums", ["js","serve"]);

Es aprakstīšu šeit notiekošo, pamatojoties uz iepriekš definētajiem uzdevumiem:

noklusējuma uzdevums - noklusējuma uzdevums. Kad komandrindā ievadām gulp, tas liek palaist gan js, gan apkalpot uzdevumus.

js uzdevums Tas vienkārši norāda trīs dažādus JavaScript failus, kas tiek glabāti mapē node_modules, kas tiek izveidota, kad palaižam npm install... un pārvieto tos uz mūsu /src/js mapi. Tādā veidā mēs varam tos iekļaut mūsu HTML failā, norādot uz /src/js, nevis mapi node_modules.

serve uzdevums sāk vienkāršu serveri un skatās mūsu sass failus un, ja tie maina, tas izsauc sass uzdevumu. Tas arī izraisa pārlūkprogrammas sinhronizāciju, saglabājot jebkuru *.html failu.

sass uzdevums Šis uzdevums ņem gan bootstrap sass failus, gan mūsu pielāgotos sass failus un apkopo tos parastā CSS un saglabā šos CSS failus mūsu /src/css mapē.

Palaidīsim gulp komandrindā:

Tas darbojas šādi:

• Jūs lietojat m malai vai p polsterēšanai
• Pēc m vai p jūs pievienojat: t (augšējā -), b (apakšā), l (pa kreisi), r (pa labi), x (pa kreisi un pa labi), y (augšējā un apakšējā) vai neko visām 4 pusēm.
• Pēc defises norādiet izmērus no 0 līdz 5 (5 ir lielākais atstarpju skaits).

Tātad mūsu piemērā izskatās, ka mums ir jāizmanto starpība Un apakšā lai atstumtu apakšā esošās kārtis.

Pirmajā karšu konteinerā pievienojiet mb-4:

Tagad labots:

Lūk, kā programmā Bootstrap 4 varat viegli apstrādāt gan piemales, gan polsterējumu.

Paspēlēsimies mazliet, izmantojot dažādus Bootstrap 4 komponentus.

Darbs ar "tipogrāfiju" programmā Bootstrap 4 Pievienosim sadaļu zem mūsu 3 kolonnām rindu klases noslēguma beigās, kurā būs 2 kolonnas.

Pirmajā kolonnā tiks izmantota lielākā daļa kolonnu (8), un labā kolonna būs paredzēta vertikālai navigācijai sadaļā pēc tam.

Svarīga virsraksts

Šeit var būt sava veida svarīgs apakšvirsraksts, kas ir lielāks un pelēks.

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 exercitation 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 exercitation 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.

..drīzumā sāksies vertikālā navigācija.

Programmas Bootstrap 4 dokumentācijā ir sadaļa Tipogrāfija, kas sniegs visas uz tipu balstītas palīgu klases. Tas ir diezgan vienkārši. Mēs izmantojam .svins lai izceltu apakšvirsrakstu zem mūsu elementa h3.

Tā dokumentācijā ir arī sadaļa Teksta utilītas, kas sniedz iespējas teksta līdzināšanai, konvertēšanai, slīprakstam un fontu svaram.

Pieņemsim, ka mazos skatu laukos mēs vēlamies, lai mūsu tips būtu centrēts, nevis noklusējuma veids, kas ir līdzināts pa kreisi.

Tādējādi div daļā esošais teksts tiks centrēts uz maziem skata logiem un līdzināts pa kreisi vidējos un lielākos.

Bootstrap 4 vertikālā navigācija Mēs pievienosim vēl vienu elementu, pirms sāksim pielāgošanu. Labajā kolonnā, ko tikko pievienojām, pievienosim vertikālo navigāciju:

Sekundārā izvēlne

• Aktīvs< /li>
• Saite
< li class="nav-item">Saite < li class="nav-item">Atspējots

Rezultātam pārlūkprogrammā vajadzētu izskatīties šādi:

Varat arī pārbaudīt to nelielos skatu laukos un pamanīt, ka tas ir atsaucīgs. Protams, ir daudz vairāk iespēju, kas saistītas ar navigāciju.

Pielāgošana programmā Bootstrap 4 Tagad mums ir diezgan standarta izkārtojums, ko varat atrast lielākajā daļā vietņu.

Par laimi, Bootstrap 4 ir stabila sistēma, kas ļauj viegli pielāgot vienkāršus elementus.

Atveriet failu /src/scss/styles.scss un ielīmējiet šo:

// Mainīgo ignorēšana // Bootstrap Sass Imports @import "node_modules/bootstrap/scss/bootstrap";

Saskaņā ar sadaļu Theming varat izvēlēties iekļaut visus Bootstrap 4 sass failus vai pievienot atsevišķus elementus atkarībā no jūsu vajadzībām. Lai lietas būtu vienkāršas, mēs importēsim visu, kā norādīts iepriekš.

Motīvu krāsu maiņa programmā Bootstrap 4 Iespējams, ka visizplatītākā problēma ir krāsu maiņa.

Ja atverat failu node_modules/bootstrap/scss/_variables.scss, pamanīsit, ka tā augšdaļā ir minēta krāsu sistēma. Šajā sadaļā jūs redzēsiet visus mainīgos, kurus varat pārrakstīt, lai tie atbilstu krāsām.

Mainīsim tikai pamatkrāsu, nomainiet styles.scss uz šādu:

// Mainīgais ignorē $theme-colors: ("primary": #d95700);

Saglabājiet to, un rezultāts ir šāds:

Ļoti vienkārši!

Mainīsim arī fona krāsu:

// Mainīgais ignorē $theme-colors: ("primary": #d95700); $body-bg: #ededed;

Tagad rezultāts izskatās šādi:

Hmm, tagad mūsu jumbletron (varonis) sadaļa izskatās neglīta, jo tā arī bija pelēka.

Mēs varam iestatīt pielāgotus iestatījumus noteiktiem elementiem, izmantojot pārlūkprogrammas chrome vai firefox inspektoru, atrast saistītās elementu klases, kuras vēlamies mainīt, un mainīt tās failā styles.scss.

Šajā gadījumā par jumbotronu atbildīgā klase ir .jumbotron. Mainīsim fona krāsu un pievienosim nelielu apmali augšpusē, lai modelētu ēnu no navigācijas joslas:

// Mainīgais ignorē $theme-colors: ("primary": #d95700); $body-bg: #ededed; .jumbotron (fona krāsa: #ffffff !svarīgi; apmales augšdaļa: 3 pikseļi solid rgb(219, 219, 219); )

Tagad rezultāts:

Secinājums Ceru, ka jums patika šis kurss/pamācība par Bootstrap 4. Mēs esam tikai saskrāpējuši pamatus, un jūs varat uzzināt daudz vairāk. Šajā brīdī visam, kas jums jāapgūst, ir jābūt vienkāršam, jo ​​tagad jūs saprotat pamatus un to, ka gandrīz viss ir aprakstīts dokumentācijā.

Šī gada janvārī Bootstrap 4 (pazīstams arī kā v4) beidzot tika izlaists pēc vairāk nekā divus gadus ilgas alfa versijas. Tas nozīmē nopietnu funkcionalitātes pārrakstīšanu. Tas ne tikai ievieš daudzas izmaiņas zem pārsega, bet arī Bootstrap 4 ietver arī vairākas jaunas koncepcijas, kas jums būs jāaptver.

Tāpēc šajā rakstā es runāšu par svarīgākajām izmaiņām Bootstrap versijā v4 salīdzinājumā ar v3. Es pieņemu, ka jūs jau esat izmantojis Bootstrap, tāpēc es nepaskaidrošu pamatprincipus.

Tagad apskatīsim svarīgākās izmaiņas (bez noteiktas secības):

1. pogas skats

Sāksim ar kaut ko jautru un vizuālu! Pogām v4 versijā ir plakanāks dizains nekā v3. Šeit ir iepriekšējās pogas:

Un šeit ir daži no jaunajiem:

Tas vairāk atbilst mūsdienu dizaina ceļvežiem, piemēram, Materiālu dizaina ceļvežiem, kas pēdējo pāris gadu laikā ir guvuši milzīgu popularitāti.

2. uzlaboti multivides vaicājumi

Manuprāt, Boostrap v3 režģim bija pārāk maz kontroles punktu, piemēram, mazākais, xs, bija 768 pikseļi. Liela daļa trafika mūsdienās nāk no daudz mazākām ierīcēm, un tas ir sagādājis vilšanos daudziem izstrādātājiem.

$režģa pārtraukuma punkti: (xs: 0, sm: 576 pikseļi, md: 768 pikseļi, lg: 992 pikseļi, xl: 1200 pikseļi) !noklusējums;

$ režģis - pārtraukuma punkti : ( xs: 0, sm: 576 pikseļi, md: 768 pikseļi, lg: 992 pikseļi, xl: 1200 pikseļi ) ! noklusējuma ;

Tādējādi ir viegli izveidot režģus, kas labi darbojas visu izmēru ekrānos.

3: Flexbox atbalsts sniedz mums lielāku elastību

Bootstrap slavenie režģi tagad tiek izveidoti, izmantojot Flexbox, nevis pludiņu. No pirmā acu uzmetiena izstrādātājiem tas nerada lielas atšķirības, jo lielākā daļa režģa izkārtojumu darbojas tieši tāpat. Tomēr tas paver vairākas jaunas iespējas.

Iepriekš mums bija jānosaka katras kolonnas platums (no 1 līdz 12). Tagad varat definēt vienas kolonnas platumu un pēc tam ļaut Flexbox automātiski iestatīt pārējo kolonnu platumu. Tālāk ir sniegts piemērs, kā to izdarīt.

Kā redzat, vidējās kolonnas platumu iestatījām uz 6 (kas ir puse no pilna platuma), un pārējās kolonnas vienkārši aizņem pārējo vietu.

1 no 3 2 no 3 (plašāks) 3 no 3

< div class = "container" > < div class = "row" > < div class = "col" > 1 no 3 < / div > < div class = "col-6" > 2 no 3 (plašāks) < / div > < div class = "col" > 3 no 3 < / div > < / div > < / div >

Flexbox nodarbības

Bootstrap 4 komplektācijā ietilpst arī vairākas klases, kuras varat izmantot, lai pārvaldītu konteinerus un Flexbox elementus. Lai elementu pārvērstu par Flexbox konteineru, vienkārši piešķiriet tam d-flex klasi.

Es esmu flexbox konteiners!

< div class = "d-flex" >Es esmu flexbox konteiners!< / div >

Tādējādi tiek parādīts Flexbox konteiners ar tekstu:

Piezīme. Es aplūkoju tikai ar Flexbox saistītos stilus.

Pievienosim vēl dažus elementus un ieviesīsim citu klasi, lai kontrolētu, kā tie tiek novietoti konteinerā.

Bootstrap 4 ietvars

Apgūstiet Bootstrap 4 pamatus, izmantojot praktisku piemēru, kā izveidot emuāru no jauna

< div >Flex prece< / div >

< div >Flex prece< / div >

< div >Flex prece< / div >

< / div >

Rezultātā elementi ir centrēti konteinerā:

#4: Atkāpju pārvaldība, izmantojot klases

Tas ir diezgan forši. Tagad varat kontrolēt polsterējumu un piemales, izmantojot klases p-* un m-*. Polsterējums var atšķirties no 0,25 līdz 3 rem, izmantojot skaitļus no 0 līdz 5. Piemēram, iestatīsim Flexbox konteineram klasi p-5, lai izveidotu maksimālo polsterējumu.

Sveiki visiem, draugi! Bootstrap 3 tika izlaists 2013. gada vidū, un gadu gaitā ir pierādījies, ka tā ir ērta, paplašināma CSS sistēma, kas ļauj ātri izveidot atsaucīgus izkārtojumus. Miljoniem vietņu veiksmīgi izmanto šo ietvaru, un mēs jau esam pie tā diezgan pieraduši.

Forši

Stammer

2018. gada 18. janvārī notika nozīmīgs notikums - no beta iznāca ilgi gaidītā Bootstrap 4 versija, kuras pamatā ir Flexbox modeļa izmantošana iezīmēšanai, kas šobrīd jau atbalsta visas modernās pārlūkprogrammas un ir ērtāka un elastīgāka. izstrādātājiem nekā klasiskais iezīmēšanas modelis, kura pamatā ir Float. Tagad ar pilnu pārliecību varam teikt, ka tas nav iespējams, bet OBLIGĀTI jāraksta, izmantojot Flex!

Papildu Bootstrap 4 nodarbību materiāli

Visus nodarbību piemērus varat pārbaudīt pats: Lejupielādēt arhīvu

Vairāk par Bootstrap 4 dokumentāciju varat lasīt birojā. tīmekļa vietne;

Jaunākais starteris, tostarp Bootstrap 4: OptimizedHTML 5.

Šodien mēs sīkāk aplūkosim darbu ar Bootstrap 4 režģi, salīdzinot to ar veco versiju. Šī nodarbība tev noderēs ne tikai tad, ja esi iesācējs un iepazīsties ar Bootstrap, bet arī tad, ja esi pieredzējis izstrādātājs un vēlies apgūt visus izkārtojuma noteikumus un nianses, izmantojot Bootstrap 4 režģi un Flexbox rīkus, kas iekļauti komplektācijā. to.

1. Pamata noklusējuma režģa parametri

Bootstrap 4 noklusējuma režģis ir ļoti līdzīgs 3. versijai, taču ir dažas būtiskas atšķirības.

No galveno opciju tabulas mēs varam pamanīt acīmredzamas atšķirības no trešās versijas režģa. Klases prefikss “.col-xs-”, kas ir atbildīgs par mazāko izšķirtspēju, tagad ir noņemts, aizstājot to ar vienkāršotu prefiksu “.col-”. Jūs varētu kļūdaini domāt, ka prefikss “.col-” ir atbildīgs par mobilo ierīču minimālo izšķirtspēju, taču tā nav pilnīgi taisnība. Cita starpā prefikss “.col-” ir viens no svarīgākajiem Bootstrap 4 jauninājumiem. Šī ir klase, kas ir atbildīga par kolonnu automātisku izkārtošanu jebkurā izšķirtspējā. Bet vairāk par to vēlāk.

Par mazām izšķirtspējām ir atbildīgs prefikss “.col-sm-” ar multivides vaicājumu 576 pikseļi. Konteinera platums ir 540 pikseļi. Vidēja izšķirtspēja sākas no 768 pikseļiem. Konteinera platums - 720 px. Augstākas izšķirtspējas darbojas ar ierīces izšķirtspēju 992 pikseļi vai vairāk. Konteinera platums - 960 px. Un lielākie - no 1200 pikseļiem. Konteinera platums ir fiksēts 1140 pikseļi.

Ņemiet vērā, ka multivides vaicājuma maksimālajām vērtībām ir neprecīzas vērtības ar daļēju daļu ".98" pikseļos. Tas ir pamanāms, izvēloties izkārtojuma metodi Desktop First, kur maksimālais multivides vaicājuma platums ir ierobežots. Piemēram, kompilējot Sass “+media-breakpoint-down(lg)”, mēs iegūsim “@media (max-width: 1199.98px)”. Šeit tiek atbrīvoti 0,02 pikseļi, lai sāktu nākamo multivides vaicājumu. Paturiet to prātā. Nākamajos "Jedi Layout 8" numuros mēs aplūkosim šo un daudzus citus punktus no šīs nodarbības, izmantojot reālu piemēru.

2. Automātiskais kolonnu izkārtojums 2.1. Tāda paša platuma kolonnas

Izmantojot jauno vispārīgo klasi ".col", vienā rindā var norādīt līdz 12 kolonnām (".row" vecākais), kuru platums tiks automātiski aprēķināts atkarībā no elementu skaita un būs vienāds.

Piemēram:

2.2 Vienas kolonnas platuma iestatīšana

Varat arī skaidri iestatīt vienas kolonnas platumu un atstāt pārējās kolonnas automātiski.

1 no 3 2 no 3 (plats) 3 no 3 1 no 3 2 no 3 (plats) 3 no 3

Šajā piemērā otrajam elementam trešajā rindā ir klase ".col-6" un otrajam elementam otrajā rindā ir klase ".col-5", kas aizņem atbilstošo kolonnu skaitu visās ekrāna izšķirtspējās. Atlikušo kolonnu platums ir atsaucīgs un tiek aprēķināts automātiski, aizņemot visu atlikušo vietu.

2.3 Mainīga platuma saturs

Varat izmantot klasi "col-(breakpoint)-auto", lai definētu saturu ar mainīgu platumu atkarībā no kolonnas satura aizņemtās vietas. Kur pārtraukuma punkts ir ekrāna izmērs (xl, lg, md vai sm).

1 no 3 mainīga platuma saturs 3 no 3 1 no 3 mainīga platuma satura numurs divi 3 no 3

Šeit redzams, ka divas centrālās kolonnas aizņem platumu, kas atbilst satura platumam, bet pirmajā rindā, pateicoties ".row" klasei ".justify-content-sm-center", visa rinda ir centrēta. un kopējais platums ir atkarīgs tikai no centrālās kolonnas platuma, kamēr otrā rinda ir izstiepta līdz pilnam pieejamajam platumam, bet otrā kolonna paliek fiksēta satura platumā.

2.4 Daudzrindu

Pateicoties Bootstrap 4, varat izveidot vairākas rindas (defises) vienā rindā. To var ieviest, izmantojot klasi “.w-100”, kas ir ļoti līdzīga tagam “br” un būtībā tikai aptina kolonnas jaunā rindā.

col col col col

Lūdzu, ņemiet vērā, ka šī klase ir daļa no Bootstrap 4 papildierīcēm, kas projektā ir iekļautas atsevišķi, ja izmantojat Bootstrap projekta Sass versiju un atrodas mapē “scss/utilities”. Ja nepieciešams, savam projektam varat pievienot arī citus šīs mapes spraudņus. 3. Adaptīvās klases 3.1. Pārtraukuma punkti

Ļoti interesanta Bootstrap 4 iezīme ir iespēja iestatīt universālas kolonnas, kas tiks parādītas visās izšķirtspējās. Šī ir iepriekš minētā klase ".col". Turklāt varat definēt klasi, kas norāda konkrēto kolonnu skaitu, ko saturs aizņems — tās ir klases ar prefiksu “.col-(kolonnu skaits)”, piemēram, “.col-6” norāda, ka saturs aizņems 6 kolonnas no 12. Gadījumos, kad nav nepieciešams norādīt konkrētu daudzumu, droši var izmantot universālo klasi “.col”.

kolonna kolonna kolonna kolonna-8 kolonna-4

3.2 Mobilajās ierīcēs

Varat izmantot klases prefiksu ".col-sm-(aizņemto kolonnu skaits)", lai definētu pamata režģi visās, izņemot mazākās izšķirtspējas. Mazos ekrānos šāda režģa kolonnas sakrājas viena zem otras. Par atļaujām vairāk — tās aizņems tik daudz vietas, cik definējāt nodarbībās.

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

Šeit mēs redzam, ka pirmā rinda ierīcēm ar izšķirtspēju, kas lielāka par “sm”, tas ir, vairāk nekā 576 pikseļi. ir sadalīts 2 kolonnās - attiecīgi 8 un 4 no 12 platām. Otrās rindas kolonnu platums tiek aprēķināts automātiski, bet pie mazākās izšķirtspējas šīs kolonnas arī sakraujas viena zem otras, pateicoties klasei “.col-sm”.

3.3 Sarežģītas kombinētās sieta izveide

Izmantojot Bootstrap, varat izveidot jebkuru kolonnu kombināciju, veidojot režģi. Katrai kolonnai varat iestatīt jebkuru darbību dažādās izšķirtspējās, izmantojot adaptīvās klases. Šeit atšķirības no trešās versijas ir tikai klašu nosaukumos.

.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 .col-6 .col-6

4. Izlīdzināšana

Bootstrap 4 ir balstīts uz “flex” un sniedz mums visas šī modeļa funkcijas, kas ir pieejamas vienkāršās gatavās klasēs. Iespējas ietver vertikālo un horizontālo izlīdzināšanu.

4.1. Vertikālais izlīdzinājums Augšpuse Augšpuse Vidējā Vidējā Apakšējā Apakšējā

Papildus līdzinājuma kontrolei, izmantojot vecāku ".row", varat līdzināt kolonnas, piešķirot tām atbilstošās klases:

Augšējā apakšējā apakšējā daļa

4.2. Horizontālā izlīdzināšana

Turklāt Bootstrap 4 ir rīki kolonnu horizontālai izlīdzināšanai, izmantojot prefiksu “.justify-content-” uz “.row”.

rinda attaisnot-satura-sākuma rinda attaisnot-satura-sākuma rinda attaisnot-satura-centra rinda justify-content-center attaisnot-satura beigas attaisnot-satura beigas attaisnot-saturs-around attaisnot-saturs-around attaisnot-saturs-starp attaisnot -saturs-starp

4.3. Piemales noņemšana starp kolonnām

Ļoti bieži ir situācijas, kad ir nepieciešams noņemt piemales starp kolonnām. Piemēram, ja veidojat galeriju un elementi ir jānovieto cieši kopā, piemēram:

Lai to izdarītu, vienkārši iestatiet papildu klasi “.no-gutters” uz elementu “.row”.

col-6 col-sm-4 col-md-4 col-sm-4 col-md-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-sm-4 col-md-4 col-6 col-sm-4 col-md-4 col-6 col-sm-4 col -md-4 kola-6 kola-sm-4 kola-md-4

4.4. Kolonnu pārvietošana uz jaunu rindu

Ja rinda (.rinda) ir aizpildīta ar kopējo kolonnu skaitu, kas pārsniedz 12, nākamā kolonna tiek pārvietota uz jaunu rindiņu.

.col-9 .col-4
9 + 4 = 13 kolonnas — tas ir vairāk nekā 12. Šis elements, 4 kolonnu platumā, tiks pārvietots uz jaunu rindu. .col-6
Tālāk norādītās kolonnas atradīsies gar līniju.

Šeit viss ir tāds pats kā Bootstrap 3. versijā. 5. Elementu secība 5.1. Elementu secības klases

Elementu secības noteikšanai varat izmantot īpašas klases ar prefiksu ".order-". Ja esat iepazinies ar Flex-layout, šie noteikumi jums būs pazīstami. Bootstrap 4 sniedz iespēju iestatīt elementu secību, izmantojot klases. Pasūtījumu var iestatīt tieši (.order-1.order-md-2):

Pirmais nesakārtotais elements

Vai arī varat izmantot īpašas klases, kas nosaka pirmā un pēdējā elementa secību (.order-first, .order-last):

Pirmais nepasūtītais Otrais, pasūtīts kā pēdējais Trešais, pasūtīts kā pirmais

5.2. Kolonnas nobīde

Pēc analoģijas ar Bootstrap 3, 4. versijai ir arī iespēja horizontāli nobīdīt kolonnas, taču tas tiek īstenots nedaudz savādāk, un tam ir īpašas klases ar prefiksu “.offset-”.

5.2.1. Pārvietojuma klases

Varat pārvietot kolonnu pa labi, izmantojot klases “.offset-md-*”, kas palielina kreiso atkāpi par * elementu skaitu. Zemāk redzamajā piemērā klase ".offset-md-2" pārvietos kolonnu ".col-md-4" par 2 kolonnām pa labi, pārējie piemēri darbojas tādā pašā veidā:

.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

Jūs varat atiestatīt nobīdi jebkurā izšķirtspējā, pateicoties klasei “.offset-*-0”, kur * ir sm, md, lg vai xl. 6. Ligzdošana

Ir diezgan sagaidāms, ka Bootstrap 4 atbalsta elementu ligzdošanu. Šeit viss darbojas tāpat kā trešajā versijā - lai ligzdotu kolonnas citās, ir jāizveido bērnklase “.row” un tajā jāievieto kolonnas.

1. līmenis: ".col-sm-9" 2. līmenis: ".col-8 .col-sm-6" 2. līmenis: ".col-4 .col-sm-6"

Mēs apskatījām galvenās funkcijas darbam ar Bootstrap 4 režģi. Ja vēlaties vairāk iepazīties ar visām ietvara iespējām, iesaku izpētīt dokumentāciju oficiālajā vietnē.

Nākamajā nodarbībā aplūkosim Bootstrap režģa iestatīšanu jūsu konkrētajam projektam, izmantojot OptimizedHTML 4 izmantošanas piemēru startera veidnē, proti, iestatīšana, darbs ar atkāpju, pārtraukuma punktu, kolonnu skaita un citām lietām.