Blokeerimissüsteem · Bootstrap vene keeles. Blokeerimissüsteem · Bootstrap inglise keeles Kuidas see töötab

Bootstrap grid süsteem

Bootstrapi ruudustikusüsteem võimaldab kuni 12 veergu kogu lehel.

Kui te ei soovi kõiki 12 veergu eraldi kasutada, saate laiemate veergude loomiseks veerud rühmitada.

ulatus 1

ulatus 4

ulatus 8

ulatus 6

vahemik 12

Bootstrapi ruudustikusüsteem on tundlik ja veerud järjestatakse ümber vastavalt ekraani suurusele: suurel ekraanil võib see parem välja näha, kui sisu on korraldatud kolme veergu, kuid väikesel ekraanil oleks parem, kui sisuelemendid oleksid virnastatud e peal. teised.

Nõuanne. Pidage meeles, et ruudustiku veergude arv peab olema kuni kaksteist rida. Lisaks virnatakse veerud vaatamata vaateavale.

Võrguklassid

Grid Bootstrap süsteemil on neli klassi:

xs (telefoniekraanide jaoks, mille laius on alla 768 piksli)
sm (tahvelarvutitele, mille laius on 768 pikslit või suurem)
md (väikeste sülearvutite ekraanide jaoks, mille laius on 992 pikslit või suurem)
lg (süle- ja lauaarvutitele – ekraanid, mille laius on 1200 pikslit või rohkem)

Ülaltoodud klasse saab kombineerida, et luua dünaamilisemaid ja paindlikumaid paigutusi.

Näpunäide: iga klassi suurus suureneb, nii et kui soovite määrata XS-i ja SM-i jaoks sama laiuse, peate määrama ainult XS.

Võrgusüsteemi reeglid

Mõned Bootstrapi ruudustiku reeglid:

Ridad tuleb õigeks joondamiseks ja polsterdamiseks paigutada konteineri (fikseeritud laiusega) või konteineri vedeliku (täislaiusega) piiresse
Ridade kasutamine horisontaalsete veerurühmade loomiseks
Sisu tuleb paigutada veergudesse ja ainult veerud võivad olla ridade vahetuteks järelteks
Ruudustiku paigutuste kiireks loomiseks on saadaval nii eelmääratletud .row klassid kui ka .col-sm-4
Veerud loovad rennid (lüngad veeru sisu vahel) koos polstriga. See on esimese ja viimase veeru ridade nihke polsterdamine negatiivse veerisega ridadel
Ruudustiku veerud luuakse, määrates 12 saadaoleva veeru arvu. Näiteks kolm võrdset veergu kasutaksid three.col-sm-4
Veergude laiused protsentides, nii et need on alati sujuvad ja nende suurused võrreldes vanemaga

Laadimisresti põhistruktuur

Allpool on Bootstrapi ruudustiku põhistruktuur:

...

Seega peate paigutuse loomiseks looma konteineri (). Seejärel loo string(). Seejärel lisage nii palju veerge, kui vaja (sobivate .col-*-* klassidega sildid). Pange tähele, et .col-*-* numbrid peavad alati iga rea kohta andma kuni 12.

Võrgu valikud

Järgmine tabel võtab kokku, kuidas Bootstrapi Grid süsteem töötab mitmes seadmes.

Eriti väike
=768px Keskmine
>=992 pikslit suur
>=1200 pikslit

klassi eesliide	.col-xs-	.col-sm-	.col-md-	.col-lg-
Sobilik	Telefonid	tabletid	Väikesed sülearvutid	Sülearvutid ja lauaarvutid
Võrgu käitumine	Horisontaalne kogu aeg		Alustamiseks ahendatud, horisontaalne murdepunktide kohal	Alustamiseks ahendatud, horisontaalne murdepunktide kohal
Mahuti laius	Puudub (automaatne)	750 pikslit	970 pikslit	1170 pikslit
# veergudest	12	12	12	12
Veeru laius	Automaatne	~62 pikslit	~81 pikslit	~97 pikslit
Renni laius		30 pikslit (15 pikslit veeru mõlemal küljel)	30 pikslit (15 pikslit veeru mõlemal küljel)	30 pikslit (15 pikslit veeru mõlemal küljel)
Pesastav	Jah	Jah	Jah	Jah
tasaarvestused	Jah	Jah	Jah	Jah
veergude järjestamine	Jah	Jah	Jah	Jah

Näited

Järgmistes peatükkides on näiteid erinevate seadmete võrgusüsteemidest.

01.06.2016

Tere kõigile!
Jätkame "bootstrap 3" põhitõdede õppimist. On aeg tutvuda "bootstrap 3" sellise kontseptsiooniga nagu ruudustik.
Võrgustiku abil saate luua oma esimese kohanduva saidi traatraami (veebilehe).
Nii et Bootstrapi ruudustik koosneb ridadest ja veergudest.

Enne veergude loomist peate kirjutama rea. Selleks kirjutage lihtsalt div silt klassiga "rida".

...tulevad veerud...

Niisiis, kõigepealt kirjutatakse rida ja reale on juba veerud ehitatud.

1. Looge string:

...tulevad veerud... ...tulevad veerud...

2. Looge veerud (ruudustik):

Bootstrapi ruudustik koosneb 12 võrdse laiusega veerust.
Vajadusel saab sambaid kombineerida ja paigutada soovitud asendisse.

