Glavni razvoj lokacije za dizajnera izgleda počinje pravilnom izgradnjom mreže lokacije. Ako koristite Bootstrap 3, razumijevanje mreže okvira je bitno. U ovoj kratkoj napomeni pokušat ću razmotriti glavne nijanse prilikom korištenja mreže iz Bootstrapa. Članak je uglavnom prijevod dokumentacije Bootstrap Grid-a, ali i nekih mojih dodataka.

ambalažni kontejner

Bootstrap-u je potreban element koji bi omotao sadržaj stranice i smjestio naš grid sistem. Za svoj projekat možete koristiti jednu od dvije opcije.

Koristite .container za prilagodljivi kontejner fiksne širine (maksimalna širina kutije 1170px).

Koristite .container-fluid za kontejner sa širinom okvira za prikaz.

Mrežni sistem

Pa da pređemo na stvar.

Mreže se koriste za pravljenje izgleda stranica raspoređivanjem redova i kolona koji sadrže sadržaj.

Osnove bootstrap mreže:

• Red (linije) se moraju nalaziti unutar .container (popravak) ili .container-fluid (puna širina) radi pravilnog poravnanja i ispucavanja (uvlačenje - malo detaljnije razmotreno u nastavku).
• Koristite redove da kreirate horizontalnu grupu kolona.
• Sadržaj mora biti unutar kolona, ​​a samo stupci mogu biti prvi potomci redova.
• Unaprijed definirane klase mreže kao što su .row i .col-xs-4 omogućavaju vam da brzo kreirate raspored mreže.
• Kolone stvaraju praznine (praznine između sadržaja kolone) kroz padding. Ovo uvlačenje je pomjereno u redovima za prvu i zadnju kolonu pomoću negativne margine na elementu .row. Dodatak: možete naučiti više o korištenju negativnih margina, ali ukratko: pošto statički element .row nema postavljenu širinu, element .row će biti gurnut u lijevo/desno smjeru s povećanjem širine elementa.
• Zbog pomaka se sadržaj unutar mreže ispod poravnao sa sadržajem koji nije u mreži (ovo je očito o sadržaju članka - http://getbootstrap.com/css/#grid).
• Mrežni stupci se kreiraju navođenjem jednog broja od dvanaest mogućih za stupce koje želite kreirati. Na primjer, da napravite tri jednaka stupca, samo koristite .col-xs-4 .
• Ako se u jednom redu nalazi više od 12 kolona, ​​onda svaka grupa dodatnih kolona mora biti umotana u novi red.
• Mrežne klase su podijeljene na osnovu širine uređaja koji su definirani na prijelomnim tačkama. U ovom slučaju, na primjer, primjenom klase .col-md-* na element, njegov stil će se koristiti ne samo za srednje uređaje, već i za velike uređaje, ali samo ako klasa .col-lg-* nije set.

Da biste još lakše razumjeli sve ove principe, pogledajte sliku ispod:

Medijski upiti

Sljedeći medijski upiti se koriste za mrežu (iz LESS datoteke):

/* Veoma mali uređaji (telefoni, manji od 768px) */ /* Nema medijskih upita, pošto su ovi stilovi podrazumevani u Bootstrap-u */ /* Mali uređaji (tableti, 768px i više) */ @media (minimalna širina) : @screen-sm-min) ( ... ) /* Srednji uređaji (monitori, 992px i više) */ @media (min-width: @screen-md-min) ( ... ) /* Veliki uređaji ( veliki monitori, 1200px i više) */ @media (min-width: @screen-lg-min) ( ... )

Postavke mreže

Primjer: naslagano vodoravno

Koristeći .col-md-* klasu, kreirate mrežu koja počinje slagati (slaganje) na mobilnim uređajima; u isto vrijeme, na srednjim uređajima, ćelije su raspoređene vodoravno. Postavite stupce mreže u bilo koji .red.

naslagano prema horizontali

HTML

Primjer: posuda za tečnost

Promijenite mrežu iz fiksne širine u mrežu koja se proteže kroz cijeli prozor pretraživača zamjenom .container sa .container-fluid .

HTML

Primjer: mobilni telefoni i desktop uređaji

Ne želite da se vaše kolone slažu na mobilnim uređajima? Primijenite klase za male i srednje uređaje na stupce: .col-xs-* , .col-md-* . Pogledajte primjer u nastavku za bolje razumijevanje kako više klasa funkcionira.

Primjer na službenoj stranici je grid-example-mixed

HTML

Primjer: mobilni telefoni, tableti i desktop uređaji

