Hello mindenkinek, barátok! 2013 közepén jelent meg a Bootstrap 3, amely az évek során jól bevált, kényelmes, bővíthető CSS-keretrendszer az érzékeny elrendezések gyors létrehozásához. Oldalak milliói használják sikeresen ezt a keretrendszert, és már kezdjük megszokni.
menő
Tűzd ki
2018. január 18-án fontos esemény történt - a régóta várt Bootstrap 4 verzió, a modell használata alapján Flexbox jelöléshez, amely jelenleg minden modern böngészőt támogat, és kényelmesebb és rugalmasabb a fejlesztők számára, mint a klasszikus Float alapú jelölőmodell. Most teljes bizalommal kijelenthetjük, hogy nem lehet, de KÖTELEZŐ pótolni a "Flexet"!
Ma közelebbről megvizsgáljuk a Bootstrap 4 rácsával való munkát, és közben összehasonlítjuk a régi verzióval. Ez a lecke nem csak akkor lesz hasznos számodra, ha kezdő vagy és ismerkedsz a Bootstrap-pel, hanem akkor is, ha tapasztalt fejlesztő vagy, és szeretnéd megtanulni az elrendezés összes szabályát és árnyalatát a Bootstrap 4 grid és a benne található Flexbox eszközök segítségével. .
Alapértelmezés szerint a Bootstrap 4 rács nagyon hasonlít a Bootstrap 3 rácsához, de van néhány fontos különbség.
Az alapbeállítások táblázatából egyértelmű eltéréseket láthatunk a harmadik verzió rácsához képest. Most már nincs ".col-xs-" osztályelőtag, amely a legkisebb engedélyekért felelne, helyette egy egyszerűsített ".col-" előtag van megadva. Tévesen azt gondolhatja, hogy a ".col-" előtag felelős a mobileszközök minimális felbontásáért, de ez nem teljesen igaz. Többek között a „.col-” előtag az egyik legfontosabb újítás a Bootstrap 4-ben. Ez az az osztály, amely felelős az oszlopok automatikus elrendezéséért bármilyen felbontásban. De erről majd később.
Kis felbontások (kicsi) esetén a „.col-sm-” előtag a felelős 576 képpontos vagy nagyobb médialekérdezés esetén. A konténer szélessége 540 pixel. A közepes felbontások 768 pixelből dolgoznak ki. A konténer szélessége 720 pixel. A nagy felbontások 992 képponttól kezdődően működnek. A konténer szélessége 960 pixel. És a legnagyobb - 1200 pixeltől. A konténer szélessége 1140 pixelben van rögzítve.
Kérjük, vegye figyelembe, hogy a médialekérdezési maximális értékek pontatlan értéket tartalmaznak, a képpontban kifejezett „0,98” törtrészvel. Ez észrevehető a Desktop First elrendezési módszer kiválasztásakor, ahol a médialekérdezés maximális szélessége korlátozott. Például a Sass "+media-breakpoint-down(lg)" fordításánál a "@media (max-width: 1199.98px)" értéket kapjuk. Itt 0,02 pixel szabadul fel a következő médialekérdezés elindításához. Ezt tartsd szem előtt. A Layout Jedi 8 jövőbeli kiadásaiban ezt és sok más pontot fogunk megvizsgálni ebből a leckéből egy valós példa segítségével.
Az új univerzális ".col" osztály használatával egy sorban legfeljebb 12 oszlopot adhat meg (szülő ".sor"), amelyek szélessége az elemek számától függően automatikusan kiszámításra kerül, és egyenlő lesz.
Például:
Egy oszlop szélességét kifejezetten beállíthatja, a többit pedig automatikusnak hagyhatja.
NÁL NÉL ezt a példát a harmadik sor második eleme a ".col-6" osztályú, a második sor második eleme pedig a ".col-5" osztályú, amelyek minden képernyőfelbontásnál a megfelelő számú oszlopot foglalják el. A többi oszlop szélessége reszponzív, és a rendszer automatikusan kiszámítja az összes fennmaradó helyet.
Használhatja a "col-(breakpoint)-auto" osztályt a változó szélességű tartalom meghatározásához az oszloptartalom által elfoglalt hely mennyisége alapján. Ahol a töréspont a képernyő mérete (xl, lg, md vagy sm).
Itt azt látjuk, hogy a két középső oszlop a tartalom szélességének megfelelő szélességet vesz fel, azonban az első sorban a ".row" ".justify-content-sm-center" osztályának köszönhetően a teljes sor középre van állítva, és a teljes szélesség csak a középső oszlop szélességétől függ, míg a második sor a teljes elérhető szélességre nyúlik, de a második oszlop a tartalom szélességéhez rögzítve marad.
A Bootstrap 4-nek köszönhetően több sort (kötőjelet) készíthet egy sorban. Ez megtehető a ".w-100" osztály használatával, amely nagyon hasonlít a "br" címkéhez, és lényegében csak az oszlopokat új sorba rendezi.
vegye figyelembe, hogy adott osztály egy része további jellemzők Bootstrap 4, amelyek a Bootstrap projekt Sass verziójának használatakor külön szerepelnek a projektben, és az "scss/utilities" mappában találhatók. Szükség szerint további bővítményeket is hozzáadhat a mappából a projekthez.
A Bootstrap 4 egy nagyon érdekes funkciója az univerzális oszlopok beállítása, amelyek minden felbontásban megjelennek. Ez a korábban említett ".col" osztály. Ezenkívül meghatározhat egy osztályt, amely jelzi a tartalom által elfoglalt oszlopok számát – ezek az osztályok, amelyek előtagja a ".col-(oszlopok száma)", például a ".col-6" azt jelzi, hogy a tartalom 6 oszlopot foglaljon el a 12-ből. Abban az esetben, ha nem szükséges konkrét mennyiséget megadni, nyugodtan használhatja az univerzális ".col" osztályt.
Használhatja a ".col-sm-(elfoglalandó oszlopok száma)" osztályelőtagot az alaprács beállítására a legkisebb felbontás kivételével. Kis képernyőkön egy ilyen rács oszlopai egymás alá kerülnek. Engedélyeknél több - annyi helyet foglal el, amennyit az osztályokban definiált.
Itt azt látjuk, hogy az első sor az „sm”-nél nagyobb, azaz több mint 576 pixel felbontású eszközökön. 2 oszlopra van osztva - 8, illetve 4, 12 széles. A második sor oszlopainak szélessége automatikusan számítódik, de a legkisebb felbontásnál ezek az oszlopok is egymás alá kerülnek, köszönhetően a „.col-sm” osztálynak.
A Bootstrap segítségével bármilyen oszlopkombinációt létrehozhat a rács létrehozásakor. Minden oszlophoz beállíthat bármilyen viselkedést különböző felbontásokban adaptív osztályok segítségével. Itt csak az osztályok elnevezésében van eltérés a harmadik verziótól.
A Bootstrap 4 a flexen alapul, és ennek a modellnek az összes olyan funkcióját biztosítja számunkra, amelyek egyszerű kész osztályokban elérhetők. A lehetőségek között szerepel a függőleges és vízszintes igazítás.
Amellett, hogy az igazítást a szülő ".row"-on keresztül szabályozza, az oszlopokat a megfelelő osztályok megadásával igazíthatja:
Ezenkívül a Bootstrap 4 arzenáljában megtalálhatók a vízszintes oszlopigazításhoz szükséges eszközök a „.justify-content-” előtag használatával a „.row”-on.
Nagyon gyakran vannak olyan helyzetek, amikor el kell távolítani az oszlopok közötti mezőket. Például, ha egy galériát hoz létre, és az elemeket egymás mellé kell rendezni, így:
Ehhez elegendő egy további „.no-gutters” osztályt beállítani a „.row” elemhez.
Ha egy sor (.row) 12-nél több oszloppal van kitöltve, a következő oszlop új sorba kerül.
Itt minden ugyanaz, mint a Bootstrap 3. verziójában.
Az elemek sorrendjének meghatározásához használhat speciális osztályokat, amelyek előtagja ".order-". Ha ismeri a Flex elrendezést, ezek a szabályok ismerősek lesznek. A Bootstrap 4 lehetővé teszi az elemek sorrendjének beállítását osztályok segítségével. A sorrendet közvetlenül beállíthatja (.order-1.order-md-2):
Vagy használhat speciális osztályokat, amelyek meghatározzák az első és az utolsó elemek sorrendjét (.order-first, .order-last):
A Bootstrap 3-hoz hasonlóan a 4-es verzió is képes az oszlopok vízszintes eltolására, de ez egy kicsit másképp van megvalósítva, és erre vannak speciális osztályok az „.offset-” előtaggal.
Egy oszlopot jobbra tolhat az ".offset-md-*" osztályokkal, amelyek a bal margót * az elemek számával növelik. Az alábbi példából az ".offset-md-2" osztály jobbra tolja a ".col-md-4" oszlop 2. oszlopát, a többi példa hasonlóan működik:
A behúzást minden felbontásban visszaállíthatja az ".offset-*-0" osztálynak köszönhetően, ahol a * sm, md, lg vagy xl.
Nagyon várható, hogy a Bootstrap 4 támogatja az elemek egymásba ágyazását. Itt minden ugyanúgy működik, mint a harmadik verzióban - az oszlopok egymásba ágyazásához létre kell hoznia egy „.row” gyermekosztályt, és be kell ágyazni az oszlopokat.
Áttekintettük a Bootstrap 4 griddel való munka főbb jellemzőit.Ha többet szeretne megtudni a keretrendszer összes funkciójáról, javasoljuk, hogy tanulmányozza át a hivatalos weboldalon található dokumentációt.
A következő leckében megvizsgáljuk a Bootstrap rács testreszabását az adott projekthez az OptimizedHTML 4 kezdősablonban való használatának példájával, nevezetesen beállítással, változó behúzásokkal, töréspontokkal, oszlopok számával stb.
A Bootstrap rácsrendszere akár 12 oszlopot is lehetővé tesz a teljes oldalon.
Ha nem szeretné mind a 12 oszlopot külön-külön használni, csoportosíthatja az oszlopokat szélesebb oszlopok létrehozásához:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
A Bootstrap rácsrendszere reszponzív, és az oszlopok a képernyő mérete alapján lesznek átrendezve: nagy képernyőn jobban nézhet ki a három oszlopba rendezett tartalom, de kis képernyőn jobb lenne, ha a tartalomelemek az e-re halmozódnának. mások.
Tanács: Ne feledje, hogy a rácsoszlopoknak legfeljebb tizenkét sort kell adniuk. Ezenkívül az oszlopok a nézetablakottól függetlenül egymásra halmozódnak.
A Grid Bootstrap rendszernek négy osztálya van:
A fenti osztályok kombinálhatók dinamikusabb és rugalmasabb elrendezések létrehozásához.
Tanács: Minden osztály skálázódik, így ha ugyanazt a szélességet szeretné beállítani az XS-hez és az SM-hez, akkor csak az XS-t kell megadnia.
Néhány Bootstrap rácsszabály:
Az alábbiakban a Bootstrap rács alapstruktúrája látható:
Így egy elrendezés létrehozásához létre kell hoznia egy tárolót (
Az alábbi táblázat összefoglalja, hogyan működik a Bootstrap Grid rendszere több eszközön.
| Extra kicsi <768px |
kicsi >=768 képpont |
Közepes >=992 képpont |
Nagy >=1200 képpont |
|
|---|---|---|---|---|
| osztály előtagja | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| alkalmas | Telefonok | tabletek | Kis laptopok | Laptopok és asztali számítógépek |
| Rács viselkedése | Mindenkor vízszintes | Kezdéskor összecsukva, vízszintesen a töréspontok felett | Kezdéskor összecsukva, vízszintesen a töréspontok felett | |
| Konténer szélessége | Nincs (automatikus) | 750 képpont | 970 képpont | 1170 képpont |
| oszlopok száma | 12 | 12 | 12 | 12 |
| Oszlop szélesség | Auto | ~62 képpont | ~81 képpont | ~97 képpont |
| Az ereszcsatorna szélessége | 30 képpont (15 képpont az oszlop mindkét oldalán) | 30 képpont (15 képpont az oszlop mindkét oldalán) | 30 képpont (15 képpont az oszlop mindkét oldalán) | |
| Fészkelhető | Igen | Igen | Igen | Igen |
| ellentételezések | Igen | Igen | Igen | Igen |
| oszlopsorrend | Igen | Igen | Igen | Igen |
A következő fejezetek Grid rendszerek példáit mutatják be különböző eszközökhöz.
A tervtervező webhelyének fő fejlesztése ezzel kezdődik helyes felépítés webhelyrács. Ha Bootstrap 3-at használ, akkor elengedhetetlen a keretrács megértése. Ebben a rövid megjegyzésben megpróbálom figyelembe venni a főbb árnyalatokat a használat során rácsok a Bootstraptől. A cikk főként a Bootstrap Grid dokumentációjának fordítása, de néhány kiegészítésem is.
A Bootstrapnek szüksége van egy körülzáró elemre a webhely tartalmának becsomagolásához és a rácsrendszerünk elhelyezéséhez. A projekthez két lehetőség közül választhat.
Használja a .container fájlt egy érzékeny, fix szélességű tárolóhoz (dobozszélesség max. 1170 képpont).
Használja a .container-fluid-ot egy nézetablak szélességű tartályhoz.
Szóval térjünk a lényegre.
A rácsokat oldalelrendezések felépítésére használják olyan sorok és oszlopok elrendezésével, amelyek tartalmat tartalmaznak.
A Bootstrap grid alapjai:
Hogy még könnyebben megértse ezeket az elveket, tekintse meg az alábbi képet:
A következő médialekérdezéseket használják a rácshoz (a LESS fájlból):
/* Nagyon kicsi eszközök (telefonok, kevesebb mint 768 képpont) */ /* Nincsenek médialekérdezések, mivel ezek a stílusok alapértelmezettek a Bootstrapben */ /* Kis eszközök (táblagépek, 768 képpont és nagyobb) */ @media (min-width : @screen-sm-min) ( ... ) /* Közepes eszközök (monitorok, 992 képpont és nagyobb) */ @media (min-width: @screen-md-min) ( ... ) /* Nagy eszközök ( nagy monitorok, 1200 képpont és nagyobb) */ @media (min-width: @screen-lg-min) ( ... )
| Nagyon kicsi készülékek Telefonok (<768px) |
Kis eszközök Tabletek (>=768 képpont) |
Közepes eszközök Asztali (>=992 képpont) |
Nagyméretű készülékek Asztali (>=1200 képpont) |
|
|---|---|---|---|---|
| Hálós viselkedés | Mindig vízszintes | Kezdetben tömörítve, vízszintesen a töréspont felett (nyilván azt jelenti, hogy az eszköz szélessége kisebb, mint az osztály által biztosított - lásd a médialekérdezéseket) | ||
| Konténer szélessége | Nincs (automatikus) | 750 képpont | 970 képpont | 1170 képpont |
| osztály előtagja | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # oszlopok | 12 | |||
| Oszlop szélesség | Auto | ~62 képpont | ~81 képpont | ~97 képpont |
| A rés szélessége | 30 képpont (15 képpont az oszlop mindkét oldalán) | |||
| A csatolmány | Igen | |||
| Elfogultság | Igen | |||
| Oszlopsorrend | Igen | |||
A .col-md-* osztály használatával létrehoz egy rácsot, amely elkezdi a halmozást (halmozást) a mobileszközökön; ugyanakkor a középső eszközökön a cellák vízszintesen helyezkednek el. Helyezze el a rács oszlopait bármely .sorban.
halmozottan vízszintesre
Változtassa meg a rácsot rögzített szélességűről a teljes böngészőablakot átívelő rácsra a .container helyére .container-fluidra cserélve.
Nem szeretné, hogy az oszlopok egymásra halmozódjanak a mobileszközökön? Osztályok alkalmazása kis és közepes eszközökhöz a következő oszlopokhoz: .col-xs-* , .col-md-* . Tekintse meg az alábbi példát a több osztály működésének jobb megértéséhez.
Egy példa a hivatalos oldalon a grid-example-mixed
Az előző példára építve még erőteljesebb és dinamikusabb elrendezést hozhat létre a .col-sm-* táblagéposztály segítségével.
http://getbootstrap.com/css/#grid-example-mixed-complete
Egy példa a hivatalos oldalon a grid-example-mixed-complete
Ha több mint 12 oszlop van egy sorban, a további oszlopok minden csoportja önálló egységként egy új sorra vált.
Egy példa a hivatalos oldalon a grid-example-wrapping
Négyoszlopos rács esetén olyan problémába ütközhet, hogy a megfelelő töréspontoknál az oszlopok nem igazodtak megfelelően, mert az egyik oszlop magasabb, mint a másik. Ennek kijavításához használja a .clearfix osztály és a segédprogramokhoz érzékeny osztályaink kombinációját.
Példa a hivatalos oldalon - grid-responsive-resets
A reagáló töréspontoknál az oszloptörlés mellett előfordulhat, hogy alaphelyzetbe kell állítania az eltolásokat, tolásokat vagy húzásokat. Tekintse meg ezt működés közben a rácspéldában.
Oszlopok eltolása jobbra a .col-md-offset-* osztály használatával. Ezek az osztályok növelik egy oszlop bal margóját * oszlopokkal. Például a .col-md-offset-4 négy oszloppal eltolja a .col-md-4 értéket.
Példa a hivatalos oldalon - rács-eltolás
Ha tartalmat egy meglévő rácsba szeretné beágyazni, adjon hozzá egy új .row-t, és állítsa be a .col-md-* oszlopokat a meglévő .col-sm-* oszlopokba.
Példa a hivatalos oldalon - grid-nesting
A rácsoszlopok sorrendje a .col-md-push-* és .col-md-pull-* osztályokkal módosítható.
Példa a hivatalos oldalon - grid-column-ordering
A szerzőtől:Üdvözöllek. Korábbi cikkeinkben foglalkoztunk a Bootstrap keretrendszer csatlakoztatásával és a vele való munka első lépéseivel. Eljött az idő, hogy a legfontosabb témát érintsük. Nevezetesen, hogyan működik a rács a Bootstrapben. Ennek a problémának a megértése az, ami nagyban leegyszerűsíti a webhely elrendezését.
Minden css keretrendszernek megvan a maga rácsja. A gyakorlatban, ha figyelembe vesszük, hogy általában mire készül a css keretrendszer, akkor sok tekintetben csak a grid számára, amely lehetővé teszi az adaptív sablonok gyors és egyszerű elrendezését. A többi komponens, mint a gombok, táblázatok, űrlapok és egyéb dolgok saját kezűleg is elkészíthetők, gyakran pontosan ez az, amire szüksége van.
Persze jó, hogy a Bootstrapben minden komponens megvan, és mindent készen is lehet használni, de mindenekelőtt a grid érdekel minket. Tehát nézzük meg közelebbről a bootstrap rácsot.
Tehát ennek a keretrendszernek a rácsának alapértelmezés szerint 12 oszlopa van. Valójában a keretrendszer testreszabásakor bármilyen más értéket beállíthat, de szinte mindig elégedett lesz a 12 oszloppal. A 12-es szám sok más számmal osztható, így nagyon kényelmes velük dolgozni.
Ha korábban html címkékkel készített táblázatokat, akkor a következő összehasonlítás hasznos lesz. Végül is a keretrács egy normál táblázathoz hasonlítható.
A teljes rácsot egy közös tartályba kell helyezni. Egy blokknak kell lennie osztálytartállyal vagy tartályfolyadékkal. Az osztályok közötti különbség az, hogy az elsőnek van egy maximális fix mérete, mégpedig 1170 pixel. Vagyis a webhely szélessége nem lesz nagyobb, mint ez az érték.
A Container-fluid egy teljesen folyékony tartály, amely mindig az ablak szélességének 100%-áig nyúlik, így ha teljesen folyékony helye van, akkor erre van szüksége. Ha táblákról beszélünk, akkor nekik is van saját globális konténerük - táblázatuk.
Ebben a tárolóban kell lennie még egy blokknak a sorosztályt, vagyis a rács egy sorát. És ismét, ha táblázatokkal hasonlítjuk össze, akkor a tr címke felelős egy táblázatsor kimenetéért. A rácssorok és a táblázatok nagyon hasonlóak, mert mindkét esetben csak a fő tartalom konténereiként működnek – önmagukban nem tartalmaznak tartalmat, és nincs stílusuk.
Például, ha egy egyszerű webhelyről beszélünk, akkor három sorra oszthatjuk - a webhely fejlécére, a fő tartalomblokkra, valamint az oldalsó oszlopra és láblécre. Vegye figyelembe, hogy a tartalmat és az oldalsávot egy sorba helyeztük, mert ez így van.
Magában a sorban a cellák vagy oszlopok már közvetlenül találhatók, ahogy a Bootstrap elrendezésénél mondják. Az oszlopnak a col-x-x osztálya van, ahol az első x az eszköz megnevezése, a második pedig az oszlopok száma 1-től 12-ig. Most meglátjuk, hogyan működik ez. Ha ezt sikerül megértened, akkor azt is gyorsan megérted, miért olyan egyszerű reszponzív weboldalakat készíteni a Bootstrap segítségével.
Tehát a keretrendszer fejlesztői a rács létrehozásakor 4 fő eszköztípust azonosítottak a képernyő szélessége szerint. Találhat egy jó táblázatot a rács osztályainak listájával az orosz dokumentációban, amely itt található - http://www.oneskyapp.com/ru/docs/bootstrap/css#grid.
Íme egy képernyőkép a táblázatról. Tehát azt látjuk, hogy a legkisebb, 768 pixelnél kisebb képernyőszélességű eszközöknél az osztály előtagja col-xs- vagy ha a col kimarad, csak xs. Következik az sm (kis eszközök, 768-991 képpont széles), az md (közepes eszközök, 992-1199 képpont széles) és a nagy eszközök, amelyek több mint 1200 képpont szélesek.
Hogyan működik mindez? Elemzés példákon keresztül
Eddig lehet, hogy nem értesz semmit, de nem baj. Most azt javaslom, hogy gyakoroljon: nyisson meg egy kódszerkesztőt, egy böngészőt és kezdje el írni a kódot. Természetesen előtte csatlakoztassa a Bootstrap keretrendszert a html fájlhoz, a korábbi cikkekben ezt a kérdést részletesen tárgyaltuk.
Tehát nézzük meg ezt a kódrészletet:
< div class = "container" > < div class = "row" > < div class = "col-md-3 col-sm-6" >Az első< / div > < div class = "col-md-1 col-sm-6" >Az első< / div > < / div > < / div > |
Ha figyelmesen elolvassa az előző szöveget, már megérti, hogy most hozzuk létre az első blokkjainkat a rácsban. A konténer osztályba 1 sort helyeztünk el, ebbe pedig 2 blokkot.
Hogyan működnek az olyan osztályok, mint a col-x-x? Nagyon egyszerű, nyissa meg egy időre a böngészőt, és nézze meg az eredményt. Az eredmény egyébként nem lesz látható, mert semmilyen módon nem stilizáltuk a blokkjainkat. Javítsuk ki. Ez a kód beilleszthető a style.css fájlba, amelyet Ön hoz létre és tartalmaz:
div( háttér: #8CC7D9; szegély: 1px tömör #6B6ACD; )
div [ osztály ^= col ] ( háttér : #8CC7D9; keret : 1px tömör #6B6ACD; |
Remek, ezt látjuk a böngészőben:
Megjegyzem, az eredményt a számítógépemen nézem, amelynek képernyőszélessége meghaladja az 1200 képpontot, ami azt jelenti, hogy a Bootstrap nagy eszköznek minősíti.
Tehát az első blokk a tartály szélességének 25% -át foglalja el (ha 12 oszlopot a szélesség 100% -ának tekintünk, akkor 3-at 25% -nak). Nos, a második körülbelül 8-8,5%, nincs szükségünk pontos számításokra. A konténer szélességének fennmaradó 66%-a üres lesz. Természetesen ezt nem látod a képernyőképen, mert egyszerűen nem férek bele a teljes képernyőmről készült screenshotba a cikkbe, mivel túl nagy, ezért azt tanácsoltam, hogy utánam ismételj meg mindent.
És most nézzük meg, hogyan viselkednek a blokkok 992 pixelnél kisebb szélességben. Kezdje el szűkíteni az ablakot. A Google Chrome-ban az F12 zsugorítás közbeni lenyomása után a jobb felső sarokban az ablak pontos szélessége látható.
Nos, valószínűleg az Internet Explorer böngészőt fogom használni. Így néznek ki a blokkok 768 pixelnél valamivel nagyobb szélességben, vagyis kis képernyőkön.
Amint láthatja, 25% és 8% helyett most minden blokk pontosan a sorszélesség 50% -át foglalja el. Mindezt ezeknek az utasításoknak köszönhetjük:
col-md-3 col-sm-6 col-md-1 col-sm-6
col-md-3 col-sm-6 col-md-1 col-sm-6 |
Vagyis ezeknek az osztályoknak a segítségével azt mondjuk a bootstrapnek: közepes és nagy eszközökön az első blokknak adjon 3 oszlop szélességet a 12-ből, a másodiknak pedig 1-et a 12-ből. , kérjük, mutassa meg mindkét blokkot a sorszélesség 50%-án.
És mi fog történni a legkisebb képernyőkön? Itt teljesen leszűkítettem az ablakot, mintha telefonról néznénk az oldalt:
Bootstrap 4 keretrendszer. Gyors kezdés
Tanulja meg a Bootstrap 4 alapjait itt gyakorlati példa blog elrendezése a semmiből
Amint látható, a kis eszközökre érvényes utasítást törölték az extra kicsiknél, és minden blokk elkezdte elfoglalni a sor szélességének 100%-át. Ne feledje, hogy ez az alapértelmezett viselkedés a blokkok számára, amelyek a tárolójuk szélességének 100%-át foglalják el.
Ebből több következtetés is következik, ezeket többször is el lehet olvasni, mert ezek megértése rendkívül fontos:
Ha például col-sm-6-ot állítunk be, akkor ez a szélesség el lesz mentve a blokkhoz, valamint az md-hez és az lg-hez, ha ezekre az eszközökre nincs írva.
Vegyük ugyanezt a példát (col-sm-6). De az xs-en, vagyis az extra kis eszközökön a blokkszélesség 100%, nem 50%. Vagyis az előírt szélesség öröklődése csak nagy készülékeknél következik be, kisebbeknél semmi esetre sem. Például, ha a következő osztályt írjuk: col-lg-6, akkor a blokk csak 1200 pixelnél nagyobb képernyőkön lesz ilyen széles. Az md, sm, xs eszközökön más szélesség lesz.
Egy blokkhoz nem egy, hanem több osztályt is megadhatunk. Például col-xs-6 col-md-4. Próbáljon meg válaszolni gondolatban, mekkora lesz a blokk szélessége a különböző eszközökön? Ne olvass tovább)
És a válasz:
Az xs képernyőkön 50%, azaz a konténer szélességének fele lesz
Sm-en ugyanaz - 50%. Miért? Ahogy fentebb mondtam, az érték öröklődik a nagyobb szélességű eszközöknél.
Az md-n a blokk a szélesség egyharmadát foglalja el.
A legnagyobb képernyőkön is egyharmad. Az érték ismét az md-től öröklődik.
De a Bootstrap semmilyen módon nem korlátoz, és akár így is írhatod:
< div class = "col-xs-10 col-sm-8 col-md-6 col-lg-4"> < / div > |
Ez azt jelenti, hogy általában minden eszköztípushoz állítsa be a saját kijelzőjét. Itt már megértheti, hogy a blokk milyen széles lesz a különböző képernyőszélességeken.
FIGYELEM! Soha ne engedje meg magának, hogy egy sorban 12-nél több oszlop legyen, különben a webhely széteshet.
A Bootstrap rács ereje azonban nem csak abban rejlik, hogy beállíthatja a blokkok különböző megjelenítését különböző szélességekben. És azt is, hogy bármelyik blokkba beágyazhatja a rácsot. Nézzük ezt a kódpéldát:
< div class = "container" > < div class = "row" > < div class = "col-sm-8 col-md-6" > < div class = "row" > < div class = "col-sm-4 col-md-3" > 1 < / div > < div class = "col-sm-4 col-md-3" > 2 < / div > De nyugodtan elképzelhetjük, hogy ez a blokk is konténer, miért ne? Valójában ez így van az oldal fejlesztésekor. Van egy közös tároló a teljes webhely számára, egy tároló a tartalomhoz, oldalsávokhoz, fejlécekhez stb. Elképzelheti, hogy ez a blokk a webhelyen található szöveges fő blokk tárolója, sorra teszünk bele egy sort (ügyeljen arra, hogy kövesse a kód - tároló - sor - cellák szerkezetét). Ebben a sorban, amint látható, 3 blokk található, és mindegyikhez különböző eszközökön van beállítva a viselkedés. Sőt, van egy rácsunk a főrácson belül! És ez a beágyazott rács is 12 oszlopos lesz. Mondok még többet. Korlátlan számú beágyazott rács lehet. Például ez a három blokk három termékkártya egy online áruházban. Maga a kártya felépítése is meglehetősen bonyolult lehet. Ki tudja, talán ott is beágyazott rácsot használ. Így a Bootstrap keretrendszer egyszerűen eltünteti a weblapok elrendezése előtt álló akadályokat: létrehozhat egyszerű szabványsablonokat és a legbonyolultabb, ezer elemet tartalmazó oldalakat is. Hiszen a rács nem csak egy általános helyszíni konténer, a rácsrendszer akár nagyon kis tömbök jelölésénél is alkalmazható. Adaptív segédprogramokA keretrendszer másik csodálatos tulajdonsága az adaptív segédprogramok. most elmagyarázom. Biztosan nem tervezi a webhely elemeinek 100%-át a nagy asztali számítógépeken látható mobileszközökön megjeleníteni – egyszerűen nincs hová betolni az egészet. Nagyon gyakran mobileszközökön teljesen eltávolítják az oldalsó oszlopot, összecsukják a menüt, eltávolítanak néhány nagyot díszítő elemek stb. A Bootstrapben mindezt nagyon egyszerűen megtehetjük a responsive utilities nevű osztályok segítségével. Megtalálhatja őket az alábbi dokumentációban: http://www.oneskyapp.com/ru/docs/bootstrap/css#responsive-utilities
Itt található ezeknek az osztályoknak a listája. Egy elem elrejtéséhez kívánt eszközt, csak a négy osztály egyikét kell használnia: hidden-xs|sm|md|lg. Szeretném megjegyezni, hogy az elem csak a megadott képernyőszélességen lesz elrejtve, az összes többinél látható marad. Ha egy elemet csak a négy eszköztípus egyikén kell láthatóvá tenni, kényelmesebb a Látható-xs|sm|md|lg-block|inline|inline-block osztályok használata. Kivéve magát kulcsszóés eszköztípust, itt azt is meg kell adni, hogy pontosan hogyan jelenítse meg az elemet: blokkként, soronként vagy blokksorként. Példák: Látható-xs-inline - az elem csak a legkisebb képernyőkön lesz látható, és vonalként jelenik meg; Látható-lg-blokk - csak a legnagyobb képernyőkön lesz látható, és blokkos lesz; Az adaptív segédprogramok lehetővé teszik a webhely bármilyen módon történő átalakítását minden típusú eszközön. Szükség szerint használja őket az elrendezésben. Egyéb rács jellemzők és összesenBarátaim, még sokat kell írni a bootstrap gridről, mert az elméletnek csak körülbelül a felét fedtük le. A többi osztályt és példát a dokumentációban találja. Miért ajánlom erősen neked? Mert az elmélet az elmélet. Ezt a cikket a dokumentációval együtt legalább 10-szer elolvashatja, de ha nem javítja ki az összes példát a gyakorlatban, akkor gyakorlatilag használhatatlan lesz. Szeretjük a gyakorlatot, és hisszük, hogy ez a siker kulcsa. Még ha nem is értesz valamit az elméletből, később, a valódi elrendezés elrendezése során saját szemeddel látod, hogyan működik a rács, és ezt a megértést egyikőtök sem fogja kiütni. Ráadásul a kurzus nem csak az elméletet magyarázza el, és egy egyszerű elrendezést készít. Célunk, hogy professzionális fejlesztőkké váljunk, ehhez pedig fokozott bonyolultságú elrendezéseket kell készíteni, amit a tanfolyam második részében meg is fogunk tenni, miután létrehoztunk egy webáruházat és egy landing oldalt. Általában a Bootstrap professzionális szintű elsajátítása vagy sem az Önön múlik. Célom az volt, hogy elmagyarázzam neked a Bootstrap Grid alapjait. Remélem, sikerült, és a maga javára olvassa el ezt a kiadványt. A közeljövőben olyan professzionális webfejlesztők körébe várunk, akik a Bootstrap segítségével bármilyen, abszolút bármilyen bonyolultságú elrendezést készítenek!
Bootstrap 4 keretrendszer. Gyors kezdés Tanuld meg a Bootstrap 4 alapjait egy gyakorlati példával, hogyan építs fel egy blogot a semmiből |
Ebben a cikkben megismerkedünk a Bootstrap 3 keretrendszer osztályaival, amelyek célja a webhely adaptív "csontvázának" (elrendezésének) létrehozása.
A Bootstrap rács "épület" elemekből áll. A főbbek azok csomagoló edények, sorok, adaptív blokkokés reszponzív közüzemi osztályok.
A grid lényegében csak egy előre definiált osztályok listája, amelyekkel beállíthatjuk a blokkok (HTML elemek) szükséges viselkedését, és segítségével egy bizonyos adaptív webhelyelrendezést építhetünk fel.
csomagoló tartály- ez a rács egy "épület" eleme, amelytől a fejlesztési stratégiától függően elkezdődik a teljes oldal vagy annak egy részének (például fejléc, főmenü, főterület, lábléc) elrendezésének elkészítése.
Megtörténik a tároló a Bootstrapben adaptív-rögzített vagy adaptív gumi.
Az első ( adaptív-fix konténer) jellemzője, hogy állandó szélessége van valamilyen nézetablak szélességi tartományon belül.
A következő táblázat azt mutatja, hogy milyen széles egy reszponzívan rögzített tároló egy adott böngésző nézetablak szélességénél:
| nézetablak szélessége | Konténer szélessége |
|---|---|
| <768px | A tároló szélessége megegyezik a nézetablak szélességével |
| >= 768 képpont és<992px | 750 képpont |
| >= 992 képpont és<1200px | 970 képpont |
| <=1200px | 1170 képpont |
A szélesség beállítása mellett a Bootstrap reszponzívan rögzített tárolója vízszintesen is középre állítja magát az oldal széleihez képest. Ezt a margin-left:auto és margin-right:auto CSS tulajdonságokkal teszi. A reszponzív-javított tároló emellett 15 képponttal balra és jobbra is beállítja a kitöltést (a CSS-tulajdonságokkal a padding-left:15px és a padding-right:15px) a benne elhelyezett tartalomhoz.
Az adaptív folyadéktartály abban különbözik az adaptív-rögzített tartálytól, hogy teljes szélességében elfoglalja(100%) böngészőablak. Ezenkívül az adaptív-rögzített tárolóhoz hasonlóan 15 képponttal balra és jobbra állítja a benne elhelyezett tartalom belső margóit.
A webhely elrendezésének kidolgozásakor általában nem használják egyes Bootstrap-burkolók beágyazása másokba.
Tehát a Bootstrap rács első „épülete” egy burkolótartály. Meghatározza az elrendezés szélességét a különböző nézetablakban, és középre is állítja (csak adaptív-rögzített tároló), a lap vagy a böngészőablak ügyfélterületének bal és jobb széléhez képest.
A következő épületelem egy sor (egy div blokk sorosztályú). A sor egy speciális blokk, amely csak más épületelemek (adaptív blokkok) burkolására szolgál. Fő célja, hogy semlegesítse a csomagolótartály vagy reszponzív blokk pozitív párnázását (15 képpont balra és jobbra).
Példa a behúzások kialakítására:
Tároló (+15px) -> sor (-15px) -> oszlop (+15px) -> tartalomtároló (+15px) -> sor (-15px) -> col (+15px) -> sor (-15px) -> col (+15px) -> tartalom *col egy reszponzív blokk
A példa azt mutatja, hogy függetlenül attól, hogy milyen reszponzív blokkban van a tartalom, mindig a megfelelő margó lesz (azaz 15 képpont balra és jobbra).
A Bootstrap rács következő "építőeleme" egy reszponzív blokk (div osztály col-?-?).
adaptív blokkok a Bootstrap rácselemei egy vagy több col-?-? . Ezek a blokkok a fő "építő" téglák, ezek alkotják a szükséges szerkezetet.
Az adaptív blokk szélessége be van állítva az eszköz típusához kapcsolódik. Ez azt jelenti, hogy a reszponzív blokk eltérő szélességű lehet a különböző eszközökön. Emiatt ezt a blokkot adaptívnak nevezik.
Hogyan van beállítva a reszponzív blokk szélessége? A reszponzív doboz szélessége, amellyel egy adott eszközön rendelkeznie kell, alapértelmezés szerint 1 és 12 közötti szám (a Bootstrap oszlopok száma). Ez a szám jelenik meg a második karakter helyett? osztályban col-?-? .
Ez a szám (alapértelmezett 1-12) határozza meg a szülőelem szélességének hány százaléka adaptív blokkal kell rendelkeznie.
Például az 1-es szám a reszponzív mező szélességét a szülődoboz szélességének 8,3%-ára (1/12) állítja be. A 12-es szám a szülőblokk szélességének 100%-ával (12/12) egyenlő szélesség.
Az adaptív blokk szélességének megadása mellett meg kell adnia az eszköz típusát is(1 kérdés helyett). Az eszközosztály határozza meg, hogy ez a szélesség melyik nézetablakra vonatkozik. A Bootstrap 3 4 fő osztályt különböztet meg. Ezek a következők: xs (nézetablak szélessége > 0), sm (nézetablak szélessége >= 768 képpont), md (nézetablak szélessége >= 992 képpont) és lg (böngésző nézetablak szélessége >=1200 képpont).
Például a col-xs-12 col-sm-6 col-md-4 col-lg-3 osztályú adaptív blokk szélessége 100% (12/12) xs és 50% (6/12) ) sm-en, md-n - 33,3% (4/12), lg-n - 25% (3/12).
Ezenkívül figyelni kell arra a tényre, hogy az adaptív blokkok nem korlátozzák a hatótávolságukat. Azok. ha egy adaptív blokk osztály attribútumaként megadja az xs-t, de nem adja meg az sm -t, akkor a hatása ennek a tartománynak a hatókörére fog kiterjedni.
Például a col-xs-6 col-lg-3 osztályú adaptív blokk szélessége 50% (6/12) xs, sm és md eszközökön, 25% (3/12) lg esetén.
Az adaptív blokk, mint egy tároló, 15 képpontos pozitív margót állít be balra és jobbra a benne elhelyezett tartalomhoz.
A megfelelő Bootstrap rácselrendezésben az érzékeny blokknak mindig egy sornak kell lennie szülőként.
Például osszuk fel a blokkot 3 egyenlő oszlopra, amelyek függőlegesen jelennek meg xs-en, vízszintesen pedig sm-en és felette:
Például számítsuk ki a tartalom elérhető szélességét az első és a második blokkhoz:
| Ellenőrző pontok | Elérhető szélesség 1 blokk | Elérhető szélesség 2 blokk |
|---|---|---|
| 320 képpont – 749,98 képpont | 290 képponttól (320 képpont – kitöltés (30 képpont)) 719,98 képpontig (749,98 képpont – kitöltés (30 képpont)) | |
| 750 képpont – 969,98 képpont | 720 képpont (750 képpont – kitöltés (30 képpont)) | |
| 970 képpont – 1169,98 képpont | 616,7 képpont (970 képpont*8/12 – kitöltés (30 képpont)) | 293,3 képpont (70 képpont* 4/12 – kitöltés (30 képpont)) |
| 1170 képpont és több | 750 képpont (1170 képpont*8/12 – kitöltés (30 képpont)) | 360 képpont (1170 képpont* 4/12 – kitöltés (30 képpont)) |
A reszponzív blokkok soronként egymás után kerülnek a szülőelembe. Egy sor olyan adaptív blokkokat tartalmaz, amelyek összesen legfeljebb 12 oszlopot tartalmaznak (alapértelmezés szerint). Azok. az első sorba nem férő blokkok a következő sorba kerülnek, és így tovább.
Hogyan vannak elrendezve az adaptív blokkok? 
A Bootstrap 3-ban a reagáló blokkok lebegnek (float:left). Ezt figyelembe kell venni a weblap elrendezésének kialakításakor.
A blokk előtt, amelynek új sorban kell kezdődnie, egy üres div elemet kell elhelyezni clearfix osztályával. Azon eszközökön is el kell rejtenie, amelyeken ezt a műveletet nem kell végrehajtani. A blokk el van rejtve az alább megadott megfelelő osztályok használatával.
A lebegő blokkoknak is van egy tulajdonsága. Például, ha a fenti példában 1 blokk magassága nagyobb lesz, mint 2 blokk. Ekkor a 3. blokk nem egy új vonalra kerül, hanem az 1. blokk jobb oldalához "ragad".
Ennek megakadályozása érdekében hozzá kell adnia egy clearfix osztályú blokkot, és láthatóvá kell tennie a szükséges eszközök számára (például md-n és lg-n):
Az elrendezés létrehozásának alapelve, hogy egyes adaptív blokkokat másokhoz kell beágyazni. Ugyanakkor a szélességük mindig relatív paraméter, amelyet a szülőblokk szélességének százalékában (az oszlopok számával) adunk meg. Azok. a beágyazás bármely szintjén például egy 6 oszlopos reszponzív blokk mindig a szülőelem szélességének 50%-a (6/12*100%).
Például osszuk fel valamelyik blokkot (fő) 4 blokkra (2 az első sorban és 2 a második sorban). Az egyszerűség kedvéért olyan elrendezést hozunk létre, amely nem adaptív:
Hozzunk létre egy elrendezést 3 blokkból (3 x 2):
Könnyen belátható, hogy a beágyazott adaptív blokk elrendezése ugyanúgy történik, mint a fő. Ez azt jelenti, hogy nem mindegy, hogy egy blokk milyen szintű beágyazottsággal rendelkezik, az elrendezése ugyanazon szabályok szerint készül.
A Bootstrap reszponzív osztályokkal rendelkezik (col-?-offset-?), amelyek segítségével egy blokkot bizonyos számú oszlopot jobbra mozgathat. Az első? eszköztípusra kell cserélni (xs , sm , md vagy lg). Második? az oszlopok számához.
Például állítsuk be a blokkot az md eszközökön 8 oszlop szélesre, és helyezzük a középső sorba (azaz mozgassuk 2 oszloppal jobbra):
Az adaptív blokkeltolás eszközei mellett a Bootstrap 3 speciális osztályokkal is rendelkezik, amelyek segítségével egy sorban módosítható az elemek sorrendje.
A Bootstrap 3 adaptív (segédprogram) osztályokat tartalmaz, amelyek lehetővé teszik az elemek megjelenítésének láthatóságát az eszköz típusától függően.
Amellett, hogy megadja azt az eszközt (xs , sm , md , lg), amelyen a blokk látható lesz, azt is meg kell adnia, hogyan jelenjen meg ezen az eszközön. A lehetőségek a következők: inline , block és inline-block .
| Osztály | Leírás |
|---|---|
| látható-xs-? | Az elemet csak nagyon kis képernyővel rendelkező eszközökön teszi láthatóvá xs (nézetablak szélessége<768px). На других устройствах эти элементы не отображаются. |
| látható-sm-? | Az elemet csak az sm képernyővel rendelkező eszközökön teszi láthatóvá (a nézetablak szélessége >=768 képpont és<992px). На других устройствах эти элементы не отображаются. |
| látható-md-? | Az elemet csak md képernyővel rendelkező eszközökön teszi láthatóvá (a nézetablak szélessége >=992 képpont és<1200px). На других устройствах эти элементы не отображаются. |
| látható-lg-? | Az elemet csak az LG képernyővel rendelkező eszközökön teszi láthatóvá (a nézetablak szélessége >=1200 képpont). Más eszközök nem jelenítik meg ezeket az elemeket. |
Jel helyett? block , inline , vagy inline-block meg kell adni. Azok. adja meg, hogy az elem hogyan jelenjen meg.
Például, ha egy elemhez hozzáadja a látható-md-blokk osztályt, akkor az csak azokon az eszközökön jelenik meg, amelyek rendelkeznek md nézetablakkal (width viewport >=992px és<1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).
Megjegyzés: Ezek az osztályok együtt is használhatók arra, hogy elemeket több eszközön is láthatóvá tegyenek. Például, ha egy elemre alkalmazza a Látható-xs-inline és a Látható-md-inline osztályokat, akkor kis és közepes képernyős eszközökön is láthatóvá válik. Ez az elem inline-ként jelenik meg (CSS: display:inline;).
Ezeken kívül a Bootstrap 3-nak több, ellenkező hatású osztálya van. Használhatók bizonyos eszközökön lévő elemek elrejtésére.
Ezek az osztályok együtt is használhatók egy elem láthatatlanná tételére több eszközön.
Például egy rejtett-xs és hidden-sm osztályú elem nem lesz látható egyszerre 2 eszközön (xs és sm).
A fenti reszponzív osztályokon kívül a Bootstrap 3 keretrendszer olyanokat is tartalmaz, amelyek lehetővé teszik az elemek láthatóságának szabályozását nyomtatáskor.
| Osztály | Leírás |
|---|---|
| látható-nyomtató-blokk | A megadott osztályú elem nem jelenik meg az oldalon. Ez az elem nyomtatáskor látható lesz, és megjelenítési CSS tulajdonsága blokkra van állítva. |
| látható nyomtatási sor | A megadott osztályú elem nem jelenik meg az oldalon. Ez az elem nyomtatáskor látható lesz, és a Display CSS tulajdonsága inline értékre van állítva. |
| látható-nyomtatás-inline-blokk | A megadott osztályú elem nem jelenik meg az oldalon. Ez az elem nyomtatáskor látható lesz, és megjelenítési CSS tulajdonsága inline-block értékre van állítva. |
| rejtett nyomat | A megadott osztályú elem nem jelenik meg nyomtatáskor. Az oldalon (a böngészőben) ez az elem látható lesz. |
A cikk ezen részében végigvezetjük a Bootstrap 3 rács segítségével adaptív blokk-elrendezés létrehozásának folyamatát.
Az elrendezés három blokkból áll. Ezeket a blokkokat a képen látható módon kell elhelyezni az eszközökön.
Az elrendezés tervezése általában apró eszközökkel (xs) kezdődik. Ezen az eszközön a blokkok azonos szélességűek, 12 Bootstrap oszlopnak felelnek meg.
Az sm-en a blokkok a következőképpen vannak elrendezve:
Az md-n az 1. és 2. blokk az első sorban, a 3. blokk pedig a 2. sorban található. Az 1. blokk szélessége 8 Bootstrap oszlop (col-md-8), a 2. blokk 4 oszlopos (col-md-4).
A 3. blokkot mindig a 2. sorba kell helyezni. Ennek biztosítására a blokk elé egy további üres blokkot kell elhelyezni clearfix osztályú. Ez a blokk nem teszi lehetővé, hogy a 3. blokk az előző blokkok köré csavarodjon. Ezenkívül ne feledje, hogy a clearfix osztályú blokkot csak az md-n kell megjeleníteni, mert erre a műveletre nincs szükség más eszközökön.
Az lg-n az adaptív blokkok vízszintesen vannak elrendezve, és együtt foglalják el a teljes szélességet. Az 1. mezőnek a szülőelem szélességének fele kell lennie (6. oszlop), a 2. mező a szélesség egynegyede (3. oszlop), a 3. mező pedig a szülőelem szélességének egynegyede. (col-lg-3) .
További érdekes témák.
