A Bootstrap 4 rácsrendszer az érzékeny elrendezésekhez használható.
A reszponzív elrendezés azt jelzi, hogy az elemek milyen módon illeszkednek az oldalhoz a különböző felbontásokhoz. Fontos, hogy megismerje a rács használatát, mielőtt bármilyen más Bootstrap 4 komponenst megismerne, mert bármilyen elemet használ, azt valahol a képernyőn kell elhelyeznie.
Kezdjük el!
Tartalomjegyzék
- Bootstrap 4 konténerek
- Bootstrap 4 sor
- Bootstrap 4 oszlop
- További irodalom
A Bootstrap 4 rács konténerekből, sorokból és oszlopokból áll. Egyenként vesszük őket, és elmagyarázzuk őket.
Bootstrap 4 konténerek
A Bootstrap 4 tároló az osztály egyik eleme .container. A tároló a Bootstrap 4 rácsrendszer gyökere, és az elrendezés szélességének szabályozására szolgál.
A Bootstrap 4 konténer egy oldal összes elemét tartalmazza. Ez azt jelenti, hogy az oldalának a következő felépítésűnek kell lennie: először a HTML-oldal törzse, annak belsejében adja hozzá a tárolót és az összes többi elemet a tárolóban.
... Az egyszerű .containerosztály a képernyő szélességétől függően állítja be az elrendezés szélességét. A tartalmat az oldal közepére helyezi, vízszintesen igazítva. A Bootstrap 4 tároló és az oldal bal és jobb oldala között egyenlő távolság van.
A .containerméret a szélességre csökken, amint a képernyő szélessége szűkül és teljes szélességűvé válik a mobilon. A tároló szélessége a Bootstrap 4 könyvtárban van megadva minden képernyőmérethez. A pontos méreteket itt tekintheti meg.
A teljes szélességű tároló a képernyő méretének 100% -át foglalja el, a képernyő szélességétől függetlenül. A használatához hozzá kell adni az osztályt. container-fluid.
Hello! I am in a simple container. Hello! I am in a full-width container. A CodePen itt tekinthető meg.
A két tartálytípus közötti különbségek megtekintéséhez nyissa meg a tollat a konzolján, és váltson a képernyőméretek között.
Bootstrap 4 sor
A Bootstrap 4 sor a képernyő vízszintes szelete. Csak oszlopok burkolóiként használják. Használatukhoz szükség van az .rowosztályra.
... Itt vannak a legfontosabb dolgok, amelyeket emlékeznie kell a Bootstrap 4 sorokkal kapcsolatban:
- Csak oszlopok tárolására szolgálnak. Ha más elemeket helyez el a sorban oszlopokkal együtt, akkor nem éri el a várt eredményt.
- Tartályokban kell elhelyezni őket. Ha ezt nem teszi meg, akkor vízszintes görgetést kap az oldalán. Ez azért történik, mert a sorok negatív bal és jobb margója 15-ös. A tároló 15 képpontos párnákkal rendelkezik, így ellensúlyozza a margókat.
- Az oszlopoknak a sor gyermekeinek kell lenniük. Ellenkező esetben nem fognak igazodni. A sorok és oszlopok úgy vannak létrehozva, hogy együtt működjenek ebben a szigorú hierarchiában.
Bootstrap 4 oszlop
Most eljuthatunk a bemutató szép részéhez, a Bootstrap 4 oszlopokhoz. Oszlopok remekek! Segítenek a képernyő vízszintes felosztásában.
Ha egyetlen oszlopot helyez el a sorában, az teljes szélességet elfoglal. Ha két oszlopot ad hozzá, akkor mindegyik 1/2-et fog venni a szélességtől. És így tetszőleges számú oszlopra vonatkozik.
... ... ... ... ... ... ... ... A kódot élőben láthatja a CodePen-en.
Mellékjegyzet: Az oszlopok nem színesek. Csak egy színt adtam hozzá egy vizuális szempontból meggyőzőbb leíráshoz / így szépek.
Oszlopok méretének beállítása
Az .colosztály használata dinamikusan állítja be az oszlop szélességét. Ez azt jelenti, hogy egy sor oszlopainak számától függően az oszlop szélessége a tároló szélessége lesz osztva az oszlopok számával.
De van egy másik módja is az oszlopok meghatározásának. Osztályokat használhat az oszlopokhoz, és meghatározhatja azok méretét.
Alapértelmezés szerint a Bootstrap 4 rács 12 oszlopból áll. Oszlopának tetszőleges méretet választhat 1 és 12 között. Ha 3 egyenlő oszlopot szeretne, akkor mindegyiket használhatja .col-4(mert mindegyik 3 * 4 oszlop = 12). Vagy beállíthat nekik különböző méreteket. Íme néhány példa:
... ... ... ... ... ... ... ... A kódot élőben láthatja a CodePen-en.
Ha a sorban lévő oszlopok összege nem éri el a 12 értéket, akkor nem töltik ki az egész sort. Ha az oszlopok összege meghaladja a 12-et, akkor a következő sorra lép. Az első sor csak azokat az első elemeket jeleníti meg, amelyek legfeljebb 12-et adhatnak.
Töréspontok beállítása oszlopokhoz
Ha a fenti példát veszi, és mobilon szeretné megjeleníteni, akkor problémákba ütközhet. Öt oszlop megjelenítése mobilon a tartalmat olvashatatlanná teszi.
Itt jelenik meg a Bootstrap 4 egyik legerősebb alkatrésze. Annak érdekében, hogy különböző elrendezések legyenek a különböző képernyőkön, nem kell média lekérdezéseket írni, ehelyett az oszlop töréspontjait használhatja.
A töréspont egy Bootstrap 4 változó, amely a képernyő felbontását jelenti. Amikor megad egy töréspontot egy osztályhoz, azt mondja az osztálynak, hogy csak olyan felbontások esetén legyen aktív, amelyek legalább akkoraak, mint a töréspont számai.
A legegyszerűbb osztály, amelyről megismerkedünk, az az .col-[breakpoint]osztály. Ennek az osztálynak a használatakor csak akkor határozza meg az oszlopok viselkedését, ha azok olyan eszközökön jelennek meg, amelyek felbontása legalább a meghatározott töréspont. A megadott töréspontig az oszlopok alapértelmezés szerint függőlegesen igazodnak. A töréspontod után pedig vízszintesen igazodnak az osztály miatt.
A Bootstrap 4 törésponttal rendelkezik, amelyeket használhat:
.col-smnagyobb mobiltelefonokhoz (≥ 576px felbontású eszközök);.col-mdtabletták esetében (≥768px);.col-lglaptopoknál (≥992px);.col-xlasztali számítógépekhez (≥1200px)
Tegyük fel, hogy két oszlopot szeretne egymás után függőlegesen megjeleníteni a kis képernyőkön és ugyanazon a vonalon a nagyobb képernyőkön. Meg kell adnia azt a töréspontot, ahol az oszlopok ugyanazon a vonalon mennek.
Példánkban a .col-lgtöréspontot fogjuk használni, és megnézzük, hogyan néznek ki az oszlopok a különböző képernyőkön. A megadott töréspontnál (<992px) alacsonyabb felbontások esetén az oszlopok függőlegesen jelennek meg. Ez azt jelenti, hogy mobileszközökön és táblagépeken az oszlopok így fognak kinézni:
És azoknál az eszközöknél, amelyek felbontása nagyobb vagy egyenlő a törésponttal (≥992px), az oszlopok ugyanarra a sorra kerülnek. Ez azt jelenti, hogy laptopokon és asztali számítógépeken ezt az eredményt kapja:
... ... A kódot élőben láthatja a CodePen-en.Ha megnyitja a Codepent egy másik ablakban, és az oldalt különböző felbontásban látja, akkor az oszlopok megváltoztatják a helyzetüket.
Ha azt szeretné, hogy a 2 oszlop ugyanazon a vonalon haladjon a használt mobiltelefonoktól kezdve, .col-smtáblagépekhez .col-mdés extra nagy képernyőkhöz .col-xl.
Az oszlopok méretének és töréspontjának beállítása
Kombinálhatja a méreteket és a töréspontokat, és egyetlen osztályt használhat a formátummal .col-[breakpoint]-[size].
Például, ha azt szeretné, hogy három különböző méretű oszlop igazodjon egy sorhoz a laptop felbontásával kezdődően, akkor ezt kell tennie:
... ... ... Ezt az eredményt <992px felbontásnál fogja megkapni:
≥992px méretű képernyők esetén:
Ismét láthatja a kódot élőben a CodePen-en.
De mi van akkor, ha soronként egy oszlopot szeretne megjeleníteni kis mobilfelbontás esetén, soronként két oszlopot táblagépeken, négyet pedig laptopon vagy nagyobb felbontású eszközön?
Ezután hozzáad egy osztályhoz több osztályt, hogy leírja az egyes felbontások viselkedését. Több osztály használatával megadhatja, hogy a tartalom táblagépeken hat, a laptopokon pedig három helyet foglaljon el.
... ... ... ... Az eredmény így fog megjelenni a táblagépeken:
És így a laptopokon és nagyobb felbontásokon:
Ez a példa a CodePen-en is él.
Gyakorlatként kipróbálhatja a képernyőmérettől függően különböző számú oszlopok létrehozását, és ellenőrizheti a böngésző konzol viselkedését.
Oszlopok beszámítása
Ha nem szeretné, hogy oszlopai egymás mellett legyenek, használhatja az osztályt .offset-[breakpoint]-[size]a .col-[breakpoint]-[size].
Az osztály használata megegyezik egy üres oszlop hozzáadásával az oszlop elé. Itt van egy egyszerű példa:
... ... A kódot élőben láthatja a CodePen-en.
Az osztályt a sor bármely oszlopában használhatja. Íme néhány további példa:
... ... ... ... ... Fészkelő oszlopok
Ez meglepetés lehet, de felvehet egy sort az oszlop belsejébe!
A kérdéses sort (amelynek szülőoszlopának szélessége megegyezik) ezután 12 (kisebb) oszlopra osztják fel, amelyekre az .col-* osztályokon keresztül hivatkozhat .
Vessünk egy pillantást arra, hogy mi történik, amikor új sort illesztünk egy oszlopba:
... ... ... ... A kódot élőben láthatja a CodePen-en.
Ennek ismeretében számos szinten elmélyülhet az információk rendezése. Az oszlopok egyszerű módot kínálnak a terület kezelésére.
Ez összegyűjti az alapvető ismereteket a Bootstrap 4 adaptív rácsrendszerről. Ha kérdése van, kérem, tudassa velem a megjegyzéseket, szívesen válaszolok.
További irodalom
Ha több ideje van, íme néhány hasznos forrás:
- A GetBootstrap hivatalos rácsdokumentációja
- Videó bemutató a Scrimba-tól
Ezt a cikket eredetileg a BootstrapBay blogon tették közzé. Ez része a Bootstrap 4 oktatóprogramok nagyobb sorozatának, a 14 napos Bootstrap 4 elnevezésű programnak. Ha tovább akarja ismerni a Bootstrap 4 összetevőit, ezek a cikkek jó kiindulópontok.
És ha meg akarja kezdeni a fejlesztését egy Bootstrap sablonnal, akkor nézze meg a piactérünket.
De mielőtt elmélyülne, szánjon egy percet arra, hogy megünnepelje újonnan megszerzett készségeit !?