Nadovezujući se na prethodni primjer, kreirajte još moćniji i dinamičniji izgled s klasom tableta .col-sm-*.

http://getbootstrap.com/css/#grid-example-mixed-complete

Primjer na službenoj stranici je grid-example-mixed-complete

HTML

Primjer: pomicanje stupca u novi red

Ako postoji više od 12 kolona u nizu, svaka grupa dodatnih kolona, ​​kao samostalna jedinica, prelazi u novi red.

Primjer na službenoj stranici je grid-example-wrapping

HTML

Reset za zvučnike koji reaguju

Sa mrežom od četiri kolone, mogli biste naići na problem gdje, za odgovarajuće tačke prekida, vaše kolone nisu pravilno poravnate jer je jedna kolona viša od druge. Da biste ovo popravili, koristite kombinaciju klase .clearfix i naših uslužnih responzivnih klasa.

Primjer na službenoj stranici - grid-responsive-resets

HTML

Osim čišćenja kolone na odgovarajućim prijelomnim tačkama, možda ćete trebati resetirati pomake, guranja ili povlačenja. Pogledajte ovo na djelu u primjeru mreže.

HTML

Pomak kolone

Pomaknite kolone udesno pomoću klase .col-md-offset-*. Ove klase povećavaju lijevu marginu kolone za * kolone. Na primjer, .col-md-offset-4 će pomaknuti .col-md-4 za četiri stupca.

Primjer na službenoj stranici - grid-offsetting

HTML

Ugniježđene kolone

Da ugnijezdite svoj sadržaj u postojeću mrežu, dodajte novi .red i postavite .col-md-* stupce unutar postojećih .col-sm-* stupaca.

Primjer na službenoj stranici - grid-gniježđenje

HTML

Redoslijed kolone

Redoslijed za stupce mreže može se promijeniti korištenjem klasa .col-md-push-* i .col-md-pull-*.

Primjer na službenoj stranici - mreža-kolona-red

HTML

U ovom članku ćemo raspravljati o Bootstrap Grid sistemu.

Šta je mreža?

U grafičkom dizajnu, Bootstrap mreža je struktura (obično dvodimenzionalna) sastavljena od niza ravnih linija koje se seku (vertikalne, horizontalne) koje se koriste za strukturiranje sadržaja. Široko se koristi za dizajn izgleda i strukturu sadržaja u dizajnu štampe. U web dizajnu je to vrlo efikasan metod brzo i efikasno kreirajte konzistentan izgled koristeći HTML i CSS.

Jednostavno rečeno, mreže u web dizajnu organiziraju i strukturiraju sadržaj, čine web stranice lakšim za indeksiranje i smanjuju kognitivno opterećenje korisnika.

Šta je sistem utovarne mreže?

Kako stoji u službenoj dokumentaciji Bootstrapa za grid sistem -

Bootstrap uključuje fleksibilni mobilni sistem prvog fluida koji se shodno tome povećava do 12 kolona kada se veličina uređaja ili okvira za prikaz povećava. Uključuje unaprijed definirane klase za jednostavne opcije rasporeda, kao i moćne miksine za kreiranje više semantičkih izgleda.

Hajde da objasnimo gore navedeno. Bootstrap 3 je prvo mobilan u smislu da kod za Bootstrap sada počinje ciljanjem na manje ekrane kao što su mobilni, tableti, a zatim "proširuje" komponente i mreže na veće ekrane poput laptopa, desktopa.

Mobilna strategija

• Sadržaj
• Odredite šta je najvažnije.
• Izgled
• Prvo napravite manju širinu.
• Prvo, osnovni mobilni uređaj sa CSS adresom; medijski upiti za tablete, desktope.
• progresivno poboljšanje
• Dodajte elemente kako se veličina ekrana povećava.

Kako radi Bootstrap Grid sistem

Web sistemi se koriste za kreiranje izgleda stranica u nizu redova i kolona u kojima se nalazi vaš sadržaj. Evo kako radi Bootstrap mreža -

• Stringovi moraju biti postavljeni u .container klasu da bi se pravilno poravnali i dodali.
• Koristite redove da kreirate horizontalne grupe kolona.
• Sadržaj mora biti smješten u kolone, a samo stupci mogu biti neposredna djeca redova.
• Da biste brzo kreirali raspored mreže, dostupne su unapred definisane klase mreže kao što su .row i .col-xs-4. LESS mixins se također može koristiti za više semantičkih rasporeda.
• Kolone stvaraju oluke (praznine između sadržaja kolone) kroz padding. Ovaj padding je pomjeren u redovima za prvu i zadnju kolonu s negativnom marginom na .rows.
• Mrežni stupci se kreiraju s brojem od dvanaest dostupnih stupaca koje želite obuhvatiti. Na primjer, tri jednake kolone bi koristile three.col-xs-4 .

