Johdanto Bootstrap 4 -huijausarkkiin
Bootstrap 4 -huijausarkki on sisällyttänyt Bootstrap 3: n merkittävän peruskorjauksen. Suurimpaan osaan komponenteista, jotka sisältävät taulukot, lomakkeet, pudotusvalot, ruudukot, navigointipalkit jne., On tapahtunut paljon muutoksia. Suurimmat hyödyt Bootstrap-kehyksen kaltaisista kehyksistä ovat, että ne voivat nopeuttaa kehitysajat, vaikka sovelluksen laatu ja johdonmukaisuus säilyisivät koko sivustolla. Bootstrap 4 -huijauskortti toimii kaikissa nykyaikaisissa selaimissa Internet Explorer 9: n yläpuolella.
Bootstrap 4
Bootstrap 4 on bootstrapin uusin ja edistynein versio. Se on suosituin kehys HTML-, CSS- ja JavaScript-sovelluksille, joita käytetään reagoivien ja mobiililaitteisiin perustuvien sovellusten kehittämiseen. Bootstrap 4, kuten aiemmat versiot, on ilmainen ja avoimen lähdekoodin. Meidän ei enää tarvitse kirjoittaa ja suunnitella kaikkea alusta alkaen nollasta eri laitekokonaisuuksiin. Ja meidän ei myöskään tarvitse vyötärö useita tunteja yrittää korjata kaikkea ja varmistaa, että se näyttää ja toimii oikein kaikilla selaimilla, ainutlaatuisilla alustoilla ja laitteilla.
Komennot ja kuvaus Bootstrap 4 Cheatsheet -lehdessä
Joitakin tärkeitä Bootstrap 4 -komentoja ja niiden kuvaus on alla:
| komennot | Kuvaus |
| Kiinteä säiliö | Kiinteällä astialla on kiinteä leveys. Kun selaimen kokoa muutetaan, sen leveys pysyy samana, kunnes murtopiste löytyy. |
| Nestesäiliö | Nestesäiliö ulottuu käytettävissä olevan näkymäkentän koko leveydelle. Se laajenee ja supistuu juoksevasti tarkoittaen, että se muuttuu selaimen koon muuttuessa. |
| .Col- | Se on tarkoitettu pienille laitteille - näytön leveys on alle 576 kuvapistettä |
| .Col-SM- | Se on tarkoitettu pienille laitteille - näytön leveys on vähintään 576 kuvapistettä |
| .Col-MD | Se on tarkoitettu keskikokoisille laitteille - näytön leveys pysyy vähintään 768 kuvapisteessä |
| .Col-Lg- | Se on tarkoitettu suurille laitteille - näytön leveys on vähintään 992 kuvapistettä |
| .Col-XL | Se on tarkoitettu suurille laitteille - näytön leveys on vähintään 1200 kuvapistettä |
- | h1 Bootstrap-koon otsikko, 2.5rem = 40px h2 Bootstrap-koon otsikko, 2rem = 32px h3 Bootstrap-koon otsikko, 1, 75rem = 28px h4 Bootstrap-koon otsikko, 1, 5rem = 24px h5 Bootstrap-koon otsikko, 1, 25rem = 20px h6 Bootstrap-koon otsikko, 1rem = 16px |
| Tämä HTML-tunniste-elementti tarjoaa keltaisen taustavärin hieman täyteaineella | |
| Tämä HTML-tunniste-elementti tarjoaa pistetyn reunan alaosan. | |
|
| Lisää luokka
käytetään ulkopuolisten lähteiden sisältölohkojen lainaamiseen. |
| .font-paino-lihavoitu | Lihavoitu teksti |
| .font-kursivoitu | Kursivoitu teksti |
| .font-paino-valo | Kevyt teksti |
| .font-paino-normaali | Normaali teksti |
| .johtaa | Se erottaa kappaleen näkyvästi |
| .pieni | Se osoittaa pienemmän tekstin, ts. Se pienentää kirjasinkokoa 85%: iin sen vanhemman koosta. |
| .text-vasen | Se osoittaa, että teksti on kohdistettava vasemmalle. |
| .text - * - vasen | Se osoittaa, että teksti on kohdistettu vasemmalle kaikenkokoisille näytöille |
| .text-keskus | Se osoittaa keskitettyyn tekstiin |
| .text - * - keskusta | Se osoittaa keskikohtaisella tekstillä kaikenkokoisissa näytöissä |
| .text oikeassa | Se osoittaa oikealle kohdistetulle tekstille |
| .text - * - oikea | Se osoittaa oikealle kohdistetun tekstin kaikissa näyttöruuduissa |
| .text Tasaus | Se osoittaa perustellun tekstin |
| .text-monospace | Siinä on yksiosainen teksti |
| .text-NoWrap | Se osoittaa, ettei tekstiä ole kääritty |
| .text-pieniä | Se osoittaa pienillä kirjaimilla varustetun tekstin |
| .text-isoiksi | Se osoittaa isoilla kirjaimilla varustetun tekstin |
| .text pääomarakennetta | Se osoittaa isoilla kirjaimilla varustetun tekstin |
| .initialism | Se näyttää HTML-tunniste-elementin sisällä olevan tekstin pienemmässä fontissa. Se poistaa käytettävissä oletusluettelotyylin ja vasemman reunan luettelokohteiden sisäkkäisissä luetteloissa |
| .pöytä | Luokka lisää perustyylin pöydälle. |
| .table-raidallinen | Luokka lisää seepraraitaa pöydälle. |
| .table-rajautuu | Luokka lisää reunat pöydän ja solujen molemmille puolille. |
| .table-Hover | Luokka lisää hover-tehosteen, eli harmaa taustaväri käytettävissä oleviin taulukkoriviin. |
| .table tumma | Luokka lisää mustan taustan taulukkoon. |
Ilmaisia vinkkejä ja temppuja Bootstrap 4: n huijauskoodin käytöstä: -
Tässä osassa mainitaan joitain hienoja vinkkejä bootstrap 4-huijauskoodin ominaisuuksien nopeasti hakkerointiin ja loistavan sovelluksen luomiseen mobiililaitteille: -
- Käytössä. col- (breakpoint) -push- (numero) tai käytettäessä. col- (breakpoint) -pull- (number) -luokat sarakkeisiin, määritettyjen sarakkeiden järjestystä voidaan muuttaa.
- Elementin piilottamiseksi nopeasti ja helposti vain xs-laitteilta, on. piilotettu-xs-luokka, sitä voidaan käyttää piilottamiseen.
- . piilotettua (breakpoint) luokkaa voidaan käyttää myös muihin raja-arvopisteisiin, ja kun ne yhdistetään, piilotettu laajuus, kuten edellä mainittiin, voidaan saavuttaa. Esimerkki: - luokat. Piilotettu-LG, . Piilotettu-MD, . Piilotettu-sm.
- Bootstrap sisältää 5 käytettävissä olevaa oletusnäppäintyyliä, jotka ovat oletus, ensisijainen, menestys ja vaara. Kun nappia on vaihdettava, jotta sen reunuksen säde tai pehmuste voidaan vähentää, paras tapa saavuttaa tämä on korvata .btn
- Radioiden ja valintaruutujen poistamiseksi käytöstä on lisättävä käytöstä poistettu luokka vanhemmalle .checkbox tai.radio-elementille. Lisää sitten poistettu ominaisuus tiettyyn tuloon
- Jos haluat poistaa painikkeet käytöstä, lisää käytöstä poistettu ominaisuus HTML-tunnistepainikkeisiin
Tai sama voidaan tehdä lisäämällä .disabled-luokka painikkeisiin.
- Jotta lohkoelementti voidaan keskittää helposti vaakasuoraan, keskilohkon luokan lisääminen siihen on tehtävä, kuten kohdassa.
- Jos halutaan saavuttaa nopeasti keskipitkän sisällön sisältö tai jos halutaan tehdä rivin sisäisiä lohkoelementtejä, lisää .text-keskiluokka sen yläelementtiin.
- YouTube-videoita voi myös upottaa helposti käyttämällä Bootstrapin upotukseen reagoivaa luokkaa, joka on auttajaluokka. upota-reagoiva-16by9 tai upotettava-reagoiva-4by3-luokka on valittava videon kuvasuhteen perusteella
Bootstrap 4 Cheat sheet - johtopäätös
Bootstrap 4 -huijausarkin yläpuolella on välitys siitä, mitä bootstrap 4 -sovelluksella on mahdollista. Mutta saatavilla on kattavampi opas, joka sisältää tuhansia muita parametreja ja tunnisteita. On selvää, että kaikkia koskevia tietoja ei voida antaa yhdessä artikkelissa. Kehittäjän on myös muistettava kaikki tunnisteet ja luokat kehityksen suorittamiseksi. Paras ja suositeltavain tapa on pitää tällaiset huijauskoodit kätevinä, ja käyttäjän tulisi viitata sellaisiin arkkeihin aina, kun ilmenee tarve. Tällä varmistetaan, että kaikki työ tehdään tarvittavana ajankohtana, ja parannetaan käyttäjän ymmärrystä ja tuntemusta bootstrap 4: stä tietyn ajanjakson ajan.
Suositeltava artikkeli
Tämä on opas Bootstrap 4 -huijausarkkiin, tässä olemme keskustelleet Bootstrap 4 -huijauskoodin sisällöstä ja komennosta sekä ilmaisista vinkistä ja temppuja. Voit myös tarkastella seuraavaa artikkelia saadaksesi lisätietoja -
- Cheat Sheet CSS
- Bootstrap vs Jquery -erot
- Yksinkertainen ja hyödyllinen opas petämään SQL-arkki
- Lopullinen huijari arkki C ++ -ohjelmointikielelle (perusteet)