Bootstrap 4 Cheatsheet sissejuhatus
Bootstrap 4 peitlehel on sisse viidud Bootstrap 3 kapitaalremont. Paljude komponentidega, mis sisaldavad tabeleid, vorme, rippmenüüsid, ruute, navigatsiooniribasid jne, on tehtud palju muudatusi. Bootstrap-i nagu näiteks Bootstrap raamistike peamised eelised on nende kiirendamine. arendusajad isegi siis, kui säilitate rakenduse kvaliteedi ja järjepidevuse kogu saidil. Bootstrap 4 petmisleht töötab kõigil kaasaegsetel brauseritel, mis asuvad Internet Explorer 9 kohal.
Bootstrap 4
Bootstrap 4 on alglaadimiste uusim ja täiustatud versioon. See on kõige populaarsem HTML-, CSS- ja JavaScripti raamistik, mida kasutatakse tundlike ja mobiilipõhiste rakenduste väljatöötamiseks. Bootstrap 4, nagu ka varasemad versioonid, on tasuta ja avatud lähtekoodiga. Me ei pea enam erinevate seadmekomplektide jaoks kõike alates nullpunktist ümber kirjutama ja ümber kujundama. Ja lisaks ei pea me mitu tundi vöökohta püüdma kõike parandada ja tagades, et see näeb välja ja töötab õigesti erinevates brauserites, unikaalsetes platvormides ja seadmetes.
Käsud ja kirjeldus Bootstrap 4 Cheatsheet-il
Mõned olulised Bootstrap 4 käsud ja nende kirjeldus on toodud allpool: -
| Käsud | Kirjeldus |
| Fikseeritud konteiner | Fikseeritud konteineril on kindel laius. Brauseri suuruse muutmisel jääb selle laius samaks, kuni leitakse murdepunkt. |
| Vedelikumahuti | Vedelikuanum ulatub saadaoleva vaateakna kogu laiuseni. See laieneb ja kahaneb sujuvalt, see tähendab brauseri suuruse muutudes. |
| .Col- | See on mõeldud eriti väikestele seadmetele - ekraani laius on alla 576 piksli |
| .Col-sm- | See on mõeldud väikestele seadmetele - ekraani laius jääb 576 piksli suuruseks või suuremaks |
| .Col-md- | See on mõeldud keskmistele seadmetele - ekraani laius jääb 768 piksli suuruseks või suuremaks |
| .Col-lg- | See on mõeldud suurte seadmete jaoks - ekraani laius on vähemalt 992 pikslit |
| .Col-xl- | See on mõeldud suuremate seadmete jaoks - ekraani laius on vähemalt 1200 pikslit |
- | h1 Bootstrap-i suurus pealkirjaga 2, 5rem = 40px h2 alglaadimisriba suund 2rem = 32 pikslit h3 alglaadimissuurus pealkirjaga 1, 75rem = 28 pikslit h4 Bootstrap-i suund 1, 5rem = 24px h5 Bootstrap-i suurus pealkirjaga 1, 25rem = 20 pikslit h6 Bootstrap-i suurus pealkirjaga 1rem = 16 pikslit |
| See HTML-sildielement annab kollase taustavärvi koos mõne polstriga | |
| See HTML-sildielement pakub punktiirjoonega põhja. | |
|
| Lisage klass koos
kasutatakse allikast pärit sisuplokkide tsiteerimiseks väljastpoolt. |
| .font-kaal-paks | Rasvases kirjas |
| .font-kaldkiri | Kaldkirjas teksti jaoks |
| .font-kaal-kerge | Kerge teksti jaoks |
| .font-kaal-normaalne | Tavalise teksti jaoks |
| .juhtima | See eristab lõigu nähtavalt |
| .väike | See tähistab väiksemat teksti, st vähendab fondi suurust 85% -ni tema vanema suurusest. |
| .tekst-vasak | See näitab, et tekst tuleb joondada vasakule. |
| .tekst - * - vasak | See näitab, et tekst on kõigi suurusekraanide jaoks vasakule joondatud |
| .tekstikeskus | See tähistab keskel joondatud teksti jaoks |
| .text - * - kese | See näitab keskele joondatud teksti kõigi suurustega ekraanidel |
| .tekst-paremal | See tähistab paremale joondatud teksti puhul |
| .tekst - * - õige | See näitab paremal joondatud teksti kõigi suurustega ekraanidel |
| .tekst-õigusta | See näitab õigustatud teksti |
| .tekst-monospace | Sellel on monospaced text |
| .tekst-nüüd | See tähistab mähisteksti puudumist |
| .text väiketähed | See tähistab väiketähtedega teksti |
| .tekst-suurtäht | See tähistab suurtähtedega teksti |
| .tekst suurtähtedega | See tähistab suurtähtedega teksti |
| .inialialism | See kuvab HTML-märgendielemendis oleva teksti väiksema suurusega kirjas. See eemaldab pesastatud loendites saadaolevad vaikeloendi stiili ja vasaku veerise |
| .tabel | Klass lisab lauale põhilise stiili. |
| . laud-triibuline | Klass lisab lauale sebratriibud. |
| .tahvlitega ääristatud | Klass lisab äärised laua ja lahtrite kõikidele külgedele. |
| .table-hover | Klass lisab hõljumiefekti, st saadaolevatele tabeliridadele halli taustavärvi. |
| .laud-pime | Klass lisab lauale musta tausta. |
Tasuta näpunäited ja näpunäited Bootstrap 4 kasutamise kohta: Cheat sheet: -
Selles jaos on ära toodud mõned lahedad näpunäited, mille abil saab kiiresti alglaadimise 4 petulehe funktsioone häkkida ja luua mobiilis suurepärase rakenduse: -
- Kasutamisega. col- (murdepunkt) -push- (arv) või kasutamisel. col- (breakpoint) -pull- (number) klassid veergudele, saab määratud veergude järjestust muuta.
- Elemendi kiireks ja hõlpsaks peitmiseks ainult xs-seadmetes on olemas. hidden-xs klass, seda saab kasutada peitmiseks.
- . varjatud (murdepunkti) klassi saab kasutada ka ülejäänud murdepunktide jaoks ja kui neid kombineerida, siis on võimalik saavutada ülalpool mainitud varjatud ulatus. Nt: - klassid .peidetud-LG, .peidetud-MD, .peidetud-sm.
- Bootstrapil on 5 saadavalolevat vaikenupu nuppu, mis on vaikimisi, primaarne, edu ja oht. Kui nuppu tuleb muuta, et selle raadiust või polsterdust vähendada, on parim viis selle saavutamiseks üle kirjutada .btn
- Raadiojaamade ja märkeruutude keelamiseks tuleb lisada puudega klass vanemale .checkbox või element.radio. seejärel lisage konkreetsele sisendile keelatud atribuut
- Nuppude keelamiseks lisage HTML-i sildinuppudele keelatud atribuut
Või sama saab teha nuppudele .disabled klasside lisamisega.
- Plokielemendi hõlpsaks horisontaalseks tsentreerimiseks tuleb keskjoonelise klassi lisamine teha, nagu allpool.
- Kui soovite kiiresti saavutada sisemise tsentraalse sisu või teha div-siseseid blokeerivaid elemente, lisage selle lähteelemendile .text-center klass.
- YouTube'i videoid saab hõlpsalt manustada ka Bootstrapi manustamispõhise klassi abil, mis on abistaja. embed-responsive-16by9 või embed-responsive-4by3 class tuleb valida video kuvasuhte põhjal
Bootstrap 4 - petuleht - järeldus
Bootstrap 4 kohal asub petlik leht, mis annab ülevaate sellest, mis on bootstrap 4 abil võimalik. Kuid saadaval on põhjalikum juhend koos tuhandete muude parameetrite ja siltidega. On ilmne, et teavet kõigi kohta ei saa esitada ühes artiklis, samuti peab arendaja arendamise jaoks meeles pidama kõiki silte ja klasse. Parim ja kõige soovitatavam lähenemisviis on hoida sellised petulehed käepärast ja kasutaja peaks sellistele lehtedele viitama alati, kui tekib vajadus. See tagab, et kogu töö on tehtud vajalikul ajal, ning parandab kasutaja teatud aja jooksul arusaamist ja teadmisi alglaadimisest 4.
Soovitatav artikkel
See on olnud juhend Bootstrap 4 Cheat sheeti jaoks. Siin oleme arutanud Bootstrap 4 Cheat lehe sisu ja käske ning tasuta näpunäiteid ja näpunäiteid. Lisateabe saamiseks võite vaadata ka järgmist artiklit -
- CSS-i petuleht
- Bootstrap vs Jquery erinevused
- Lehe SQL petmise lihtne ja kasulik juhend
- C ++ programmeerimiskeele ülim petmise leht (põhitõed)