Zahtjevi medija

Medijski upit je zaista fensi termin za "uslovno CSS pravilo". On samo primjenjuje neki CSS na osnovu određenih uslova. Ako su ovi uslovi ispunjeni, stil se primjenjuje.

Medijski upiti u Bootstrapu vam omogućavaju da premještate, prikazujete i sakrivate sadržaj na osnovu veličine prikaza ekrana. Sljedeći medijski upiti se koriste u LESS datotekama za kreiranje ključnih tačaka prekida u Bootstrap mreži.

/* Ekstra mali uređaji (telefoni, manji od 768px) */ /* Nema medijskog upita jer je ovo zadano u Bootstrapu */ /* Mali uređaji (tableti, 768px i više) */ @media (min. širina: @screen -sm-min) ( ... ) /* Srednji uređaji (desktops, 992px i više) */ @media (min-width: @screen-md-min) ( ... ) /* Veliki uređaji (veliki desktop, 1200px i više) */ @media (min-width: @screen-lg-min) ( ... )

Ponekad se proširuju na maksimalnu širinu kako bi ograničili CSS na uži skup uređaja.

@media (max-width: @screen-xs-max) ( ... ) @media (min-width: @screen-sm-min) i (max-width: @screen-sm-max) ( ... ) @media (min-width: @screen-md-min) i (maks-width: @screen-md-max) ( ... ) @media (min-width: @screen-lg-min) ( .. .)

Zahtjevi za medije imaju dva dijela: specifikaciju uređaja, a zatim pravilo veličine. U navedenom slučaju postavlja se sljedeće pravilo:

Razmotrite ovu liniju -

@media (min-width: @screen-sm-min) i (maks-width: @screen-sm-max) ( ... )

Za sve uređaje, bez obzira na tip sa minimalnom širinom: @screen-sm-min , ako širina ekrana postane manja od @screen-sm-max, uradite nešto.

Mrežne opcije

Sljedeća tabela sažima aspekte kako Bootstrapov grid sistem radi na više uređaja −

Glavna struktura mreže

Slijedi osnovna struktura Bootstrap mreže -

Razmotrite neke jednostavni primjeri rešetke -

• Primjer - presavijeno horizontalno
• Primjer - srednji i veliki uređaj
• Primjer: mobilni, tableti, desktop

Responzivna kolona je resetirana

Uz dostupna četiri nivoa mreža, trebali biste naići na probleme gdje, na određenim prijelomnim tačkama, kolone nisu sasvim jasne jer je jedna viša od drugih. Da biste ovo popravili, koristite kombinaciju klase .clearfix i odgovarajućih uslužnih klasa kao što je prikazano u sljedećem primjeru -

Promijenite veličinu okvira za prikaz ili ga testirajte na telefonu da biste dobili željeni rezultat u ovom primjeru.

ofset kolone

Pomaci su korisna karakteristika za specijalizovanije rasporede. Mogu se koristiti za povlačenje kolona na veću udaljenost (na primjer). Klase .col-xs-* ne podržavaju pomake, ali ih je lako replicirati koristeći praznu ćeliju.

Da biste koristili pomake na velikim ekranima, koristite klase .col-md-offset-*. Ove klase povećavaju lijevu marginu kolone za kolone *, gdje se * kreće od 1 do 11.

U sljedećem primjeru imamo div class = "col-md-6" . Ovo centriramo pomoću klase .col-md-offset-3.

Ovo će dati sljedeći rezultat -

Ugniježđene kolone

Da biste ugnijezdili sadržaj u zadanu mrežu, dodajte novi .red i skup .col-md-* stupaca unutar postojeće .col-md-* kolone. Ugniježđeni redovi moraju sadržavati skup stupaca koji zajedno čine 12.

U sljedećem primjeru, raspored ima dvije kolone, a drugi je podijeljen na četiri pravokutnika u dva reda.

Ovo će dati sljedeći rezultat -

Redoslijed kolone

Još jedna zgodna karakteristika Bootstrap-ovog grid sistema je da možete lako pisati kolone u redoslijedu i prikazati ih u drugom. Možete lako preurediti ugrađene kolone mreže pomoću klasa .col-md-push-* i .col-md-pull-*, gdje se * kreće od 1 do 11.