Veergude loomiseks peate kirjutama klassi " rida" sisse
"veerg-(*1)-(*2)".
Kus (*1) näitame, milliste seadmerühmade jaoks peate käivitama ( vaata tabelit 1 ).
Kus (*2 ) tähistame arvu (veergude arvu)
(vaata tabelit 2 ).

(sakk. 1) Bootstrap märgistuse tabel erinevate seadmerühmade jaoks

Vaatame selle punktini näitega üles.
Vaadates tabelit, saame erinevatele seadmerühmadele (mobiiltelefonid, tahvelarvutid, arvutid jne) luua veerge (ehitada ruudustiku).

Näiteks:

ajaveebi sait

Nii määrame, milliste seadmete jaoks tahame kõlareid luua.

Nüüd selgitame välja, mis on (*2 ). Kuna ma seda juba eespool mainisin, on see arv, mis näitab veergude arvu
(vaata tabelit 2 ).

(sakk. 2) Bootstrap3 ruudustiku paigutus

Tabelis on näha, et Bootstrapi ruudustik koosneb 12 võrdse laiusega veerust.
Kõigi seadmete jaoks 12 identse veeru määramiseks ( * 2 ) peate määrama numbri, mis sobib. Kuid pidage meeles, et kogusumma peaks olema 12.

Vaatame näidet:

ajaveebisaidi Bootstrap märgistuse tabel

Selleks, et saaksite aru, mida ma ütlesin selle kohta, et kogusumma peaks olema 12, teeme aritmeetilise arvutuse.
Vaadake ridu 2 ja 3.

○ col-lg-12 ja col-lg-12 . (ekraani suurus ≥1200 pikslit).

Tulemus:

○ col-md-8 ja col-md-4 . (ekraani suurus ≥992 pikslit).
Ekraanil on kaks veergu, kuna 8 + 4 = 12 (just sama palju, millest ruudustik koosneb).
Vasak pool ühendab 8 veergu ja parem külg 4.

Tulemus:

○ col-sm-6 ja col-sm-6 (ekraani suurus ≥768 pikslit).
Ekraanil on kaks veergu, kuna 6 + 6 = 12 (just sama palju, millest ruudustik koosneb).
Vasak pool ühendab 6 veergu ja parem pool 6 veergu.

Tulemus:

