Bevezetés a Bootstrap 4 Cheatsheetbe
A Bootstrap 4 cheat sheet beépítette a Bootstrap 3 alapvető átalakítását. Sok változás történt a legtöbb olyan elemnél, amely táblázatokat, űrlapokat, legördülő sablonokat, rácsokat, navigációs sávokat stb. Tartalmaz. A Bootstrap keretekhez hasonló keretek fő előnye, hogy felgyorsítják. fejlesztési idők akkor is, ha az alkalmazás minőségét és konzisztenciáját fenntartjuk a webhelyen. A Bootstrap 4 cheat sheet minden, az Internet Explorer 9 feletti böngészőben működik.
Bootstrap 4
A Bootstrap 4 a bootstrap legújabb és legfejlettebb verziója. Ez a HTML, CSS és JavaScript legnépszerűbb keretrendszere, amely érzékeny és mobil alapú alkalmazások fejlesztésére szolgál. A Bootstrap 4, mint a korábbi verziók, ingyenes és nyílt forrású. Többé nem kell mindent újraírni és újratervezni a nulla földtől kezdve a különböző eszközkészletekhez. És azt is nem kell, hogy több órán át derékig próbáljunk mindent megjavítani, és gondoskodjunk arról, hogy a megjelenés megfelelő legyen és működjön a különböző böngészőkben, egyedi platformokon és eszközökön.
Parancsok és leírás a Bootstrap 4 Cheatsheet oldalon
Néhány fontos Bootstrap 4 parancs és leírása az alábbiakban található: -
| parancsok | Leírás |
| Rögzített tartály | A rögzített tartálynak rögzített szélessége van. A böngésző átméretezésével szélessége változatlan marad, amíg meg nem találja a töréspontot. |
| Folyadéktartály | A folyadéktartály a rendelkezésre álló nézetablak teljes szélességére nyúlik. Fokozatosan bővül és összehúzódik, azaz a böngésző átméretezésével változik. |
| .Col- | Különösen kicsi eszközökhöz készült - a képernyő szélessége kevesebb, mint 576 képpont |
| .Col-Sm | Kis eszközök számára - a képernyő szélessége legalább 576 képpont marad |
| .Col-MD- | Közepes eszközökhöz - a képernyő szélessége legalább 768 képpont marad |
| .Col-LG- | Nagy készülékek esetén - a képernyő szélessége legalább 992px |
| .Col-XL | Xlarge készülékekhez - a képernyő szélessége legalább 1200 képpont |
- | h1 Bootstrap méretű irány 2.5rem-rel = 40px h2 Bootstrap méretű irány, 2rem = 32 képpont h3 Bootstrap méretű irány, 1, 75rem = 28px h4 Bootstrap méretű irány, 1, 5rem = 24 képpont h5 Bootstrap méretű irány 1, 25rem = 20 képpont értékkel h6 Bootstrap méretű fejléc, 1rem = 16 képpont |
| Ez a HTML tag elem sárga háttérszínt biztosít némi párnázattal | |
| Ez a HTML tag elem pontozott szegély alját biztosít. | |
|
| Az add osztály az
a forrásból származó, kívülről érkező tartalomblokkok idézésére szolgál. |
| .font-tömeg-Bold | Félkövér szöveghez |
| .font-dőlt | Dőlt szöveghez |
| .font-tömeg-fény | Könnyű szöveghez |
| .font-tömeg-normális | Normál szöveghez |
| .vezet | Ez egy bekezdést láthatóan kiemelkedik |
| .kicsi | Kisebb szöveget jelöl, azaz csökkenti a betűméretet a szülő méretének 85% -ára. |
| .text bal | Azt jelzi, hogy a szöveg balra igazítva van. |
| .text - * - bal | Azt jelzi, hogy a szöveg balra igazítva van minden méretű képernyőn |
| .text-központ | Középre igazított szöveget jelöl |
| .text - * - központ | Középre igazított szöveget jelöl minden méretű képernyőn |
| .text jobb | Jelzi a jobbra igazított szövegnél |
| .text - * - jobb | Jobbra igazított szöveget jelöl minden méretű képernyőn |
| .text igazítja | Az indokolt szöveget jelöli |
| .text-monospace | Monospaced szöveggel rendelkezik |
| .text-nowrap | Jelzi, hogy nincs-e beillesztés |
| .text-kisbetű | Jelzi az alacsonybetűs szöveget |
| .text-nagybetű | A nagybetűs szöveget jelöli |
| .text-tőkét | A nagybetűs szöveget jelöli |
| .initialism | Megjeleníti a HTML címke elem belsejében lévő szöveget egy kisebb méretű betűkészletben. Eltávolítja az elérhető alapértelmezett listastílust és a bal oldali margót a beágyazott listák listáján |
| .asztal | Az osztály hozzáteszi az alapvető stílusokat az asztalhoz. |
| .table csíkos | Az osztály zebra-csíkokat ad az asztalhoz. |
| .table szegélyezett | Az osztály szegélyeket fűz az asztal és a cellák minden oldalához. |
| .table-hover | Az osztály hover effektust ad, azaz a szürke háttér színét a rendelkezésre álló asztalsorokhoz. |
| .table sötét | Az osztály hozzáad egy fekete hátteret az asztalhoz. |
Ingyenes tippek és trükkök a Bootstrap 4 használatához Cheat sheet: -
Ebben a szakaszban említésre méltó néhány tippet és trükköt tartalmaz a bootstrap 4 cheat lap tulajdonságainak gyors feltörésére és egy csodálatos alkalmazás létrehozására mobilon: -
- Használatával. col- (breakpoint) -push- (szám) vagy használatakor. col- (breakpoint) -pull- (number) osztályok az oszlopokhoz, a megadott oszlopok sorrendje megváltoztatható.
- Az elem gyors és egyszerű elrejtéséhez csak az xs eszközökön, van egy. rejtett-xs osztály, ez elrejtésre használható.
- . A rejtett (töréspont) osztály használható a többi törésponthoz is, és kombinálva a fent említett rejtett hatókört is elérhetjük. Pl .: - .hidden-LG, .hidden-MD, .hidden-sm.
- A Bootstrap 5 alapértelmezés szerint rendelkezésre álló gombstílusgal rendelkezik, ezek az alapértelmezett, az elsődleges, a siker és a veszély. Ha egy gombot meg kell változtatni a szélének sugara vagy a párnázat csökkentése érdekében, akkor a legjobb módja ennek a .btn felülírása.
- A rádiók és a jelölőnégyzetek letiltásához hozzá kell adni a letiltott osztályt a szülő .checkbox vagy a.radio elemhez. majd adjon hozzá letiltott attribútumot az adott bemenethez
- A gombok letiltásához adjon hozzá letiltott attribútumot a HTML címkegombokhoz
Vagy ugyanezt meg lehet tenni a .disabled osztály hozzáadása a gombokhoz.
- A blokk elem vízszintes központosítása érdekében egy középső blokk osztályt kell hozzátenni, mint az.
- Ha gyorsan el akarjuk érni a középső inline tartalmat, vagy ha a div-ban belül inline-block elemeket kell készíteni, akkor adjunk hozzá .text-center osztályt a szülő elemhez.
- A YouTube-videók könnyen beágyazhatók a Bootstrap beágyazásra reagáló osztályával, amely segítő, osztály. Az embed-responsive-16by9 vagy embed-responsive-4by3 osztályt a videó oldalaránya alapján kell megválasztani.
Bootstrap 4 Cheat sheet - következtetés
A bootstrap 4 felett található cheat sheet áttekintést nyújt arról, hogy mi lehetséges a bootstrap 4 segítségével. De van egy átfogóbb útmutató, amely több ezer más paraméterrel és címkével elérhető. Nyilvánvaló, hogy az összesre vonatkozó információkat nem lehet egyetlen cikkben szolgáltatni, vagy a fejlesztőnek meg kell emlékeznie az összes címkére és osztályra a fejlesztéshez. A legjobb és legelőnyösebb megközelítés az ilyen csaló lapok kéznél tartása, és a felhasználónak hivatkoznia kell ezekre a lapokra, amikor erre szükség van. Ez biztosítja, hogy minden munkát a szükséges időben elvégezzenek, és javítja a felhasználó megértését és ismereteit a bootstrap 4 rendszerről egy adott időszakon keresztül.
Ajánlott cikk
Ez egy útmutató a Bootstrap 4 Cheat laphoz, itt megvitattuk a Bootstrap 4 Cheat lap tartalmát és parancsát, valamint ingyenes tippeket és trükköket. További információt a következő cikkben is megnézhet -
- Csaló CSS
- Bootstrap vs Jquery különbségek
- Egyszerű és hasznos útmutató az SQL lapok megcsalására
- Végső cheat lap a C ++ programozási nyelvhez (alapok)