U sljedećem primjeru imamo dva izgleda kolona, ​​pri čemu je lijeva kolona najuža i djeluje kao bočna traka. Preurediti ćemo ove stupce koristeći klase .col-md-push-* i .col-md-pull-*.

Ovo će dati sljedeći rezultat -

Twitter Bootstrap Grid pruža brz i jednostavan način za kreiranje izgleda web stranica. Za razliku od prethodnog mrežnog sistema, koji je po defaultu fiksiran, nova verzija Twitter Bootstrap 3 ističe prilagodljiv mobilni izgled koji se proširuje na 12 kolona kako se povećava veličina uređaja ili veličina ekrana.

Bootstrap 3 uključuje unaprijed definirane mrežne klase za brzo kreiranje izgleda za različite tipove uređaja - mobilne telefone, tablete, desktope, itd. Na primjer, možete koristiti .col-xs- klasu da kreirate mrežu kolona za dodatne male uređaje kao što su mobilni telefoni. Klasa .col-sm je za male ekrane uređaja kao što su PDA uređaji. Klasa .col-MD je za srednje uređaje kao što su desktop računari, a klasa .col-lg za velike desktop ekrane. Sljedeća tabela sumira neke od ključnih karakteristika novog mrežnog sistema.

Gornja tabela pokazuje jednu važnu stvar - primjena bilo koje klase .col-sm će utjecati na stil elementa ne samo na malim uređajima poput tableta, već i na srednjim i velikim uređajima koji imaju veličinu ekrana veću ili jednaku 768px, ako .col-md- i .col-lg- nemaju klasu. Slično, .col-md-class neće uticati samo na stilizovanje elemenata na srednjim uređajima, već i na velikim uređajima ako klasa .col-lg- nije navedena.

Kreiranje mreže sa Twitter Bootstrap 3 Grid sistemom

Sa novom Twitter Bootstrap 3 mrežom, možete lako upravljati i vidjeti kako će izgled vaše web stranice izgledati na različitim tipovima uređaja koji imaju različite veličine ekrana. Pogledajmo sljedeći primjer.

Na gornjoj ilustraciji postoji ukupno 12 kolona sadržaja na svim uređajima, ali njihov položaj varira ovisno o veličini ekrana uređaja. AT mobilni uređaj raspored se prikazuje kao mreža koja ima 1 kolonu i 12 redova postavljenih jedan na drugi, dok se u tabletu prikazuje kao mreža koja ima 2 kolone i 6 redova. Slično, na uređajima sa srednjom veličinom ekrana, kao što su laptop i desktop računar, on je obezbeđen kao raspored koji ima 3 kolone i 4 reda. Konačno, na uređajima sa velikim ekranima, raspored je mreža koja ima 4 kolone i 3 reda.

Sada se postavlja pitanje kako možemo kreirati takve responzivne izglede koristeći Twitter Bootstrap. Počnimo sa uređajima srednje veličine - laptop ili običan desktop računar. Naš raspored ima 3 kolone i 4 reda (tj. raspored mreže 3x4). Unesite sljedeće oznake:

Ako pogledamo gornji primjer na laptopu ili desktop računaru koji ima ekran ili okvir za prikaz koji je veći ili jednak 992px i manji od 1200px širok, vidjet ćemo 4 reda gdje svaki red ima 3 jednake kolone.

U gornjem primjeru postoji jedan ozbiljan problem poravnanja. Ako je visina nekog stupca veća od drugog, onda se neće pravilno prilagoditi drugom i integritet će biti narušen. Da to popravite, koristite .clearfix klasu i adaptivne uslužne klase.

Pošto zadana mreža ima 12 kolona i u našem rasporedu je zbir svake tri kolone (tj. col-md-*) 12, kolone brišemo nakon svakog trećeg pojavljivanja. U svakom drugom slučaju kada se kolone col-md-* razlikuju, moramo koristiti .clearfix iza kolone, što čini punu mrežu od 12 kolona. .visible-md-block reaktivna uslužna klasa čini .clearfix klasu efikasnom samo na uređajima srednje veličine i skrivenom na drugim uređajima.

savjet: Prvo morate odabrati primarni ciljni uređaj i kreirati izgled za taj uređaj, a zatim dodati klase kako bi dizajn bio prilagodljiv drugim uređajima.

Sada je vrijeme da postavimo naš izgled za druge uređaje. Podesimo ga za tablet. Pošto je naš izgled prikazan kao mreža 2x6 na tablet računaru (tj. 2 kolone i 6 redova), moramo dodati .col-sm-6 klasu svakoj koloni.

Sada, pošto je zbir svake dvije kolone, tj. col-sm-* je 12, nakon svake druge kolone, sljedeći drugi su ispod.

Nakon čišćenja za male uređaje, naš konačni kod će izgledati ovako:

Na sličan način možemo postaviti izgled za velike uređaje kao što je desktop ekran ličnog računara.

savjet: Prema gore navedenom kodu, nema potrebe konfigurirati lokaciju za dodatne male uređaje kao što su mobilni telefoni. Na kraju krajeva, kolone na dodatnim manjim uređajima su uvijek horizontalne i po zadanom se pojavljuju kao jedna kolona rasporeda mreže.

Prilagodljive uslužne klase

Možete koristiti sljedeće responzivne klase za kontrolu vidljivosti elemenata na nekim uređajima kada se veličina ekrana smanji iz određenog raspona.

U verziji v3.2.0 okvira, klasa .visible-*-* za svaku tačku dolazi u tri varijacije, po jedna za svaki CSS prikaz: inline, block i inline-block.

savjet: Također možete miješati ove klase kako biste elemente učinili vidljivim na više uređaja. Na primjer, možete primijeniti klase .visible-xs-* i .visible-md-* na bilo koji element kako biste ga učinili vidljivim na dodatnim malim i srednjim uređajima.

Ova stavka se prikazuje samo na dodatnim malim uređajima.

Ova stavka se prikazuje samo na malim uređajima.

Ova stavka se prikazuje samo na srednjim uređajima.

Ova stavka se prikazuje samo na velikim uređajima.

Slično, možete koristiti ove skrivene uslužne klase da sakrijete elemente na nekim uređajima.

savjet: Također možete miješati ove klase kako biste elemente sakrili na više uređaja. Na primjer, možete primijeniti klase .hidden-xs i .hidden-md na bilo koji element kako biste ga učinili skrivenim na dodatnim malim i srednjim uređajima.

Ova stavka je skrivena samo na dodatnim malim uređajima.

Ova stavka je skrivena samo na malim uređajima.

Ova stavka je skrivena samo na srednjim uređajima.

Ova stavka je skrivena samo na velikim uređajima.

Pored normalnih responzivnih klasa, možete koristiti sljedeće uslužne klase da prikažete ili sakrijete određene elemente za ispis na uređajima.

U ovom članku ćemo se upoznati sa klasama okvira Bootstrap 3, dizajniranih da kreiraju adaptivni "kostur" (izgled) stranice.

"Izgradnja" Grid Elements Bootstrap 3

Bootstrap mreža se sastoji od "građevinskih" elemenata. Glavni su ambalažni kontejneri, redovi , adaptivni blokovi i prilagodljive uslužne klase.

U suštini, grid je samo lista unaprijed definiranih klasa pomoću kojih možete postaviti potrebno ponašanje za blokove (HTML elemente) i uz njihovu pomoć izgraditi određeni prilagodljivi izgled stranice.

Wrappers

ambalažni kontejner- ovo je "građevinski" element mreže od kojeg počinje kreiranje izgleda za cijelu stranicu ili njen dio (na primjer, zaglavlje, glavni meni, glavno područje, podnožje), ovisno o strategiji razvoja.

Događa se kontejner u Bootstrapu adaptivno-fiksiran ili adaptivna guma.

Prvi ( adaptivno-fiksirani kontejner) karakterizira to što ima konstantnu širinu unutar nekog raspona širine okvira za prikaz.

Sljedeća tabela pokazuje koliko je širok responzivni fiksirani kontejner na datoj širini prozora preglednika:

Osim postavljanja širine, Bootstrapov responzivno fiksirani kontejner se također centrira horizontalno u odnosu na ivice stranice. To radi sa CSS svojstvima margin-left:auto i margin-right:auto. Kontejner sa responzivnim fiksiranjem takođe postavlja padding levo i desno za 15px (koristeći CSS svojstva padding-left:15px i padding-right:15px) za sadržaj koji se nalazi u njemu.

Spremnik s adaptivnom tekućinom razlikuje se od adaptivno-fiksnog spremnika po tome što zauzima cijelu širinu(100%) prozor pretraživača. Osim toga, on, poput adaptivno-fiksiranog kontejnera, postavlja unutrašnje margine lijevo i desno za 15px za sadržaj koji se nalazi u njemu.

Prilikom izrade izgleda stranice, obično se ne koriste ugniježđujući neke Bootstrap omote unutar drugih.