○ col-xs-12 ja col-xs-12 (ekraani suurus .col-lg-12, .col-lg-3, .col-lg-4, .col-lg-8, .col-md-12, .col-md-3, .col-md-4, .col-md-8, .col-sm-12, .col-sm-3, .col-sm-4, .col-sm-8, . col-xs-12 ( ääris: 1 pikslit täis # ccc; kõrgus: 60 pikslit; ) Plokk 1 Plokk 2 Plokk 3 Plokk 4 Menüü sisu

Näete tulemust ja samal ajal saate oma telefonist, tahvelarvutist või arvutist kontrollida, kuidas loodud paigutus avaneb.

Tere, kallid ajaveebisaidi lugejad. Artikli esimeses osas tutvusime selle raamistiku võimalustega, saime teada, mis on tundlik disain ja miks see on meie ajastul, kus erinevate mobiilsete vidinate populaarsus kasvab, nii oluline. Seal käsitlesime üksikasjalikult ka Bootstrapi ühendamist HTML-lehega (laadifailide, skriptide ja jQuery teegi ühendamine).

Tänane artikkel räägib Bootstrap 3-s kasutatavast ruudustikusüsteemist. Saate teada, milliseid ruudustiku suurusi saab kasutada, kuidas need erineva ekraanisuurusega seadmetes käituvad ning kuidas ühe või mitme ruudustiku põhjal ise ridu ja lahtreid luua. Seda kõike selgitatakse näidetega, mis loodetavasti parandavad taju.

Kuidas ruudustikusüsteem Bootstrap 3-s töötab

Bootstrap 3 on varustatud 12-veerulise võrgusüsteemiga, mis on mõeldud peamiselt mobiilseadmete jaoks. Need. see on loodud silmas pidades ennekõike väikeseid ekraane, teiseks - laiekraane. Selle raamistiku uuel versioonil on neli ruudustiku suurust. Kogu seda teavet saab üksikasjalikult uurida ametlikul veebisaidil GetBootstrap.com, minnes ülemisest menüüst vahekaardile "CSS" ja valides parempoolsest üksuse "Grid system".

Sealt saate täieliku selgituse süsteemi toimimise, seotud meediumipäringute jms kohta. Html-elementide rida (nt avalehe artiklite teadaanded), mille soovite ruudustikul paigutada, peab olema ümbritsetud konteineriga (näiteks Div-siltide sees) ja klass .row tuleb määrata sellele (sel juhul näeb avamärgend välja selline ) .

Noh, saate rea sees olevaid elemente jaotada korraga ühe või mitme ruudustiku tüübi vahel, määrates klassi atribuudi väärtusega, näiteks .col-xs-number (sel juhul kasutatakse ainult eriti väikest ruudustikku ).

Näiteks kui soovite selle tulemusel saada kolm võrdse suurusega veergu, peate jagama 12 (Bootstrap 3 ruudustiku mõõde) 3-ga (vajalik arv veerge). See tähendab, et iga rea sees oleva HTML-i elemendi jaoks (need võivad jällegi olla Div-konteinerid) peate registreerima samad klassid - . Kui vajate ebavõrdse laiusega veerge, siis peate lihtsalt täitma tingimuse, et kõigis kolmes klassis peavad arvud pärast col-xs- olema kokku 12 (näiteks 2-4-6). Kuid kõigepealt vaatame, mis on selles kirjes "xs" ja mida see tähendab?

Veidi madalamalt alalt "Grid options" leiate selgituse ülalmainitud moodsa Bootstrapi ruudustiku nelja suuruse kohta.

Kõigepealt tuleb väga väike ruudustik (veerus „Eriti väikesed seadmed”), mis on mõeldud mobiilseadmete jaoks, mille ekraani suurus on alla 768 piksli (lugege allolevat linki). See on alati horisontaalne mis tahes ekraanisuuruses ja mis see on, proovin allpool selgitada. Pange tähele, et seda tüüpi ruudustiku klassi eesliide on lihtsalt col-xs , nagu ülaltoodud näites.

Kui seadme ekraani suurus jääb vahemikku 768–992 pikslit (nüüd on enamasti tegemist tahvelarvutitega), siis neile sobib väikestele seadmetele mõeldud Bootstrap grid. Seda nimetatakse väikeseks ja selle täpsustamiseks kasutatakse klassi col-sm eesliiteid.

Seadmete jaoks, mille ekraani suurus on suurem kui 992, kuid alla 1200 (enamasti laua- või sülearvutimonitorid), on keskmiste seadmete jaoks olemas ruudustik. Seda nimetatakse keskmiseks ja sellel on klassi eesliide col-md .

Noh, monitoride jaoks, mille laius on üle 1200 piksli, on suurim ruudustik col-lg klassi eesliitega.

Viimased kolm ruudustikku on horisontaalsed ainult siis, kui ekraani suurus on suurem kui kokkuvarisemise punkt. Näiteks suurema kui 1200 piksliga ekraanide puhul ei ole see enam horisontaalne ja muutub vertikaalseks. Ametliku saidi GetBootstrap.com lehel, mida praegu üle vaatame, on selle kohta näiteid ja selgitusi. Kuid minu meelest on kõik mõnevõrra segane ja keeruline.

Bootstrap 3 ruudustikusüsteemi näide erinevate ekraanilaiuste jaoks

Püüan seda kõike seletada valmis näitega. Peate kopeerima ainult faili setka.html (selleks valige kontekstimenüüst üksus "Salvesta link kui ..."). Kui avad selle faili otse brauseris (klõpsates antud lingile hiire vasaku nupuga), siis ei tööta mitte midagi, sest Bootstrap raamistik ei ühendu.

Asetage allalaaditud fail setka.html kausta Bootstrap, millest rääkisime . See peaks olema samal tasemel kui varem loodud fail index.html.

Nüüd avage see setka.html fail mis tahes valitud brauseris ja katsetage oma brauseriakna suurust, et näha Bootstrap 3 töös ja mõista, kuidas ruudustikusüsteem töötab. Millised? Ma selgitan nüüd.

Minu monitori ekraani eraldusvõime on 1280 pikslit lai, mis on rohkem kui suure ruudustiku jaoks määratud 1200 piksli murdepunkt. Mida me selle tulemusena näeme? Midagi selle pildi taolist:

Siin on viis veebisaidi paigutuse näidet, mis on üles ehitatud erinevat tüüpi ruudustikule:

Esimest rida kirjeldatakse kõigi nelja Bootstrapis praegu saadaolevate ruudustikusüsteemide abil. Olenevalt seadme ekraani eraldusvõimest, millel paigutust vaadatakse, kuvatakse seal igas lahtris kasutatud ruudustiku nimi (nüüd on esimese rea kohal kirjutatud, et kasutatakse suurt ruudustikku ja lahtrites "cl-lg" - suure ruudustiku klassi eesliide) . Kui ekraani laius väheneb, muutuvad need sildid.

Ülejäänud allpool olevad read kasutavad ainult ühte ruudustiku suuruse süsteemi – väga väike, väike, keskmine ja suur (selles järjekorras).

Nii saame näha ja võrrelda, kuidas need Bootstrap 3 arsenalist pärinevad ruudustikud koos töötavad ja kuidas need eraldi (ainult ühte tüüpi kasutades) töötavad. Sest Kuna minu brauser laiendati eelmise ekraanipildi tegemise ajal täisekraanile (suurem kui 1200 pikslit), on need viis saidi paigutuse näidet kõik horisontaalselt laiendatud (veerud asuvad ekraani laiuses üksteise kõrval).

Nüüd vähendame brauseriakna suurust veidi, et oleks näha kokkuvarisemist.

Ülemise rea kohal olev tekst ja selle lahtrite klasside eesliited on muutunud (selleks kasutati nähtavusklasse, millest räägime hiljem). Keskmist ruudustikku kasutatakse nüüd ja seda kuvatakse endiselt horisontaalselt. Samal ajal on alumine rida (mis illustreerib ainult jämeda ruudustiku kasutamist) vertikaalselt volditud, s.o. naaberplokke ei kuvata nüüd mitte laiuses, vaid üksteise all (kõrguses).

Selgub, et suur ruudustik välise mõju puudumisel käitub nii - see on vertikaalselt volditud kõigil seadmetel, mille ekraani suurus on alla 1200 piksli. Sel juhul kuvatakse kõik teised ruudustiku näites kasutatud horisontaalselt. Esimene rida kasutab võrekombinatsiooni, nii et nüüd juhib seda keskmise ruudustiku süsteem (suur süsteem ei oma enam mõju).

Vähendame veel kord brauseriakna laiust, nii et see muutub. Tuleb veel üks krahh:

Nüüd (ekraani suurusest lähtuvalt) töötame väikese ruudustikuga. Sellest lähtuvalt on vertikaalselt arenenud ka mitte ainult suur, vaid ka keskmine võrk. Noh, esimeses reas, kus kasutatakse võrkude kombinatsiooni, juhib kõike nüüd Bootstrapi väike võresüsteem. Samal ajal muutub setka.html failis ka selle esimese rea veergude jaotus, mis pole üldse vajalik, kuid seda on täiesti võimalik teha, et rahuldada mõningaid teie paigutuse vajadusi (pealegi , “üks või kaks”, ilma probleemideta).

Jätkame brauseriakna laiuse vähendamist väärtustele. Juhtub veel üks krahh:

Selle tulemusena ei jookse vertikaalselt üle lehe mitte ainult suured ja keskmised ruudud, vaid ka väike on nendega liitunud. Ainus horisontaalne ruudustik on alles väga väike ruudustik, mis jääb selliseks (nagu me just nägime) igal juhul. Isegi kui kitsendate lehe üliväikese laiusega, ei muutu üliväike ruudustik vertikaalseks ruudustikuks (isegi kui sisu lahtritesse ei mahu).

See näide (fail setka.html) on tehtud täpselt. Sellest, kuidas seal kõik on korraldatud, räägime üksikasjalikult hiljem. Kuid praegu tahan juhtida teie tähelepanu vaid mõnele nüansile, mida saate faili setka.html lähtekoodis märgata.

Meie näite lähtekoodi selgitused

Ülaossa lisatakse abiga küljenduste visuaalse kujundamise stiilid (taanded, ruudustiku värvid jne), mis ei kanna erilist semantilist koormust. Kui kerite lähtekoodi alla, märkate seda plokki:

lg Jämedat ruudustikku kasutatakse ekraanide puhul, mille laius on üle 1200 piksli. md Kasutab keskmist ruudustikku ekraanide puhul, mis on väiksemad kui 1200, kuid suuremad kui 992 pikslit. sm Kasutab väikest ruudustikku ekraanide jaoks, mis on väiksemad kui 992, kuid suuremad kui 768 pikslit. xs Kasutab alla 768 piksli suuruse ekraani jaoks eriti väikest ruudustikku, mis jääb alati horisontaalseks.

Seal on neli konteinerit, millele on määratud erinevad klassid (loe selle kohta). Need võimaldavad teil kuvada konkreetset sisu erinevatele ruudustiku suurustele vastavate meediumipäringute alusel. Kuidas see töötab? Kõik neli pealkirja laaditakse brauserisse (kui vaatate lähtekoodi), kuid olenevalt praegusest ekraani eraldusvõimest või brauseriakna suurusest kuvatakse ainult üks pealkiri.

.col-lg-4 .col-md-1 .col-sm-5 .col-xs-5 .col-lg-4 .col-md-5 .col-sm-1 .col-xs-6 .col -lg-4 .col-md-6 .col-sm-6 .col-xs-1

See on põhivõrk, kus on ühendatud kõik neli ruudustikusüsteemi (seda näete lahtri atribuutide järgi nagu class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , mis loetleb klassi eesliited kõik neli ruudustikku). Nagu eespool mainitud, määratletakse rida ise, asetades kõik selle koostisosad konteinerisse, mille tunnus on class="row" (meie näites on see div-põhine konteiner).

Pange tähele, et meie põhivõrk koosneb kolmest lahtrist (veerust) ja kui liidate kokku kõik igale veerule määratud numbrid, näiteks Bootstrapi üliväikeste ruudustiku eesliidete (col-xs) jaoks, saate kokku 12. Siis kehtib sama ka kõigi teiste süsteemide eesliidete järel olevate arvude kohta. See on arusaadav, sest sellel karkassil, nagu eespool mainitud, on 12-veeruline struktuur, s.o. horisontaalselt on kogu paigutuseks saadaolev ruum jagatud kaheteistkümneks võrdse laiusega veeruks (saidil nähtamatud - need on nagu lahtrid koolivihikutes).

Noh, numbrite abil pärast klassi eesliiteid saate lihtsalt määrata oma paigutuse iga lahtri (päris veergu) proportsioonid. Need. proportsioonid võivad olla näiteks:

Üldiselt saate ühes paigutuses (reas) kasutada kas ühte või kahte, kolme või kõiki nelja ruudustikusüsteemi. Kõik oleneb teie disainieelistustest ja sellest, mida te oma veebilehega saavutada üritate (kuidas see peaks erinevate ekraanisuuruste puhul välja nägema). Ametlik veebisait annab näite:

Ridade (ridade) ja lahtrite loomine Bootstrap klassidega

Parema mõistmise huvides loome nüüd HTML-lehe, mis meenutab mõneti päris veebilehte (koos päise, teksti- ja graafilise sisuga ning jalusega) ning pane see paika, kasutades Bootstrap 3 ruudustikusüsteemi.

Täpsemalt loon tooriku ise ja soovitan analoogselt eelmise näitega alla laadida fail sait.html (selleks valige kontekstimenüüst üksus "Salvesta kui ...") , et hiljem saaksid lisada vajalikud alglaadimisklassid. Samuti tuleb see paigutada kausta Bootstrap samale tasemele kui esimeses artiklis loodud fail index.html (ja fail setka.html, millega töötasime just ülal).

Kui vaatate sait.html faili lähtekoodi, näete, et Bootstrap ja jquery on sellesse juba lisatud ning lisatud on sisu, mis jäljendab keskmise veebilehe välimust ja tunnet. Jah, vajate ka kausta sellel lehel kasutatud piltidega. Selle saad alla laadida siit - img.zip . Lihtsalt pakkige arhiiv lahti ja asetage img-kaust (veenduge, et see sisaldaks pildifaile, mitte mõnda teist img-kausta) Bootstrapi kausta, samale tasemele faili sait.html. Struktuur näeb välja selline:

Nüüd (kaustast Bootstrap) näete brauseris veebilehte, mida kasutasin näitena. On silmatorkav, et kõik lehel olevad plokid asuvad üksteise all ja see segab oluliselt teabe õiget visuaalset tajumist. Loogiline oleks paigutada need veergudesse ja nii, et ekraani suuruse vähenemisel reageerib sellele “disain”, muutes veergude arvu, et luua vaatamismugavus erineva laiusega seadmetes.

Sait.html faili lähtekoodis HTML-koodis näitasin ma ette nähtud ridade (ridade) piire, mille jaoks kohandame veergude kuvamist, kasutades mingit Bootstrapi ruudustikusüsteeme. Seal on ainult neli rida (need on ülaloleval ekraanipildil nummerdatud) - päis (päis saidi nime ja logoga), lehe pealkiri ja kirjeldus, sisuosa (peamine sisu, mis koosneb nelja artikli teadaannetest) ja jalus.

Nüüd peame faili sait.html lisama Bootstrapi märgistuse, mis. Ridade loomiseks, nagu mäletate, piisab, kui panna kogu selle sisu konteinerisse (enamasti on need Div-sildid, kuigi võib olla ka teisi) ja kirjutage sinna klass="row". Esimese rea puhul näeb see välja selline:

veebisait

Sama tuleb teha ka kõigi teiste ridade (ridade) puhul – pane avasilt tulevase rea algusesse ja silt selle lõppu. Kogu sait.html faili koodi koos tehtud muudatustega ma ei näita, kuna see on liiga mahukas.

Erinevate võrgustike kasutamine erinevate ekraanilaiuste sisuga veergude loomiseks

Nüüd alustame lahtrite moodustamist nendes ridades (ridades), kus seda on mõtet teha. Üsna loogiline oleks artiklite kuulutused (alates kolmandast reast) paigutada nelja veergu ja kui ekraani laius väheneb, siis lasta need neli veergu kaheks teisendada. Kuidas seda teha? Vaatame.

Niisiis on Bootstrap 3-s 12-veeruline ruudustik, millest me eespool rääkisime. Kuna otsustasime teha teadaannetega neli veergu, oleks loogiline muuta need laiuselt võrdseks, mis tähendab, et iga veerg on meie nähtamatu ruudustiku süsteemi kolme lahtri (lahtri) laiune (olenemata sellest, millise ruudustiku me valime - ultra -väike, väike, keskmine või suur).

Millist võrku tööks valida? Võtame kompromissina alustuseks keskmise. Sel juhul peate kõigi nelja lahtri konteineritesse lisama klassi "col-md-3" - . Näitan teile ühe lahtri koodi näidet, et mitte artiklit segamini ajada:

Pärast tehtud muudatuste salvestamist näete, et meie veebileht on saanud juba palju kasutatavama välimuse:

Tõsi, kui brauseriaken kahandada väiksema murdepunkti laiuseks (meie kasutatava keskmise ruudustiku puhul on see 992 pikslit), reastuvad kõik teated taas veergu, mis pole hea, sest kasutatavus sel juhul väheneb (peaaegu 1000 piksli eraldusvõime võimaldab infot tihedamalt korraldada). Selle olukorra parandamiseks saate Bootstrapi arsenalist lisada samadele teadetega lahtritele teise ruudustiku. Kuidas seda teha? Vaatame.

Kasutame igas teate lahtris klassi nime eesliiteid "col-xs-6" (tulemuseks on liitklass class="col-md-3 col-sm-6"). See näeb välja selline (kasutades näitena ühte lahtrit):

Google AdWords – rühmade loomine

Kuulutuse tekst.

Nagu näha, rikkusime siin hiljuti välja kuulutatud reeglit, et kõigis lahtrites ühe ruudustiku eesliidete järel olevad numbrid peaksid kokku saama 12. Saime 24 (neli korda kuus). Kuid me tegime seda meelega, et saavutada soovitud tulemus - nelja veeru asemel saame keskmise Bootstrapi ruudustikusüsteemi (see on 992 pikslit) murdepunkti läbimisel kaks. Need. lahtrid asuvad kahes reas, kummaski kaks:

Sest Kui valisime üliväikese ruudustikusüsteemi, siis brauseriakna laiuse edasise vähenemisega ei teki teadetega plokkide vertikaalset paigutust üksteise alla (paigutus ühte veergu), sest see süsteem jääb alati horisontaalseks.

Kui soovite, et neli veergu muutuksid ekraani laiuse vähenemisel kaheks veerguks ja seejärel üheks veerguks, peaksite kasutama väikest ruudustikusüsteemi, mitte "col-xs-6", kasutades "col-sm-6" :

Yandex Direct - kampaania loomise põhitõed

Seejärel, kui brauseriakna laiust vähendatakse alla 768 piksli, näete sissekannet, milles kaks teadaannetega veergu teisendatakse üheks. Lihtsalt katsetage ja tunnetage erinevust.

Veebilehe päise kohandamine Bootstrapi 3 abil

Katsetame ja proovime uuesti, milles on sisuliselt kaks potentsiaalset lahtrit – saidi nimi koos kirjeldusega ja logo. Tegelikult me positsioneerime need. Kasutame seekord suuremat ruudustikku koos "col-lg-6" kahe võrdse veeru moodustamiseks.

veebisait

Kõik veebisaitide, ajaveebide, foorumite, veebipoodide loomise, nende reklaamimise kohta otsingumootorites ja saidil raha teenimise kohta

Tõsi, suure ruudustiku kasutamisel toimub praagimine üsna suurte ekraaniresolutsioonide juures (meie puhul brauseriaknad, sest seal simuleerime erineva ekraanilaiusega seadmeid). Pärast seda volditakse rakud vertikaalselt. Selle vältimiseks lisame esimesele reale veel ühe Bootstrap 3 ruudustiku. Ma arvan, et väike võrgusüsteem (klassi eesliide col-sm) sobib. Seejärel näeb kood välja umbes selline:

veebisait

Kõik veebisaitide, ajaveebide, foorumite, veebipoodide loomise, nende reklaamimise kohta otsingumootorites ja saidil raha teenimise kohta

Siiski ei teinud ma väikese ruudustiku jaoks saidi nime ja logoga lahtreid samaks, kuna logo on sisuliselt kitsam (selles mõttes kitsam) nimest koos kirjeldusega. Väiksema ekraanilaiuse korral poleks loogiline neile võrdseid lahtreid eraldada. Seetõttu tegin esimese veeru saidi nime ja kirjeldusega, kui Bootstrap väikeruudustiku süsteem on aktiveeritud kaks korda suurem kui logo veeru.

Selle tulemusel koonduvad need lahtrid brauseriakna vähendamisel kuni väikese Bootstrapi ruudustiku süsteemi katkemiseni, mis toimub laiusega alla 768 piksli, ja seejärel asuvad mõlemad lahtrid üksteise all.

Võib-olla olete märganud, et lehel olev tekst jookseb kokku ekraani vasakusse serva, mis põhjustab . Selle olukorra parandamiseks saate lisada kehasildile, mis võimaldab. Ja saate kõike lahendada tavaliste Bootstrap 3 tööriistadega.

Selleks peate pakkima kogu veebilehe sisu (kõik, mis sisaldub Body siltides) samanimelise klassiga Div konteinerisse - . Need. asetage see silt kohe avatava Body-märgendi järele ja sulgege see enne skriptide kutsumist, mis asuvad vahetult enne sulgevat Body-märgendit. Pärast seda ei jää tekst enam vastu brauseriakent.

Samuti on näha, et eelvaatepildid kattuvad üksteisega, kui ekraani laius väheneb. Fakt on see, et need ei reageeri endiselt, kuid me muudame need selle jaotise järgmistes artiklites selleks. Samuti jätkame Bootstrap 3 ruudustikusüsteemiga töö analüüsimist, õpime kujundama nuppe, tabeleid, HTML-vorme, koostama rippmenüüd, navigeerimist ja palju muud. Seetõttu ärge vahetage ja oodake uusi väljaandeid.

Jätkub >>> (Sa võid tellida uudiskirja, et see ei jääks ilma)

Ja siin on jätk: (aga te siiski tellite - seal on veel palju huvitavat ja kasulikku).

Selles artiklis tutvume Bootstrap 3 raamistiku klassidega, mis on loodud saidi adaptiivse "skeleti" (paigutuse) loomiseks.

"Ehitamine" ruudustikuelementide alglaadimisriba 3

Bootstrapi ruudustik koosneb "ehituselementidest". Peamised neist on ümbrised, read, adaptiivsed plokid ja reageerivad kasuliku klassid.

Põhimõtteliselt on ruudustik lihtsalt eelmääratletud klasside loend, mille abil saate määrata plokkidele (HTML-elementidele) vajaliku käitumise ja luua nende abiga teatud kohanduva saidi paigutuse.

Mähised

Ümbriskonteiner on ruudustiku "ehitise" element, millest algab olenevalt arendusstrateegiast kogu lehe või selle osa (näiteks päis, peamenüü, põhiala, jalus) paigutus.

Bootstrapi konteiner võib olla reageeriv-fikseeritud või reageeriv-vedelik.

Esimest (adaptiivselt fikseeritud konteinerit) iseloomustab asjaolu, et sellel on konstantne laius mõnes vaateava laiuse vahemikus (vaateala).

Järgmine tabel näitab, kui lai on automaatselt kohanduvalt fikseeritud konteiner antud brauseri vaateava laiuse juures.

Vaateava laius Konteineri laius

= 768 pikslit ja = 992 pikslit ja ...

Saidi paigutuse kujundamisel ei kasutata tavaliselt ühe Bootstrapi ümbrise konteineri teise pesastamist.

Niisiis, Bootstrapi ruudustiku esimene "ehituselement" on ümbriskonteiner. See määrab paigutuse laiuse erinevates vaateportides ja tsentreerib selle (ainult adaptiivselt fikseeritud konteineri) vahekaardi või brauseriakna kliendiala vasaku ja parema serva suhtes.

Järgmine ehituselement on rida (reaklassiga div-plokk). Rida on spetsiaalne plokk, mida kasutatakse ainult muude ehituselementide (adaptiivsete plokkide) mähkimiseks. Selle põhieesmärk on neutraliseerida ümbrismahuti või reageeriva ploki positiivne polster (15 pikslit vasakul ja paremal).

Näide taande moodustamisest:

Konteiner (+15px) -> rida (-15px) -> veerg (+15px) -> sisukonteiner (+15px) -> rida (-15px) -> veerg (+15px) -> rida (-15px) -> col (+15px) -> sisu *col on reageeriv plokk

Näide näitab, et olenemata sellest, millises tundlikus plokis sisu on, on sellel alati õige veeris (st 15 pikslit vasakule ja paremale).

Järgmine Bootstrapi ruudustiku "ehituselement" on reageeriv plokk (div klassiga col-?-?).

Tundlikud kastid on Bootstrapi ruudustiku elemendid, millel on üks või mitu col-?-? . Need plokid on peamised "ehitus" tellised, need moodustavad vajaliku struktuuri.

Adaptiivse ploki laius määratakse vastavalt seadme tüübile. See tähendab, et reageeriv plokk võib erinevates seadmetes olla erineva laiusega. Seetõttu nimetatakse seda plokki adaptiivseks.

Kuidas määratakse reageeriva ploki laius? Reageeriva kasti laiuse seade, mis sellel konkreetses seadmes peaks olema, on vaikimisi seatud arvule vahemikus 1 kuni 12 (Bootstrapi veergude arv). Kas see number on näidatud teise tähemärgi asemel? klassis kol-?-? .

See arv (vaikimisi 1 kuni 12) määrab, kui suur protsent lähteelemendi laiusest peaks reageerival plokil olema.

Näiteks number 1 määrab reageeriva kasti laiuseks 8,3% (1/12) emakasti laiusest. Arv 12 on laius, mis on võrdne 100% (12/12) lähteploki laiusest.

Lisaks adaptiivse ploki laiuse määramisele tuleb määrata ka seadme tüüp (1 küsimuse asemel). Seadme klass määrab, millisele vaateavale see laius rakendub. Bootstrap 3 eristab 4 põhiklassi. Need on xs (vaateava laius > 0) , sm (vaateava laius >= 768 pikslit), md (vaateava laius >= 992 pikslit) ja lg (brauseri vaateava laius >= 1200 pikslit).

Näiteks adaptiivse ploki klassiga col-xs-12 col-sm-6 col-md-4 col-lg-3 on laius 100% (12/12) xs ja 50% (6/12) ) sm-l, md-l - 33,3% (4/12), lg-l - 25% (3/12).

Lisaks peaksite pöörama tähelepanu asjaolule, et adaptiivsed plokid ei piira nende ulatust. Need. kui määrate adaptiivse ploki klassi atribuudis xs, kuid ei määra sm , siis laieneb selle mõju selle vahemiku ulatusse.

Näiteks klassiga col-xs-6 col-lg-3 adaptiivse ploki laius on xs , sm ja md seadmetes 50% (6/12) ja lg puhul 25% (3/12).

Adaptiivne plokk, nagu konteiner, seab sinna paigutatavale sisule positiivsed veerised 15 pikslit vasakule ja paremale.

Õige Bootstrapi ruudustikupaigutuse korral peaks tundlikul plokil alati olema ülem rida.

Näiteks jagame ploki 3 võrdseks veeruks, mis kuvatakse vertikaalselt xs ja horisontaalselt sm ja kõrgemal:

... ... ...

Näiteks arvutame esimese ja teise ploki sisu jaoks saadaoleva laiuse:

1 plokk... 2 plokki...

Juhtpunktid Saadaval laius 1 plokk Saadaval laius 2 plokki

320–749,98 pikslit		290 pikslit (320 pikslit – polsterdus (30 pikslit)) kuni 719,98 pikslit (749,98 pikslit – polsterdust (30 pikslit))
750–969,98 pikslit		720px (750px – polsterdus (30px))
970–1169,98 pikslit	616,7 pikslit (970px*8/12 – polsterdus (30px))	293,3 pikslit (70px*4/12 – polsterdus (30px))
1170 pikslit ja rohkem	750px (1170px*8/12 – polsterdus (30px))	360px (1170px*4/12 – polsterdus (30px))

Responsiivsed plokid paigutatakse põhielemendisse ridade kaupa üksteise järel. Üks rida sisaldab adaptiivseid plokke, mille veergude koguarv ei ületa 12 (vaikimisi). Need. plokid, mis ei mahu esimesele reale, asetatakse järgmisele reale jne.

Kuidas on adaptiivsed plokid paigutatud?

Bootstrap 3-s on reageerivad plokid ujuvad (float:left). Seda tuleb veebilehe kujunduse loomisel arvestada.

Enne plokki, mis peab algama uuelt realt, on vaja paigutada tühi element div klassiga clearfix . Samuti peate selle peitma seadmete puhul, kus seda toimingut pole vaja teha. Plokk on peidetud allpool toodud vastavate klasside abil.

Ujuvatel klotsidel on ka üks omadus. Näiteks kui ülaltoodud näites on 1 ploki kõrgus suurem kui 2 plokki. Siis ei asu plokk 3 uuel real, vaid "kleepub" ploki 1 paremale küljele.

Selle vältimiseks tuleb lisada clearfix klassiga plokk ja teha see vajalikele seadmetele nähtavaks (näiteks md ja lg puhul):

1 plokk... 2 plokk... 3 plokk...

Paigutuse loomise aluspõhimõte

Paigutuse loomise põhiprintsiip on pesastada mõned adaptiivsed plokid teistesse. Samal ajal on nende laius alati suhteline parameeter, mis määratakse protsendina (veergude arvu järgi) vanemploki laiusest. Need. igal pesastustasemel on näiteks 6-veeruline reageeriv plokk alati 50% (6/12*100%) lähteelemendi laiusest.

Näiteks jagame mõne ploki (peamise) 4 plokiks (2 esimeses reas ja 2 teises). Lihtsuse huvides loome paigutuse, mis ei ole kohandatav:

1 plokk... 2 plokk... 3 plokk... 4 plokk...

Loome 3 plokist (3 x 2) koosneva paigutuse:

1 plokk... 2 plokki... 3-1 plokki... 3-2 plokki... 3-3 plokki... 3-4 plokki... 3-5 plokki... 3-6 plokki. .. 4 plokk...

On lihtne näha, et pesastatud adaptiivse ploki paigutus viiakse läbi samamoodi nagu põhiplokk. See tähendab, et pole vahet, mis pesastamise tase plokil on, selle paigutus luuakse samade reeglite järgi.

Klassid adaptiivse ploki nihke jaoks

Bootstrapil on reageerivad klassid (col-?-offset-?), mille abil saate ploki teatud arvu veerge paremale liigutada. Esiteks? tuleb asendada seadme tüübiga (xs , sm , md või lg). Teiseks? veergude arvu jaoks.

Näiteks määrame md-seadmete ploki 8 veeru laiuseks ja asetame selle keskel asuvale reale (st liigutame seda 2 veergu paremale):

1 plokk...

Lisaks adaptiivse ploki nihke tööriistadele on Bootstrap 3-l ka eriklassid, mida saab kasutada elementide järjekorra muutmiseks ühel real.

Bootstrap 3 tundliku utiliidi klassid

Bootstrap 3 sisaldab adaptiivseid (utiliidi) klasse, mis võimaldavad teil sõltuvalt seadme tüübist juhtida elementide kuvamise nähtavust.

Lisaks seadme (xs , sm , md , lg) määramisele, millel plokk on nähtav, peate määrama ka selle, kuidas seda selles seadmes kuvada. Valikud on inline , block ja inline-block .

Klassi kirjeldus

nähtav-xs-?	Teeb elemendi nähtavaks ainult väga väikese xs-ekraaniga seadmetes (vaateava laius =768px ja =992px ja =1200px). Teised seadmed neid üksusi ei kuva.

Märgi asemel? tuleb määrata block , inline või inline-block. Need. määrake, kuidas elementi kuvatakse.

Näiteks klassi nähtav-md-ploki lisamine elemendile tähendab, et seda kuvatakse ainult seadmetes, millel on vaateava md (vaateava laius >=992px ja .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, . col-md -10, .col-md-11, .col-md-12 (ääris: 1px tahke #ccc; veeris-alumine: 30px; kõrgus: 60px; ) Tere, maailm! .col-md-1 .col -md- 1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md -1 col-md-1 .col-md-1 .col-md-2 .col-md-10 .col-md-3 .col-md-9 .col-md-4 .col-md-8 .col-md-5 .col-md-7 .col-md-6 .col-md-6 .col-md-4 .col-md-4 .col-md-4 .col-md-12

Kui te ikkagi millestki aru ei saa, siis proovin seda niimoodi selgitada.
Teil on vaja 2 veeruga veebisaiti. Saidiriba vasakul, sisu paremal.
Te juba teate, et Bootstrapi ruudustik koosneb 12 veerust.
Püüame 4 veergu üheks liita.
1 veerg + 1 veerg + 1 veerg + 1 veerg = 4 veergu
Seega näeb saidiriba klass "col-md-" välja selline: "col-md-4".
12 (veerud) - 4 (veerud, mille me ühendasime) = 8 (veerud vasakul).

Seega näeks klass "col-md-" välja selline: "col-md-8"
Üldkood näeb välja selline:

sisu plokis sisu plokis

Bootstrapil on võimalus kirjutada erinevaid CSS-i stiile või jagada lahtreid erinevalt seadmete rühmade jaoks.

Näiteks tahan, et mu saidi päis suurtel monitoridel oleks jagatud üheks lahtriks, kuid telefonide puhul otsustasin teha kaks lahtrit ja rakendada neile erinevat CSS-stiili. Said idee?
Vaadake, milliseid klasse saate erinevate seadmerühmade jaoks kasutada ja milliseid funktsioone igal klassil on.

Bootstrap paigutustabel erinevate seadmerühmade jaoks

Väga väike seade
Telefonid ( .col-md-1, .col-md-8, .col-md-4, .col-md-6, .col-md-3, .col-md-12 (ääris: 1px tahke #ccc ; kõrgus: 60 pikslit; ) Plokk 1 Plokk 2 Plokk 3 Plokk 4 Menüü sisu

Tulemust on näha. Soovi korral saate muuta ekraani suurust või avada tulemuste leht erinevate seadmerühmade kaudu.

Temaatilised materjalid: