✅ Mācīties lietot Bootstrap Grid

Satura rādītājs

Aile
B sleja
C sleja
Aile
B sleja
C sleja

Bootstrap pārvalda uz struktūru balstītu struktūru vai pazīstama arī kā Režģis, kas ir nekas cits kā izkārtojums ekrānā, kas palīdz mums sakārtot mūsu elementus, tas ir tā, it kā mēs sadalītu ekrānu rindās un kolonnās un apstrādātu to kā lielu tabulu.
Šāda veida manipulācijas liek mums domāt par dizainu "unikālā" veidā un brīdī, kad mums ir nedaudz lielāka pieredze to izmantošanā Bootstrap Mēs sāksim visu redzēt šādā veidā, un tādējādi mēs iegūsim konsekvenci un ātrumu mūsu darba veidā.
Pirmā lieta, kas jāzina, ir tas, ka šis dizains Režģis ļauj mums strādāt tā, lai mēs varētu īstenot mobilos skatus, protams, no 3. versijas Bootstrap, pateicoties tam, ka šī versija tika veidota, domājot par mobilo dizainu.
Iepriekšējās ietvara versijās klases bija jānorāda tieši, lai mūsu dizains varētu pielāgoties mobilo ierīču izšķirtspējai, tagad dažādām klasēm. Režģis viņi to dara automātiski.
Lai izmantotu šo iespēju, mums ir jādomā no maza līdz lielam, tas ir, par klasēm, kuras mēs piemērojam, vienmēr ir jādomā par mazākajām, un tad tās tiks pielāgotas citām izšķirtspējām, tas ir, ja mēs definēsim sm klase (mazs vai mazs), automātiski Bootstrap tas pieņem, ka šī ir minimālā izteiksme un ka pēc tam to var pielāgot md (mediāna) vai līdz lg (liels).
Pirms pāriet pie praktiskākiem piemēriem, mums ir jāsaprot, kuras klases mēs varam izmantot a slejās Režģis Un mums arī jāzina, uz kuru gadījumu katrs attiecas, tādā veidā, veidojot savu vietni, mēs varam ņemt vērā mazāko ierīci, kuru vēlamies sasniegt.
Izmantojot šo pieeju, mēs varam izveidot vietnes Draudzīgs mobilajām ierīcēm, cik svarīgi tie šodien kļūst meklētājprogrammām un to rezultātiem, tādējādi palīdzot mums papildus labām vietnēm nopelnīt dažus punktus mūsu reputācijā SEO, protams, ar to pašu darbu.
Tālruņa ekrāniTā ir mazākā ierīce, kas teorētiski var pārvietoties mūsu dizainā, lai gan tālruņu izšķirtspējas pakāpeniski tiek pārvērstas par Full HD, bet parasti tas ir augstākās klases, bet vidējais un zemais diapazons, kas teorētiski ir lielākā daļa saglabā daudz zemāku izšķirtspēju. Tāda veida Režģis uz šo gadījumu attiecas: col-xs- un attiecas uz risinājumiem, kas ir mazāki par platumu 768 pikseļi.
Planšetdatoru ekrāniTās teorētiski ir otrā mazākā ierīce, jo planšetdatoram ir lielāka izmēra proporcija, un tā piedāvā lielāku navigācijas virsmu, tāpēc mēs varam izmantot nedaudz vairāk satura nekā tālruņa ekrānā, turklāt parasti planšetdatoros navigācija tiek veikta horizontāli. Klase, kas attiecas uz šo ierīci, ir kol-sm- un attiecas uz izšķirtspēju, kuras platums ir lielāks par 768 pikseļi un zem 992 pikseļi.
Maza ekrāna aprīkojumsTie parasti ir tie, kas pieder pie galddatoru un klēpjdatoru zemā diapazona, tie var būt iekārtas ar ekrāniem, kas ir mazāki par 15 collām, vai kuru kalpošanas laiks pārsniedz 10 gadus, tie ir arī klēpjdatori, kas paredzēti studentiem un nozarei ar zemu pirktspēja, tas ir vairākuma sektors. Šajā gadījumā piemērojamā klase ir col-md-, un platuma ierobežojuma izšķirtspējas ir lielākas par 992 pikseļi un mazāk nekā 1200 pikseļi.
Liela ekrāna aprīkojumsŠeit mēs varam aplūkot vismodernāko aprīkojumu, kā arī ekrānus, kuru izmērs pārsniedz 15 collas, un šajā kategorijā tiek iekļauts jauns aprīkojums, piemēram, īpaši pārnēsājams, 4K izšķirtspēja vai QHD arī tur, kur redzam virsmas, kas ir lielākas par 1080p. Izslēdzot platumus, kurus mēs šeit apstrādāsim, tie ir lielāki par 1200 pikseļi, šī ir nākamā versija Bootstrap droši vien.
Tā kā mēs zinām sistēmas teoriju Režģis no Bootstrap, Ir labi sākt to praktiski pielietot, bet pirms koda redzēšanas mums ir jāsaprot vēl pāris jēdzieni, mums vienmēr pēc vienošanās un labākās prakses jāizmanto elements kopā ar klasi konteiners, jo tādējādi konteiners tiks izveidots tā nosaukumā, lai tas saglabātu mūsu dažādās kolonnas. Otrs jēdziens, kas mums jāzina, ir tāds, ka vienmēr būs 12 kolonnas, tāpēc dažādām kombinācijām, kuras mēs veidojam, ir jāņem vērā šis skaitlis.
Šajā piemērā mēs izveidosim kodu 3 lielu kolonnu izkārtojumam, mēs izmantosim klasi col-md- un, tā kā, dalot 12 ar 3, mēs vēlamies 3 vienādas kolonnas, mēs iegūstam skaitli 4, tāpēc tas būs katras mūsu kolonnas lielums.
Apskatīsim kodu bez papildu piepūles:

Bootstrap režģis

Piemērs, kā izmantot kolonnas bootstrap

Aile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam atvieglo manu in lorem pharetra, ut volutpat magna laoreet. Fusce sed mi ut turpis bibendum dictum.

B sleja

C sleja

Struktūra ir ļoti vienkārša, mēs esam izveidojuši div ar klasi konteiners, un iekšā div ar klasi rinda beidzot pēdējā ietvaros mēs ar klasi esam izveidojuši 3 divus col-md-4 Šī ir klase maziem ekrāniem, kas paredzēti pārnēsājamiem datoriem, un mēs redzam, kā izlozējam skaitli 4, kas norāda, ka katrs no tiem ir līdzvērtīgs četrām kolonnām. Režģis. Redzēsim, kā tas izskatās pārlūkprogrammā:

PALIELINĀT

Ja pamanām, tad mums ir 3 lielas kolonnas, bet kas notiek, ja mēs samazinām izmēru līdz izšķirtspējai, kas ir zemāka par pielietotās klases minimumu, jo kolonnas vienkārši tiks sakrautas viena virs otras, kā mēs redzam šāds attēls:

PALIELINĀT

Lai gan tas nav slikti, dažkārt tā nav uzvedība, ko vēlamies, lai mūsu dizains ņemtu vērā, tāpēc mēs varam iekļaut uzvedību tieši kopā ar klasēm dažādām izšķirtspējām. Tālāk redzēsim, kā mēs mainām klases dažādas kolonnas, lai sasniegtu atšķirīgu rezultātu:

Bootstrap režģis

Piemērs, kā izmantot kolonnas bootstrap

Aile

B sleja

C sleja

Tagad, ja savā kodā pamanām, viss paliek nemainīgs, izņemot mūsu klases, kur A un B slejām esam pievienojuši klasi col-sm-6 un C slejai - klase col-sm-12, tas nozīmē, ka, samazinot izšķirtspēju, noteiks sm klases, kā redzams šajā attēlā:

PALIELINĀT

Mēs redzam, ka tāda paša izmēra kā pirmais piemērs, tā vietā, lai būtu sakrautas, kolonnas A un B kļūst vienā un tajā pašā reģionā, un kolonna C aizņem vienu rindu. Šeit mēs redzam lielo lietderību Režģis it īpaši ar dizainu, kas vērsts uz atsaucību un mobilitāti.
Ar to mēs pabeidzam šo apmācību, kur mēs esam iemācījušies, kā sistēma Režģis no BootstrapProtams, šī ir tikai aisberga redzamā daļa, ir daudz vairāk satura, ko varam izpētīt citās apmācībās, taču ar šīm pamatzināšanām mēs varam sākt saprast, kā loģiskāk un ar mazākām pūlēm savienot mūsu dizainu, pateicoties ietvars.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu