Bootstrap 3 - helper osztályok, ez a főnök
Ebben a leckében megismerkedünk a helper osztályokkal, a Twitter Bootstrap 3-mal.
Kontextusos színek (színek a szöveg kiemeléséhez)
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores más néven következõ aut fugit.
Sint et dolorum fuga üldözni akarja a vádat. Cum soluta nobis est és a dolorum fuga obcaecati cupiditate.
Delectus, utaut perferendis doloribus asperiores repellat. Excepturi sint, obcaecati cupiditate nem gondoskodó, hasonlító sunt.
Optio, cumque nihil impedit, quo mínusz. Similique sunt in culpa. Nam szabad tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro, quisquam est, omnis dolor repellendus quibusdam.
Repudiandae sint és aut fugit. Odit aut fugit, sed quia dolor sit, aspernatur aut rerum. Consectetur, adipisci velit, sed ut enim ipsam voluptatem, quia consequuntur magni.
Megjegyzés: Néha az akcentusosztályok nem változtathatják meg a szöveg színét, amely bizonyos elemekhez van zárva, mert ez befolyásolja más osztályok vagy szelektorok stílusainak ezen elemét. A legtöbb esetben, hogy megoldja ezt a problémát, egyszerűen tekerje ezt a szöveget a span elemhez, és hozzon hozzá egy ékezetosztályt hozzá.
Kontextus hátterek (a háttér beállításához szükséges színek)
A színes szöveg kiemelésére szolgáló osztályokon kívül a Twitter Bootstrap 3-ban számos osztály van kialakítva, hogy színes hátteret hozzon létre a blokk HTML elemek számára.
Különböző hátterű bekezdések:
Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores más néven következõ aut fugit.
Sint et dolorum fuga üldözni akarja a vádat. Cum soluta nobis est és a dolorum fuga obcaecati cupiditate.
Delectus, utaut perferendis doloribus asperiores repellat. Excepturi sint, obcaecati cupiditate nem gondoskodó, hasonlító sunt.
Optio, cumque nihil impedit, quo mínusz. Similique sunt in culpa. Nam szabad tempore, cum soluta.
Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro, quisquam est, omnis dolor repellendus quibusdam.
Megjegyzés: Előfordulhat, hogy az elemek háttérének megadására tervezett kontextuális osztályok nem változtathatnak színén, mivel más stílusok vagy szelektorkezelők stílusokat mutathatnak az elemen. A legtöbb esetben a probléma megoldásához elegendő a Div elemek tartalmának lezárása, és hozzáadni hozzá egy osztályt a háttérszín beállításához.
"Bezárás" ikon
A "Bezárás" ikon a modális ablakok (modálok) és az üzenetek (figyelmeztetések) bezárásához használható.
× Komponens riasztások (üzenet) az üzenet bezárásával
Carets ikon
A "Carets" ikon azt jelzi, hogy az elemnek van egy legördülő listája. Emellett ez az ikon azt is jelzi, hogy a lista mennyire csökken (felfelé vagy lefelé).
Lebegő elemek (float) gyors létrehozása
Ezeket az osztályokat úgy alakították ki, hogy olyan lebegő elemeket hozzanak létre, amelyek a lehető legjobban balra tolódnak (osztály: Húzza balra) vagy jobbra (.pull-jobb). Emellett a! Fontos szabály hozzáadódik ezekhez az osztályokhoz. ami növeli az úszó tulajdonság prioritását, és megakadályozza a Bootstrap osztályok lehetséges problémáit.
Megjegyzés: a .pull-left és a .pull-right osztályok nem használhatók elemek illesztésére a navbar összetevőben. Ha a navigációs menü egyes elemeit szeretné igazítani, használja a dedikált .navbar-bal és a .navbar-jobb segédprogramokat. Az ezekről az osztályokról bővebb információért lásd a navbar cikkét.
Tartalommal rendelkező központosító blokkok
A .center-block osztály a blokkelemek központosítására szolgál. Ie ha egy .center-blokk osztályt alkalmaz egy elemre. akkor ezt az elemet blokkolja (kijelzés: blokk), és vízszintesen középre helyezkedik középen (margin: 0 auto).
Osztály .clearfix
A .clerfix osztály úgy van megtervezve, hogy visszavonja egy elem áramlását, amelyhez más úszóblokkok adják hozzá.
Például fontolja meg a 4 blokkból álló elrendezés létrehozását, amelyek mindegyikének 6 oszlopot kell tartalmaznia a Twitter Bootstrap-ban. A 3-as és 4-es blokkokat egy új sorból kell elhelyezni.
A Bootstrap oszlopokból álló blokkok lebegnek, és a lehető legnagyobb mértékben balra mozognak. Az elrendezés létrehozása után a következő képet kapjuk:
Hogy gondoskodjon a blokkok szerint a feladat, meg kell 3. és 4. blokkja nem áramvonalas blokkok 1. és 2. Ezért kell, hogy gondoskodjon az üres blokk div class .clearfix blokkokhoz a 3. és 4. Ez a blokk üres osztály .clearfix tiltott blokkok után helyezkedik el, azaz. A 3. és 4. blokk áramlik körülötte.
Tartalom megjelenítése és elrejtése
Az elem megjelenítéséhez vagy eltűnéséhez használhatja a .show (display: block! Fontos) és a .hidden (megjelenítés: none! Fontos; láthatóság: rejtett! Fontos) osztályokat. Ezek az osztályok, valamint a .pull-left és a .pull-right osztályok tartalmazzák a! Fontos szabályt. amely az ilyen osztályok stílusainak elsőbbségét előidézi, mielőtt más osztályok vagy szelektorok stílusa helyettesítené ezeket a stílusokat. Ezek az osztályok csak a HTML elemek blokkolására alkalmazhatók.
Ezenkívül a Bootstrap egy másik .megoldható osztályban van. amely arra szolgál, hogy letiltja annak az elemnek a láthatóságát, amelyre alkalmazzák. De a fenti osztályoktól eltérően ez az osztály nem változtatja meg az elem megjelenítési tulajdonságát, ezért még mindig megtörténik, bár nem válik láthatóvá.
Webhely létrehozása olyan technológiák számára, amelyek képernyőolvasást végeznek
A Twitter Bootstrap 3 kifejlesztett egy speciális állapot (.sr-only), amellyel személyre szabhatja a webhely a segítő technológiák (olvasás hang, szöveg, kép, menük és más elemek a képernyőn).
A .sr csak osztály az elemek elrejtésére használható minden eszközön, kivéve a képernyőn olvasható technológiákat. A .sr csak osztály is kombinálható a .sr csak fókuszálható osztályával. ebben az esetben az elem, amelyre ezeket az osztályokat alkalmazzák, megjelenik a képernyőn, de csak a fókuszban lévő időpontban (például: billentyűzet használatával).
Bootstrap osztály a szöveg elrejtéséhez
A Twitteren a Bootstrap 3 kifejlesztett egy különleges osztályt .text-hide. amely az elemre alkalmazható annak elrejtéséhez. Például ezt használhatja a rejtett szöveg háttérbe helyezésével.