Ebben a cikkben a Bootstrap Grid rendszerről fogunk beszélni.
A grafikai tervezésben a Bootstrap rács egy (általában kétdimenziós) szerkezet, amely egymást metsző egyenes vonalakból áll (függőleges, vízszintes), amelyeket a tartalom strukturálására használnak. Széles körben használják az elrendezés tervezésében és a tartalom felépítésében a nyomdai tervezésben. A webdizájnban ez nagyon hatékony módszer gyorsan és hatékonyan hozzon létre következetes elrendezést HTML és CSS használatával.
Egyszerűen fogalmazva, a webdesign rácsjai rendszerezik és strukturálják a tartalmat, megkönnyítik a webhelyek feltérképezését, és csökkentik a felhasználók kognitív terhelését.
Amint azt a Bootstrap grid rendszerre vonatkozó hivatalos dokumentációja írja -
A Bootstrap rugalmas mobil első folyadékrendszert tartalmaz, amely ennek megfelelően 12 oszlopra méreteződik, ahogy az eszköz vagy a nézetablak növekszik. Előre meghatározott osztályokat tartalmaz egyszerű lehetőségek elrendezést, valamint erőteljes mixineket a szemantikai elrendezések létrehozásához.
Magyarázzuk meg a fentieket. A Bootstrap 3 az először mobil Abban az értelemben, hogy a Bootstrap kódja most a kisebb képernyők, például a mobilok, a táblagépek megcélzásával kezdődik, majd az összetevőket és rácsokat a nagyobb képernyőkre, például laptopokra, asztali számítógépekre "kiterjeszti".
A webes rendszerekkel oldalelrendezéseket készítenek sorok és oszlopok között, amelyekben az Ön tartalma található. Így működik a Bootstrap rács -
A médialekérdezés egy igazán divatos kifejezés a "feltételes CSS-szabályra". Csak néhány CSS-t alkalmaz bizonyos feltételek alapján. Ha ezek a feltételek teljesülnek, a stílus kerül alkalmazásra.
A Bootstrap médialekérdezései lehetővé teszik a tartalom mozgatását, megjelenítését és elrejtését a képernyő nézetének mérete alapján. A következő médialekérdezéseket a KEVESEBB fájlokban használják kulcsfontosságú töréspontok létrehozására a Bootstrap rácsban.
/* Extra kis eszközök (telefonok, kevesebb, mint 768 képpont) */ /* Nincs médialekérdezés, mivel ez a Bootstrap alapértelmezett beállítása */ /* Kis eszközök (táblagépek, 768 képpont és újabb) */ @media (min-szélesség: @képernyő) -sm-min) ( ... ) /* Közepes eszközök (asztali számítógépek, 992 képpont és nagyobb) */ @media (min-width: @screen-md-min) ( ... ) /* Nagy eszközök (nagy asztali számítógépek, 1200px és nagyobb) */ @media (min-width: @screen-lg-min) (... )
Néha a maximális szélességre bővülnek, hogy a CSS-t szűkebb eszközökre korlátozzák.
@média (max. szélesség: @screen-xs-max) ( ... ) @média (min-szélesség: @screen-sm-min) és (max-width: @screen-sm-max) ( ... ) @media (min-width: @screen-md-min) és (max-width: @screen-md-max) ( ... ) @media (min-width: @screen-lg-min) ( .. .)
A médiakérések két részből állnak: az eszköz specifikációjából, majd a méretszabályból. A fenti esetben a következő szabály van beállítva:
Fontolja meg ezt a sort -
@media (min-width: @screen-sm-min) és (max-width: @screen-sm-max) ( ... )
Minden eszköznél, típustól függetlenül minimális szélességgel: @screen-sm-min , ha a képernyő szélessége kisebb lesz, mint @screen-sm-max , akkor tegyen valamit.
A következő táblázat összefoglalja, hogyan működik a Bootstrap grid rendszere több eszközön −
| Sürgősségi kis eszközök Telefonok (768 képpontnál kisebb) | Kisméretű eszközök, táblagépek (768 képpont vagy annál nagyobb) | Közepes eszközök Asztali számítógépek (992 képpont vagy annál nagyobb) | Nagyméretű eszközök Asztali számítógépek (1200 képpont vagy annál nagyobb) | |
|---|---|---|---|---|
| Hálós viselkedés | Mindig vízszintesen | Kezdéskor összecsukva, vízszintesen a töréspontok felett | Kezdéskor összecsukva, vízszintesen a töréspontok felett | |
| A tartály maximális szélessége | Nem (automatikus) | 750 képpont | 970 képpont | 1170 képpont |
| osztály előtagja | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Oszlopok száma | 12 | 12 | 12 | 12 |
| Maximális oszlopszélesség | Auto | 60 képpont | 78 képpont | 95 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) | |
| Befektetett | Igen | Igen | Igen | Igen |
| Eltolások | Igen | Igen | Igen | Igen |
| Rendelés oszlop | Igen | Igen | Igen | Igen |
A Bootstrap rács alapstruktúrája a következő -
Vegyünk néhány egyszerű rács példát -
A rendelkezésre álló négyszintű rácsokkal olyan problémákba ütközhet, amikor bizonyos töréspontokon az oszlopok nem teljesen tiszták, mivel az egyik magasabb, mint a többi. Ennek kijavításához használja a .clearfix osztály és a válaszadó segédprogram osztályok kombinációját a következő példában látható módon -
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
Mérje át a nézetablakot, vagy tesztelje telefonon, hogy elérje a kívánt eredményt ebben a példában.
Az eltolások hasznos funkció speciálisabb elrendezéseknél. Használhatók oszlopok húzására nagyobb távolságra (például). A .col-xs-* osztályok nem támogatják az eltolásokat, de könnyen replikálhatók üres cella használatával.
Ha eltolást szeretne használni nagy képernyőkön, használja a .col-md-offset-* osztályokat. Ezek az osztályok egy oszlop bal margóját * oszlopokkal növelik, ahol a * 1-től 11-ig terjed.
A következő példában a div class = "col-md-6" van. Ezt a .col-md-offset-3 osztály segítségével állítjuk középpontba.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ez a következő eredményt fogja eredményezni -
Ha tartalmat szeretne beágyazni az alapértelmezett rácsba, adjon hozzá egy új .row-t és egy .col-md-* oszlopkészletet egy meglévő .col-md-* oszlophoz. Az egymásba ágyazott soroknak 12 oszlopot kell tartalmazniuk.
A következő példában az elrendezés két oszlopból áll, a második pedig négy téglalapra van osztva két sorban.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Consectetur art party Tonx culpa szemiotics. A Pinterest minimum bio quis.
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.
Ez a következő eredményt fogja eredményezni -
A Bootstrap rácsrendszerének másik jó tulajdonsága, hogy könnyedén írhat oszlopokat sorrendben, és megjelenítheti őket egy másikban. Könnyedén átrendezheti a rács beépített oszlopait a .col-md-push-* és .col-md-pull-* osztályokkal, ahol a * 1-től 11-ig terjed.
A következő példában két oszlopelrendezés van, a bal oldali oszlop a legkeskenyebb, és oldalsávként működik. Ezeket az oszlopokat átrendezzük a .col-md-push-* és .col-md-pull-* osztályok használatával.
Rendelés előtt
Megrendelés után
Ez a következő eredményt fogja eredményezni -
A Twitter Bootstrap 3 rácsrendszer gyors és egyszerű módja a webhely elrendezésének.
A rendszerindító rácsokat weboldal-elrendezések fejlesztésére és blokk-elrendezések létrehozására használják, amelyekben biztosítani kell helyes hely elemeket. A rács tervezése egy fix vagy lebegő szélességű konténerrel kezdődik.
Fix szélességű konténer (
Lebegő szélességű konténer (
A következő lépés a sorok (.row osztályú divek) elhelyezése a tárolóban. sor szélesség (
A sorban a col-*-* osztályú blokkok vannak elhelyezve, amelyeken belül a tartalom vagy egyéb sorok kerülnek. A col-*-* osztályú blokkok szélességét a Bootstrap oszlopok számának megadásával relatív formában állítjuk be. Mivel a Bootstrap egyik sora alapértelmezés szerint 12 oszlop, a col-*-* blokk minimális szélessége egy Bootstrap oszlop, a col-*-* blokk maximális szélessége pedig 12 Bootstrap oszlop.
Ha például 3 azonos szélességű blokkot szeretnénk létrehozni egy sorban, akkor ezeknek a blokkoknak a szélességét 4 Bootstrap oszlopra (
Például: A blokk szélességét pixelben a következőképpen számíthatja ki:
[Block width] = [Bootstrap oszlopszélesség]*[Oszlopok száma, amelyekből a blokk áll],
ahol: [Bootstrap oszlopszélesség] = [Sorszélesség (sor)] / 12.
[Bootstrap oszlopszélesség] = 970 / 12 = 81 képpont.
[blokk szélessége] = 81 * 4 = 324 képpont.
Weboldal-elrendezések létrehozásához különféle eszközökhöz (okostelefonok, táblagépek, laptopok és személyi számítógépek) az előre meghatározott Twitter Bootstrap 3 rácsosztályokat kell használnia.
A .col-xs-* osztály segítségével például rácsot hozhat létre kis képernyős eszközökhöz, például okostelefonokhoz. Pontosan ugyanabban az osztályban. col-sm-* - kis képernyős eszközökhöz, például táblagépekhez, .col-md-* osztály - közepes képernyő méretű eszközökhöz, például személyi számítógépekhez és laptopokhoz, valamint .col-lg-* osztály - nagy képernyős eszközökhöz .
Az alábbi táblázat összefoglal néhányat Főbb jellemzők új rendszer Bootstrap 3 rács.
| A Bootstrap 3 Grid System jellemzői | Kicsi képernyő szélesség Okostelefonok (<768px) |
Kis képernyőszélesség Tabletek (≥768 képpont és<992) |
Átlagos képernyőszélesség laptopok (≥ 992 képpont és<1200px) |
Nagy képernyő szélesség Számítógépek (≥ 1200 képpont) |
|---|---|---|---|---|
| Konténer szélessége rögzített elrendezés (.tartály) |
750 képpont | 970 képpont | 1170 képpont | |
| Folyadékelrendezési tartály szélessége (.container-fluid) | Egyenlő a böngésző kliens ablakának szélességével | |||
| osztály előtagja | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Bootstrap maximális oszlopszélesség fix szélességű tárolóhoz (.container) | ~62px (750px / 12) | ~81 képpont (970 képpont / 12) | ~97 képpont (1170 képpont / 12) | |
| Max. rendszerindító oszlopszélesség lebegő tárolóhoz (.container-fluid) | A böngészőablak munkaterületének szélessége / 12 | |||
| Kitöltés Bootstrap oszlopokból álló tartalomblokkokhoz | 15 képpont a blokk bal és jobb oldaláról | |||
Jegyzet:
Ha a .col-sm-* osztályt alkalmazza egy blokkra, az nem csak a kis képernyős eszközök (táblagépek) jelölését érinti, hanem a közepes és nagy képernyős eszközöket is, ha nem adja meg a .col-md- osztályokat. * és .col-lg-* . Hasonlóképpen, a .col-md-* osztály nem csak a közepes képernyős eszközök jelölését fogja befolyásolni, hanem a nagy képernyős eszközök esetében is, ha a .col-lg-* osztály nincs megadva.
Az új Twitter Bootstrap 3 rácsrendszerrel könnyedén szabályozhatja webhelye elrendezésének megjelenítését a különböző képernyőszélességű eszközökön.
Példaként vegye figyelembe a webhely-elrendezés kidolgozásának folyamatát, amely 3 blokkból áll minden eszköz számára. A különböző eszközökön (okostelefonok, táblagépek, laptopok, személyi számítógépek) kidolgozott elrendezés másképp fog kinézni. Például az okostelefonokon ezek a blokkok függőlegesen, míg a személyi számítógép nagy képernyőjén vízszintesen vannak elhelyezve. Azaz az elrendezésünk automatikusan megváltozik, ha elérjük a böngészőablak szélességi határait.
A nagy képernyős (szélesség >=1200px) készülék oldalának elrendezése három vízszintesen elhelyezett blokkból áll, amelyek a konténer teljes szélességét elfoglalják. Az első doboz a tartály szélességének fele (col-lg-6), a második doboz a tartály szélességének egynegyede (col-lg-3), a harmadik pedig a tartály szélességének egynegyede. tartály (col-lg-3).
A webhely elrendezése közepes képernyős eszközhöz (szélesség >=992 képpont és<1200) состоит из трёх блоков, два из которых расположены в одной строке и один в другой. Первый блок имеет ширину равную 8 колонкам Bootstrap (col-md-8), второй блок занимает оставшуюся ширину, т.е. 12 - 8 = 4 колонки (col-md-4). Так как третий блок должен располагаться с новой строки, то необходимо перед ним поместить дополнительный пустой блок с классом.clearfix , который не будет обтекать предыдущие блоки. Также необходимо иметь в виду, что это надо сделать только для экранов со средней шириной. Для этого необходимо к пустому блоку дополнительно добавить класс.visible-md-block . Ширина 3 блока равна ширине контейнера (col-md-12).
Ugyanígy állítsa be az elrendezést más eszközökhöz is. Webhely elrendezése kis képernyős eszközhöz (szélesség >=768 képpont és<992px) состоит из 3 блоков, первый блок занимает всю ширину контейнера, остальные 2 блока расположены под ним и занимают каждый ширину, равную 6 колонкам Bootstrap.
<div class="container"> <div class="row"> <div class="col-lg-6 col-md-8" style= "height:300px; background:green;"> 1. blokkdiv > <div class="col-lg-3 col-md-4" style= "height:100px; background:narancs;"> 2. blokkdiv > <div class ="clearfix nähtav-md-blokk" >Weboldal elrendezése egy apró képernyővel (szélesség<768px) состоит из 3 блоков, которые расположены вертикально и занимают всю ширину контейнера.
<div class="container"> <div class="row"> <div osztály = "col-lg-6 col-md-8 col-sm-12 col-xs-12" stílus= "height:300px; background:green;">Megjegyzés: Nagyon kis képernyőszélességű készülékekhez (<768px) блоки по умолчанию всегда занимают всю ширину рабочей области экрана (col-xs-12) и располагаются один под другим как в нашем примере. Настраивать макет для таких устройств имеет смысл, если макет отличается от вышесказанного.
<div class="container"> <div class="row"> <div class="col-lg-6 col-md-8 col-sm-12" style= "height:300px; background:green;"> 1. blokkA Twitter Bootstrap 3 reszponzív segédprogram-osztályokat tartalmaz, amelyek lehetővé teszik az elemek megjelenítését csak bizonyos eszközökön, amelyek képernyőmérete a megfelelő tartományba esik.
A Twitter Bootstrap 3.2 támogatja a CSS megjelenítési tulajdonságot a .visible osztályban. Egy új funkció lehetővé teszi az olyan elemek láthatóságának beállítását a különböző képernyőkön, mint az inline , block és inline-block. Például a .visible-md-block osztály lehetővé teszi egy elem láthatóságát, ha az egy blokk elem, és a böngészőablak kliensterületének aktuális szélessége megegyezik az md tartományával (szélesség >=992 képpont és<1200px).
| Leírás | |
|---|---|
| .visible-xs-* | Az elemet csak nagyon kis képernyős eszközökön teszi láthatóvá, amelyek képernyőszélessége 768 képpontnál kisebb. Más eszközökön ezek az elemek nem láthatók. |
| .visible-sm-* | Csak azokon az eszközökön teszi láthatóvá az elemet, amelyek képernyőszélessége legalább 768 képpont (azaz ≥768 képpont), és kisebb, mint 992 képpont. Más eszközökön ezek az elemek nem láthatók. |
| .visible-md-* | Csak azokon az eszközökön teszi láthatóvá az elemet, amelyek képernyőszélessége legalább 992 képpont (azaz ≥992 képpont), de 1200 képpontnál kisebb. Más eszközökön ezek az elemek nem láthatók. |
| .visible-lg-* | Csak azokon az eszközökön teszi láthatóvá az elemet, amelyek képernyőszélessége legalább 1200 képpont (vagyis ≥1200 képpont). Más eszközökön ezek az elemek nem láthatók. |
Megjegyzés: Ezeket az osztályokat meg is oszthatja, hogy az elemek több eszközön is láthatóak legyenek. Például bármely blokkra alkalmazhatja a .visible-xs-* és .visible-md-* osztályokat, hogy az nagyon kis és közepes képernyős eszközökön is látható legyen.
Hasonlóképpen használhatja az alábbi segédprogram-osztályokat, hogy elrejtse az elemeket, hogy ne jelenjenek meg bizonyos eszközökön.
Tipp: Ezeket az osztályokat meg is oszthatja, hogy a blokkok ne legyenek láthatók több eszközön. Például alkalmazhatja a .hidden-xs és .hidden-md osztályokat egy weblapon lévő blokkra, hogy a blokkot láthatatlanná tegye nagyon kis és közepes képernyős eszközökön.
<p class="visible-xs-block"> Ez a bekezdés csak okostelefonokon lesz látható.p > <p class ="visible-sm-block" > Ez a bekezdés csak táblagépeken lesz látható.p > <p class="visible-md-block"> Ez a bekezdés csak közepes képernyőméretű eszközökön lesz látható.p > <p class="visible-lg-block"> Ez a bekezdés csak nagy képernyős eszközökön lesz látható.p >A szokásos Twitter Bootstrap 3 reszponzív osztályokhoz hasonlóan a következő segédosztályok is használhatók bizonyos blokkok megjelenítésére vagy elrejtésére weboldalak nyomtatásakor.
Mit fogsz megtanulni ezen a leckén? Ebben az oktatóanyagban létrehozhatja első drótvázas (sablon) webhelyét a Bootstrap rács segítségével.
A Bootstrap rács a következőkből áll hangszórókés vonalak. A rács létrehozásának könnyebb megértése érdekében a munkát feltételesen két szakaszra osztjuk.
1. szakasz - vonalak létrehozása.
A rács létrehozását sorok létrehozásával kell kezdeni. Egy sor létrehozásához írjon egy div címkét a "row" osztállyal. „sor” angolból. húrt jelent. Korlátlan számú sor lehet, de minden új sor létrehozásakor a div címkéhez hozzá kell rendelni a „row” osztályt.
2. szakasz - munka oszlopokkal.
A Bootstrap rács 12 oszlopból áll, minden oszlop azonos szélességű.
Az oszlopok több darabban összevonhatók és a kívánt pozícióba helyezhetők.
Az oszlopok egyesítéséhez (egyesítéséhez) meg kell adnia a „col-md-” osztályt. * » , ahol * az általunk összekapcsolt oszlopok számának megfelelő szám.
Fontos! Oszlopok összekapcsolásakor azok teljes számának mindig 12-nek kell lennie.
1. sor: mind a 12 oszlop, amely a rácsot alkotja;
2. sor: Tegyük fel, hogy két szabványos oszlop szélességű oszlopot szeretnénk. Összevontunk két oszlopot, de az oszlopok száma továbbra is 12.
7. sor: ebben az esetben a rácsot három egyenlő oszlopra kellett felosztanunk, ehhez háromszor összevontunk 4 oszlopot, ami összesen 12.
Tehát függetlenül attól, hogy hogyan osztja fel az oszlopokat, a hozzáadott oszlopok összegének 12-nek kell lennie.
És most lefordítom a Bootstrap rácselrendezését kódra:
Ha még mindig nem értesz valamit, akkor megpróbálom így elmagyarázni.
2 oszlopos weboldalra van szüksége. Bal oldalon az oldalsáv, jobb oldalon a tartalom.
Már tudja, hogy a Bootstrap rácsja 12 oszlopból áll.
4 oszlopot próbálunk egyesíteni egybe.
1 oszlop + 1 oszlop + 1 oszlop + 1 oszlop = 4 oszlop
Tehát a sitebar esetében a "col-md-" osztály így fog kinézni: "col-md-4".
12 (oszlopok) - 4 (összevont oszlopok) = 8 (az oszlopok balra).
Tehát a tartalom szempontjából a "col-md-" osztály így nézne ki: "col-md-8"
Így néz ki közös kód:
A Bootstrap képes különböző CSS-stílusokat írni, vagy eltérő módon felosztani a cellákat eszközcsoportokhoz.
Például azt szeretném, ha a webhelyem fejléce a nagy monitorokon egy cellára lenne osztva, de a telefonok esetében úgy döntöttem, hogy két cellát készítek, és más CSS-stílust alkalmazok rájuk. Megvan az ötlet?
Nézze meg, milyen órákra használhatja különféle csoportok eszközöket és az egyes osztályok jellemzőit.
Bootstrap elrendezési táblázat különböző eszközcsoportokhoz
| Nagyon kicsi készülék Telefonok (<768px) |
Kis eszközök Táblagépek (≥ 768 képpont) |
Közepes eszközök Asztali (≥ 992 képpont) |
Nagyméretű készülékek Asztali (≥ 1200 képpont) |
|
| Konténer szélessége | Nem (automatikus) | 750 képpont | 970 képpont | 1170 képpont |
| Előtag osztály | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| hangszórók | 12 | |||
| Oszlop szélesség | Auto | 60 képpont | 78 képpont | 95 képpont |
Lássuk, hogyan fog ez kinézni kódban:
Végül is:
- nagy eszközök (≥1200px) esetén két teljes szélességű sor lesz a képernyőn ("col-lg-12" osztály vonatkozik):
Közepes eszközök esetén (≥992px) két oszlop lesz a képernyőn ("col-md-8" és "col-md-4" osztály vonatkozik):
Kisméretű eszközökön (≥768px) két azonos szélességű oszlop lesz a képernyőn ("col-sm-6" osztály vonatkozik):
Nagyon kicsi készülékekhez<768px) будут на экране две колонки на всю ширину (действует класс «col-xs-12» ):
Szerintem itt találtad meg!
Térjünk át a gyakorlásra.
Tegyük fel, hogy megvan ez a vázlat a webhelyről:
Ennek az elrendezésnek a létrehozásához csak a mai lecke ismereteit kell felhasználnia. A problémát így oldottam meg:
Az eredményt láthatod. Ha szeretné, módosíthatja a képernyő méretét, vagy megnyithatja az eredményoldalt ezen keresztül különböző csoportok eszközöket.
Sziasztok, a blogoldal kedves olvasói. A cikk első részében a megismerkedtünk ennek a keretrendszernek a képességeivel, megtudtuk, mi az a reszponzív dizájn, és miért olyan fontos a különféle mobil kütyük népszerűségének rohamos növekedésének korszakában. Itt részletesen megvizsgáltuk a Bootstrap HTML-oldalhoz való csatlakoztatásának kérdéseit is (stílusfájlok, szkriptek és a jQuery könyvtár összekapcsolása).
A mai cikk a Bootstrap 3-ban használt rácsrendszerről szól. Megtudhatja, milyen rácsméretek használhatók, hogyan viselkednek a különböző képernyőméretű eszközökön, és hogyan hozhat létre saját maga sorokat és cellákat egy vagy több rács alapján. Mindezt példákkal magyarázzuk meg, ami, remélem, javítja a felfogást.
A Bootstrap 3 csomagban van tizenkét oszlopos rácsrendszer, amely elsősorban mobileszközökhöz készült. Azok. elsősorban a kis kijelzőkre, másodsorban a széles képernyőkre készült. NÁL NÉL új verzió Ennek a keretnek négy rácsmérete van. Mindezeket az információkat részletesen tanulmányozhatja a hivatalos GetBootstrap.com webhelyen, ha a felső menüben a "CSS" fülre lép, és a jobb oldalon kiválasztja a "Rácsrendszer" elemet.
Itt teljes körű magyarázatot kap a rendszer működéséről, a kapcsolódó médialekérdezésekről és így tovább. Az a HTML-elemek sorozata (például cikkek közleményei a kezdőlap), amelyet el szeretne helyezni a rácsban, körül kell vennie egy tárolóval (például Div címkékbe kell zárnia), és egy .row osztályt kell írnia hozzá (ebben az esetben a nyitó címke így fog kinézni
Nos, a soron belüli elemeket eloszthatja egyszerre egy vagy több típusú rács között, ha az osztály attribútumot egy értékkel állítja be, például .col-xs-number (ebben az esetben csak egy extra kis rácsot használunk ).
Ha például három egyforma méretű oszlopot szeretne kapni, akkor a 12-t (a rács mérete a Bootstrap 3-ban) el kell osztania 3-mal (a szükséges számú oszlop). Ez azt jelenti, hogy a soron belüli minden HTML-elemhez (ezek is lehetnek Div-tárolók) ugyanazokat az osztályokat kell regisztrálnia -
Kicsit lejjebb a "Rács opciók" területen talál magyarázatot a fent említettekre négy hálóméret modern bootstrap.
Az utolsó három rács csak akkor lesz vízszintes, ha a képernyő mérete nagyobb, mint az a pont, ahol az összecsukás megtörténik. Például egy 1200 pixelnél kisebb képernyőn lévő nagy rács esetén az többé nem lesz vízszintes, hanem függőleges lesz. A hivatalos GetBootstrap.com webhely oldalán, amelyet jelenleg áttekintünk, példák és magyarázatok találhatók erre vonatkozóan. Azonban véleményem szerint minden kissé zavaros és bonyolult.
Megpróbálom mindezt elmagyarázni kész példa. Csak a fájlt kell másolnia setka.html(ehhez válassza a helyi menü "Mentés hivatkozással másként..." elemét). Ha ezt a fájlt közvetlenül megnyitod a böngészőben (bal egérgombbal az adott hivatkozásra kattintva), akkor semmi sem fog működni, mert a Bootstrap keretrendszer nem csatlakozik.
Helyezze el a letöltött setka.html fájlt a Bootstrap mappába, amelyről beszéltünk. Ugyanolyan szinten kell lennie, mint a korábban létrehozott index.html fájlnak.
Most nyissa meg ezt a setka.html fájlt bármelyik választott böngészőben, és kísérletezzen a böngészőablak méretével, hogy lássa a Bootstrap 3 működését, és megértse a rácsrendszer működését. Melyikek? most elmagyarázom.
A monitorom képernyőjének felbontása 1280 pixel széles, ami több, mint a nagy rácsra beállított 1200 pixeles töréspont. Mit látunk ennek eredményeként? Valami ehhez hasonló kép:
Íme öt webhelyelrendezési példa, amelyekre épül különböző típusok rácsok:
Így láthatjuk és összehasonlíthatjuk, hogyan működnek együtt ezek a Bootstrap 3 arzenálból származó rácsok, és hogyan működnek külön-külön (ha csak egy típust használunk). Mert Mivel a böngészőm teljes képernyőre bővült (nagyobb mint 1200 képpont széles), amikor az előző képernyőképet készítettem, ez az öt webhelyelrendezési példa mind vízszintesen ki van bontva (az oszlopok a képernyő szélességében egymás mellett helyezkednek el).
Most szűkítsük le egy kicsit a böngészőablak méretét, hogy lássuk az összeomlást.
A felső sor feletti szöveg és a celláiban lévő osztályelőtagok megváltoztak (ehhez láthatósági osztályokat használtak, amelyekről később még szó lesz). A középső rács már használatban van, és továbbra is vízszintesen jelenik meg. Ugyanakkor az alsó sor (amely csak a használatát illusztrálja durva háló) függőlegesen összehajtva, azaz. a szomszédos blokkok most nem szélességben egymás mellett, hanem egymás alatt (magasságban) jelennek meg.
Kiderül, hogy egy nagy rács hiányában külső hatásígy viselkedik – függőlegesen halmozódik fel minden olyan eszközön, amelynek képernyőmérete 1200 pixelnél kisebb. Ebben az esetben a rácspéldában használt összes többi vízszintesen jelenik meg. Az első sor a rácsok kombinációját használja, így most a középső rácsrendszer vezérli ( nagy rendszer már nincs hatása).
Csökkentsük még egyszer a böngészőablak méretét szélességében, hogy az legyen. Lesz még egy összeomlás:
Most (a képernyő mérete alapján) egy kis ráccsal dolgozunk. Ennek megfelelően nem csak a nagy, hanem a közepes rács is függőlegesen fejlődött. Nos, az első sorban, ahol a rácsok kombinációját használják, most mindent a Bootstrap kis grid rendszere vezérel. Ugyanakkor a setka.html fájlban ebben az első sorban az oszlopok eloszlása is megváltozik, ami egyáltalán nem szükséges, de bizonyos elrendezési igények kielégítése érdekében ezt teljesen megteheti (sőt , „egy vagy kettő”, minden probléma nélkül).
Továbbra is csökkentjük a böngészőablak szélességét értékekre. Újabb összeomlás történik:
Ennek eredményeként nemcsak a nagy és közepes rácsok futnak függőlegesen az oldalon, hanem a kicsi is csatlakozott hozzájuk. az egyetlen egy nagyon kicsi rács vízszintes maradt, ami minden körülmények között így is marad (mint az imént láttuk). Még ha az oldalt rendkívül kis szélességre szűkíti is le, az ultrakicsi rács nem válik függőleges rácsmá (még akkor sem, ha a tartalom nem fér el a cellákban).
Ez a példa (setka.html fájl) pontosan készült. Arról, hogy ott minden hogyan van elrendezve, később részletesen fogunk beszélni. De egyelőre csak néhány apróságra szeretném felhívni a figyelmet, amelyeket a setka.html fájl forráskódjában észrevehet.
Az elrendezések látványtervezésére szolgáló stílusok (behúzások, rácsszínek stb.) felülre kerülnek a segítséggel, amelyek nem hordoznak különösebb szemantikai terhelést. Ha lefelé görgeti a forráskódot, ezt a blokkot fogja észrevenni:
Négy konténer van, amelyekhez különböző osztályok vannak hozzárendelve (további információ). Lehetővé teszik konkrét tartalom megjelenítését a különböző rácsméreteknek megfelelő médialekérdezések alapján. Hogyan működik? Mind a négy cím betöltődik a böngészőbe (ha megnézi a forráskódot), de csak egy cím jelenik meg az aktuális képernyőfelbontástól vagy a böngészőablak méretétől függően.
azt mesterrács, ahol mind a négy rácsrendszer kombinálva van (ezt olyan cellattribútumok segítségével láthatja, mint a class="col-lg-4 col-md-1 col-sm-5 col-xs-5" , amely mind a négy osztály előtagjait felsorolja rácsok) . Magát a sort, ahogy fentebb említettük, úgy határozzuk meg, hogy az összes alkotóelemét egy class="row" tárolóba helyezzük (példánkban egy div-alapú tároló).
Felhívjuk figyelmét, hogy a fő rácsunk három cellából (oszlopból) áll, és ha összeadja az egyes oszlopokhoz rendelt összes számot, például a Bootstrap ultra-kis rácselőtagjaihoz (col-xs), akkor egy összesen 12. Ekkor ugyanez igaz lesz az összes többi rendszer előtagja utáni számokra is. Érthető, mert ez a keret, mint fentebb említettük, 12 oszlopos felépítésű, pl. vízszintesen az elrendezéshez rendelkezésre álló összes hely fel van osztva tizenkét egyenlő szélességű oszlop(nem látható az oldalon - olyanok, mint az iskolai füzetek cellái).
Nos, az osztályelőtagok utáni számok segítségével egyszerűen beállíthatja az elrendezés egyes celláinak (valódi oszlopainak) az arányait. Azok. az arányok lehetnek például:
Általában, egy, kettő, három vagy mind a négy rácsrendszer használható egy elrendezésben (sorban). Minden a tervezési preferenciáitól és attól függ, hogy mit szeretne elérni a weboldalával (hogyan nézzen ki különböző képernyőméreteken). A hivatalos webhely példát mutat:
Most a legjobb megértés érdekében hozzunk létre egy HTML-oldalt, amely némileg emlékeztet valódi weboldal(fejléccel, szöveges és képi tartalommal, valamint lábléccel), és a Bootstrap 3 rácsrendszer segítségével rakja ki.
Pontosabban én magam készítem el az üreset, és csak azt javaslom, az előző példához hasonlóan, töltse le a fájlt. website.html(ehhez válasszuk a helyi menü "Mentés másként..." menüpontját), hogy később ehhez a "halhoz" együtt felvehessük a szükséges bootstrap osztályokat. Azt is a Bootstrap mappába kell helyezni, ugyanazon a szinten, mint az index.html fájlt, amelyet az első cikkben hoztunk létre (és a setka.html fájlt, amellyel közvetlenül fent dolgoztunk).
Ha megnézi a sait.html fájl forráskódját, látni fogja, hogy a Bootstrap és a jquery már benne van, és a szimulációhoz hozzáadták a tartalmat. megjelenésátlagos weboldal. Igen, szükség lesz egy mappára is az ezen az oldalon használt képekkel. Innen tudod letölteni - img.zip. Egyszerűen bontsa ki az archívumot, és helyezze el az img mappát (bizonyosodjon meg arról, hogy képfájlokat tartalmaz, és nem egy másik img mappát) a Bootstrap mappába, a sait.html fájllal azonos szintre. A szerkezet így fog kinézni:
Most (a Bootstrap mappából) a böngészőben látni fogja azt a weboldalt, amelyet példaként használtam. Feltűnő, hogy az oldalon az összes blokk egymás alatt helyezkedik el, és ez nagymértékben akadályozza az információk helyes vizuális észlelését. Logikus lenne ezeket oszlopokba helyezni, és úgy, hogy a képernyő méretének csökkenésekor erre reagáljon a „design”, az oszlopok számának változtatásával, hogy a látható terület különböző szélességű készülékeken is könnyebb legyen a megtekintés.
A sait.html fájl forrás Html kódjában az általam szánt sorok (sorok) határait szoktam megjeleníteni, amihez valamilyen Bootstrap grid rendszerrel testre szabjuk az oszlopok megjelenítését. Csak négy sor van (a fenti képernyőképen számozva vannak) - fejléc (fejléc a webhely nevével és logójával), az oldal címe és leírása, egy tartalmi rész (a fő tartalom négy cikk közleményeiből áll) és egy lábléc.
Most hozzá kell adnunk a Bootstrap jelölést a sait.html fájlhoz, amely. A sorok létrehozásához, amint emlékszik, elegendő az összes tartalmát egy tárolóba zárni (leggyakrabban ezek Div címkék, bár lehetnek mások is), és beírunk egy osztályt. class="row". Az első sorban így fog kinézni:
Ugyanígy kell eljárni az összes többi sornál (sornál) - tegye a nyitó címkét
Most pedig menjünk alkossunk sejteket azokban a sorokban (sorokban), ahol ennek értelme van. Teljesen logikus lenne, ha a cikkek hirdetményeit (a harmadik sortól) négy oszlopban helyeznénk el, és amikor a képernyő szélessége csökken, ez a négy oszlop legyen kettővé. Hogyan kell csinálni? Lássuk.
Tehát a Bootstrap 3-ban van egy 12 oszlopos rács, amelyről fentebb beszéltünk. Mivel úgy döntöttünk, hogy négy oszlopot készítünk bejelentésekkel, logikus lenne, ha a szélességük egyenlő lenne, ami azt jelenti, hogy mindegyik oszlop három cella (cella) széles lesz a láthatatlan rácsrendszerünkből (függetlenül attól, hogy melyik rácsot választjuk - ultra) -kicsi, kicsi, közepes vagy nagy).
Milyen hálózatot válasszunk a munkához? Kezdésnek vegyük kompromisszumként az átlagot. Ebben az esetben hozzá kell adnia a „col-md-3” osztályt mind a négy cella tárolójához -
A változtatások mentése után látni fogja, hogy weboldalunk már sokkal használhatóbb megjelenést kapott:
Igaz, ha a böngészőablak egy kisebb töréspont szélességre csökken (az általunk használt átlagos rács esetén ez 992 pixel lesz), akkor ismét minden közlemény sorakozik egy oszlopban, ami nem jó, mert a használhatóság ebben az esetben csökken (a közel 1000 pixeles felbontás lehetővé teszi az információk sűrűbb elrendezését). A helyzet orvoslására megteheti adjunk hozzá egy másik rácsot a Bootstrap arzenáljából ugyanazokhoz a bejelentési cellákhoz. Hogyan kell csinálni? Lássuk.
Használjuk az osztálynév "col-xs-6" előtagjait a közlemény minden cellájában (az eredmény egy összetett class="col-md-3 col-sm-6" lesz). Így fog kinézni (egy cellát használva példaként):
Hirdetmény szövege.
Mint látható, itt megsértettük azt a nemrégiben bejelentett szabályt, hogy az egy rács előtagja utáni számok minden cellában 12-t adjanak. 24-et kaptunk (négyszer hatot). De szándékosan csináltuk, hogy elérjük a kívánt eredményt - négy helyett két oszlopot kapunk, amikor átadjuk az átlagos Bootstrap rácsrendszer töréspontját (ez 992 pixel). Azok. a cellák két sorban lesznek, mindegyikben kettő:
Mert Ha egy ultra-kis rácsrendszert választunk, akkor a böngészőablak szélességének további csökkentésével nem jön létre a hirdetményekkel ellátott blokkok függőleges elrendezése egymás alatt (egy oszlopba helyezés), mert ez a rendszer mindig vízszintes marad.
Ha azt szeretné, hogy négy oszlop két oszlopmá alakuljon, amikor a képernyő szélessége csökken, majd egy oszlopba, akkor használjon kis rácsrendszert a "col-xs-6" helyett. "col-sm-6":
Ezután, amikor a böngészőablak szélessége 768 pixel alá csökken, egy töredéket fog látni, amelyben két közleményt tartalmazó oszlop egybe lesz konvertálva. Csak kísérletezzen, és érezze a különbséget.
Kísérletezzünk és próbáljuk újra, amelyben lényegében két potenciális cella van - a webhely neve leírással, valamint egy logó. Valójában mi helyezzük el őket. Használjunk ezúttal egy nagyobb rácsot "col-lg-6" hogy két egyenlő oszlopot kapjunk.
Mindent a webhelyek, blogok, fórumok, online áruházak létrehozásáról, ezek népszerűsítéséről a keresőkben és a webhelyen való pénzkeresésről
Igaz, nagy rács használatakor a selejtezés meglehetősen nagy képernyőfelbontásoknál történik (esetünkben böngészőablakok, mert ott különböző képernyőszélességű eszközöket szimulálunk). Ezt követően a cellákat függőlegesen hajtogatják. Ennek elkerülése érdekében mi adjunk hozzá még egyet Bootstrap rács 3 az első sorhoz. Szerintem egy kis rácsrendszer (col-sm osztály előtag) megteszi. Ezután a kód valahogy így fog kinézni:
Mindent a webhelyek, blogok, fórumok, online áruházak létrehozásáról, ezek népszerűsítéséről a keresőkben és a webhelyen való pénzkeresésről
A kis rácsnál azonban nem tettem azonossá a webhely nevével és logóval ellátott cellákat, mert a logó lényegében Szűkebb (értelemszerűen szűkebb) a leíráshoz képest. Kisebb képernyőszélességnél nem lenne logikus egyenlő cellákat rendelni hozzájuk. Ezért készítettem az első oszlopot az oldal nevével és leírásával, amikor a Bootstrap kis grid rendszer kétszer akkora, mint a logóoszlop, aktiválódik.
Ennek eredményeként a böngészőablak lecsökkentésével ezek a cellák a kis Bootstrap grid rendszernél a 768 pixelnél kisebb szélességben előforduló szünet pillanatáig összefolynak, majd mindkét cella egymás alá kerül.
Lehet, hogy észrevette, hogy az oldalon lévő szöveg a képernyő bal szélébe ütközik, ami okozza a . Ezt a helyzetet javíthatja a body címkében, ami lehetővé teszi. És mindent meg lehet oldani szabvány azt jelenti Bootstrap 3.
Ehhez be kell csomagolnia a weboldal teljes tartalmát (mindent, ami a Body címkék között van) egy Div-tárolóba, amelynek azonos nevű osztálya van - Azt is láthatja, hogy az előnézeti képek átfedik egymást, ahogy a képernyő szélessége csökken. Az a helyzet, hogy még mindig „nem reagálnak”, de ennek a résznek a következő cikkeiben azzá tesszük. Továbbá folytatjuk a Bootstrap 3 rácsrendszerrel végzett munka elemzését, megtanuljuk, hogyan tervezzünk gombokat, táblázatokat, HTML-űrlapokat, készítsünk legördülő menüket, navigáljunk és még sok mást. Ezért ne váltson, és figyeljen az új kiadványokra. Folytatás >>> (A hírlevélre feliratkozhatsz, hogy ne maradj le) És itt a folytatás: (de akkor is iratkozz fel - lesz még sok érdekes és hasznos dolog).
. Azok. helyezze ezt a címkét közvetlenül a nyitó Body címke mögé, és zárja be, mielőtt meghívná azokat a szkripteket, amelyek közvetlenül a záró Body címke előtt találhatók. Ezt követően a szöveg már nem támaszkodik a böngészőablakra.