Dakle, prvi "građevinski" element Bootstrap mreže je omotač kontejnera. Određuje širinu izgleda na različitim okvirima za prikaz, a također ga centrira (samo adaptivno fiksni kontejner) u odnosu na lijevu i desnu ivicu klijentskog područja kartice ili prozora preglednika.

Sljedeći građevinski element je red (div blok sa klasom reda). Red je poseban blok koji se koristi samo za omotavanje drugih građevinskih elemenata (adaptivnih blokova). Njegova glavna svrha je neutralizirati pozitivni padding (15px lijevo i desno) omotača ili responzivnog bloka.

Primjer formiranja uvlaka:

Kontejner (+15px) -> red (-15px) -> kolona (+15px) -> kontejner sadržaja (+15px) -> red (-15px) -> kolona (+15px) -> red (-15px) -> col (+15px) -> content *col je responzivni blok

Primjer pokazuje da bez obzira u kojem se responzivnom bloku sadržaj nalazi, uvijek će imati ispravnu marginu (tj. 15px lijevo i desno).

Sljedeći "građevinski" element Bootstrap mreže je responzivni blok (div sa klasom col-?-?).

adaptivni blokovi jesu li Bootstrap grid stavke koje imaju jednu ili više kolona-?-? . Ovi blokovi su glavne "građevinske" cigle, formiraju potrebnu strukturu.

Širina adaptivnog bloka je podešena vezano za tip uređaja. To znači da responzivni blok može imati različite širine na različitim uređajima. Zbog toga se ovaj blok naziva adaptivni.

Kako je postavljena širina responzivnog bloka? Postavka širine za responzivni okvir koji bi trebao imati na određenom uređaju je po defaultu postavljena na broj između 1 i 12 (broj Bootstrap kolona). Ovaj broj je prikazan umjesto drugog znaka? u razredu kol-?-? .

Ovaj broj (podrazumevano 1 do 12) definiše koliki procenat širine roditeljskog elementa mora imati adaptivni blok.

Na primjer, broj 1 postavlja širinu okvira koji odgovara na 8,3% (1/12) širine roditeljskog okvira. Broj 12 je širina jednaka 100% (12/12) širine roditeljskog bloka.

Osim specificiranja širine adaptivnog bloka također morate navesti tip uređaja(umjesto 1 pitanja). Klasa uređaja će odrediti na koji okvir prikaza će se primijeniti ova širina. Bootstrap 3 razlikuje 4 glavne klase. To su xs (širina okvira za prikaz >0), sm (širina okvira za prikaz >= 768px), md (širina okvira za prikaz >= 992px) i lg (širina okvira za prikaz >=1200px).

Na primjer, adaptivni blok s klasom col-xs-12 col-sm-6 col-md-4 col-lg-3 imat će širinu od 100% (12/12) na xs i 50% (6/12 ) na sm , na md - 33,3% (4/12), na lg - 25% (3/12).

Osim toga, treba obratiti pažnju na činjenicu da adaptivni blokovi ne ograničavaju njihov domet. One. ako navedete xs u atributu klase adaptivnog bloka, ali ne specificirate sm , tada će se njegov učinak proširiti na opseg ovog raspona.

Na primjer, adaptivni blok s klasom col-xs-6 col-lg-3 imat će širinu od 50% (6/12) na xs, sm i md uređajima i 25% (3/12) na lg.

Adaptivni blok, poput kontejnera, postavlja pozitivne margine od 15px lijevo i desno za sadržaj koji će biti smješten u njega.

U pravilnom Bootstrap rasporedu mreže, responzivni blok bi uvijek trebao imati red kao roditelj.

Na primjer, podijelimo blok na 3 jednaka stupca, koji će biti prikazani vertikalno na xs, a horizontalno na sm i iznad:

Na primjer, izračunajmo dostupnu širinu za sadržaj za prvi i drugi blok:

Odzivni blokovi se postavljaju u roditeljski element jedan za drugim u redovima. Jedan red sadrži adaptivne blokove sa ukupnim brojem kolona ne većim od 12 (podrazumevano). One. blokovi koji se ne uklapaju u prvi red stavljaju se u sljedeći red i tako dalje.

Kako su raspoređeni adaptivni blokovi?

U Bootstrapu 3, odzivni blokovi su plutajući (float:left). Ovo se mora uzeti u obzir prilikom kreiranja izgleda web stranice.

Prije bloka, koji mora početi u novom redu, potrebno je postaviti prazan div element sa klasom clearfix. Također ga morate sakriti za uređaje na kojima se ova radnja ne mora izvoditi. Blok je skriven korištenjem odgovarajućih klasa datih u nastavku.

Plutajući blokovi također imaju jednu osobinu. Na primjer, ako će u gornjem primjeru visina 1 bloka biti veća od 2 bloka. Tada se blok 3 neće nalaziti na novoj liniji, već će se "zalijepiti" na desnu stranu bloka 1.

Da biste to spriječili, morate dodati blok s klasom clearfix i učiniti ga vidljivim potrebnim uređajima (na primjer, na md i lg):

Osnovni princip kreiranja rasporeda

Osnovni princip kreiranja rasporeda je da se neki adaptivni blokovi ugnezde u druge. Istovremeno, njihova širina je uvijek relativan parametar, koji se postavlja kao postotak (prema broju kolona) širine roditeljskog bloka. One. na bilo kojem nivou ugniježđenja, na primjer, blok sa 6 stupaca koji reagira uvijek je 50% (6/12*100%) širine roditeljskog elementa.

Na primjer, podijelimo neki blok (glavni) na 4 bloka (2 u prvom redu i 2 u drugom). Radi jednostavnosti, kreirat ćemo izgled koji nije prilagodljiv:

Kreirajmo raspored od 3 bloka (3 x 2):

Lako je vidjeti da se raspored ugniježđenog adaptivnog bloka izvodi na isti način kao i glavni. To znači da nije bitno koji nivo ugniježđenja blok ima, njegov raspored se kreira po istim pravilima.

Klase za adaptivni blok offset

Bootstrap ima responzivne klase (col-?-offset-?) koje možete koristiti za pomicanje bloka za određeni broj kolona udesno. Prvi? mora se zamijeniti tipom uređaja (xs , sm , md ili lg). Sekunda? za broj kolona.

Na primjer, postavimo blok na md uređajima na 8 kolona širine i postavimo ga u red u sredini (tj. pomjerimo ga 2 kolone udesno):

Pored alata za adaptivni blok offset, Bootstrap 3 također ima posebne klase koje se mogu koristiti za promjenu redoslijeda elemenata unutar jedne linije.

Bootstrap 3 Responsive Utility Classes

Bootstrap 3 sadrži adaptivne (korisne) klase koje vam omogućavaju da kontrolišete vidljivost prikaza elemenata u zavisnosti od tipa uređaja.

Pored navođenja uređaja (xs, sm, md, lg) na kojem će blok biti vidljiv, morate navesti i kako bi trebao biti prikazan na ovom uređaju. Opcije su inline , block i inline-block .

Umjesto znaka? block , inline , ili inline-block moraju biti specificirani. One. odrediti kako element treba biti prikazan.

Na primjer, dodavanje klase visible-md-block elementu će značiti da će biti prikazan samo na uređajima koji imaju md viewport (širina viewport >=992px i<1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).

Napomena: Ove klase se također mogu koristiti zajedno kako bi elementi bili vidljivi na više uređaja. Na primjer, ako na element primijenite klase visible-xs-inline i visible-md-inline, to će ga učiniti vidljivim i na uređajima sa malim i srednjim ekranima. Ovaj element će biti prikazan kao inline (CSS: display:inline;).

Pored ovih, Bootstrap 3 ima više klasa sa suprotnim efektom. Mogu se koristiti za sakrivanje stavki na određenim uređajima.

Ove klase se također mogu koristiti zajedno kako bi element bio nevidljiv na više uređaja.

Na primjer, element s klasama hidden-xs i hidden-sm neće biti vidljiv na 2 uređaja odjednom (xs i sm).

Pored gore navedenih responzivnih klasa, okvir Bootstrap 3 sadrži i one koje vam omogućavaju da kontrolišete vidljivost elemenata kada se štampaju.

Primjer rasporeda mreže Bootstrap 3

U ovom dijelu članka proći ćemo kroz proces kreiranja responzivnog izgleda bloka pomoću mreže Bootstrap 3.

Raspored se sastoji od tri bloka. Ovi blokovi bi trebali biti smješteni na uređajima kao što je prikazano na slici.

Dizajniranje izgleda obično počinje sa sićušnim uređajima (xs). Na ovom uređaju blokovi imaju istu širinu, jednaku 12 Bootstrap kolona.

Na sm, blokovi su raspoređeni na sljedeći način:

• 1 - zauzima cijelu širinu roditeljskog bloka;
• 2 i 3 (svaki od njih) - širina jednaka 6 Bootstrap kolona.

Na md, blok 1 i 2 su u prvom redu, a blok 3 je u 2. redu. 1. blok ima širinu jednaku 8 Bootstrap kolona (col-md-8), 2. blok ima 4 kolone (col-md-4).

Treći blok uvijek treba postaviti na 2. red. Da bi se to osiguralo, ispred ovog bloka mora se postaviti dodatni prazan blok sa clearfixom klase. Ovaj blok neće dozvoliti blok 3 da se omota oko prethodnih blokova. Osim toga, imajte na umu da blok sa klasom clearfix mora biti prikazan samo na md , jer ova radnja nije potrebna na drugim uređajima.

Na lg-u su adaptivni blokovi raspoređeni vodoravno i zajedno zauzimaju cijelu širinu. Polje 1 treba da bude polovina širine roditeljskog elementa (col-lg-6), polje 2 treba da bude četvrtina širine (col-lg-3), a polje 3 takođe treba da bude jedna četvrtina širine nadređenog elementa (kol-lg-3) .

Više zanimljivih tema.

01.06.2016

Zdravo!
Nastavljamo sa učenjem bootstrap 3 osnove. Vrijeme je da se u "bootstrapu 3" upoznate s takvim konceptom kao što je mreža.
Uz pomoć mreže, moći ćete kreirati svoj prvi adaptivni žičani okvir (web stranicu).
Dakle, Bootstrap mreža se sastoji od redova i kolona.

Prije kreiranja stupaca, potrebno je da napišete red. Da biste to učinili, samo napišite div oznaku sa klasom "row".

Dakle, prvo je upisan red, a kolone su već izgrađene u liniji.

1. Kreirajte string:

2. Kreirajte kolone (mrežu):

Bootstrap mreža se sastoji od 12 kolona jednake širine.
Po potrebi se stubovi mogu kombinovati i postaviti u željeni položaj.

Da kreirate kolone, morate napisati klasu unutar "reda"
"kol-( *1 )-(*2 ) ».
Gdje (*1) označavamo za koje grupe uređaja trebate izvršiti ( vidi tabelu 1 ).
Gdje (*2) označavamo broj (broj kolona)
(vidi tabelu 2 ).

(tab. jedan) Bootstrap tabela oznaka za različite grupe uređaja

Pogledajmo ovu tačku na primjeru.
Gledajući tabelu, možemo kreirati kolone (izgraditi mrežu) za različite grupe uređaja (mobilni telefoni, tableti, računari, itd.).

Na primjer:

Ovako određujemo za koje uređaje želimo da kreiramo zvučnike.

Sada hajde da shvatimo šta je (*2 ). Pošto sam to već pomenuo, ovo je broj koji označava broj kolona
(vidi tabelu 2 ).

(tab. 2) Bootstrap3 raspored mreže

U tabeli možete vidjeti da se Bootstrap mreža sastoji od 12 kolona jednake širine.
Da biste naveli 12 identičnih stupaca za sve uređaje, umjesto ( * 2 ), morate navesti broj koji odgovara. Ali zapamtite da bi ukupno trebalo biti 12.

Pogledajmo primjer:

Da biste razumeli šta sam rekao o činjenici da ukupan iznos treba da bude jednak 12, uradićemo aritmetički proračun.
Pogledajte redove #2 i #3.

○ col-lg-12 i col-lg-12 . ( veličina ekrana ≥1200px).

rezultat:

○ col-md-8 i col-md-4 . ( veličina ekrana ≥992px).
Na ekranu će biti dvije kolone, pošto je 8 + 4 = 12 (isto isti iznos od kojeg se sastoji mreža).
Lijeva strana će kombinovati 8 kolona, ​​a desna 4.

rezultat:

○ kol-sm-6 i kol-sm-6 ( veličina ekrana ≥768px).
Na ekranu će biti dvije kolone, budući da je 6 + 6 = 12 (isto isti iznos od kojeg se sastoji mreža).
Lijeva strana će kombinovati 6 kolona, ​​a desna 6.

rezultat:

○ col-xs-12 i col-xs-12 ( Veličina ekrana<768px ).
Kolone na ekranu će biti u dva reda za cijelu širinu, pošto je označen broj 12, a mreža se sastoji od samo 12 kolona.

rezultat:

Jasno?
Pređimo na praksu.
Pokušajmo stvoriti takav prilagodljivi izgled stranice na Bootstrap3:

Da biste kreirali takav raspored, jednostavno ste morali proći kroz sve 4 lekcije o osnovama Bootstrap3.
Dakle, evo rješenja (preporučujem da pregledate kod kako biste konsolidirali novo znanje):