Bootstrap 4 New & Cool -ominaisuudet, joita rakastat

Bootstrap-kehyksen seuraava suuri julkaisu on nurkan takana. Alpha-versio voidaan ladata jo Bootstrapin kehitysivustolta, ja lähdekoodi on saatavilla myös Githubissa.

Twitter Bootstrap on tällä hetkellä suosituin frontend-kehys. Sen avulla kehittäjät voivat rakentaa nopeasti mobiili-ensimmäinen ja reagoiva verkkosivusto. Bootstrap mahdollistaa älykkään HTML5-, CSS3- ja Javascript-front-trion käytön. Sitä käytetään tällä hetkellä yli 6 miljoonalla verkkosivustolla.

Vaikka Bootstrap 4 on edelleen kehitysvaiheessa (joten älä käytä sitä vielä live-sivustossa), kehittäjät ovat tehneet upean työn. Tässä viestissä tarkastelemme uutta versiota, joka sisältää monia hienoja ominaisuuksia virtaviivaistaa ja parantaa frontend-kehitystyötä.

1. Sass LESSin sijaan

Tähän saakka Bootstrap on käyttänyt LESS: ia sen tärkeimpänä CSS-esikäsittelijänä, mutta uudessa suuressa julkaisussa tyylisäännöt palautetaan Sassille, joka on paljon suositumpi frontend-kehittäjien keskuudessa, sillä on valtava tukijakunta, yleensä helpompi käyttää ja tarjoaa enemmän mahdollisuuksia. Kiitos voimakas Libsass Sass Complier, joka on kirjoitettu C / C: ssä++ Bootstrap 4 kääntää paljon nopeammin kuin ennen.

2. Uusi ruudukkotaso pienemmille näytöille

Bootstrapissa on hienostunut reagoiva verkkojärjestelmä, jonka avulla kehittäjät voivat kohdistaa laitteita, joilla on erilaiset näkymisportit. Bootstrap 3: ssa on tällä hetkellä 4 ruudukkoa sarakkeille, .COL-xs-XX matkapuhelimiin, .COL-sm-XX tableteille, .COL-MD XX työpöydille ja .COL-lg-XX suuremmille työasemille. Bootstrap 4 parantaa verkkojärjestelmää viidennellä, joka helpottaa kehittäjiä kohdistaa pienempiä laitteita, joiden katseluympäristö on 480px.

Uusi ruudukko on ottanut edellisen pienimmän nimen ja työntänyt ruudukon nykyiset nimet ylöspäin yhdellä lovella. Bootstrap 4: ssä suuret työpöydät käyttävät .COL-XL-XX luokan valitsin. On tärkeää tietää, että uudesta nimestä huolimatta he eivät lisänneet uutta luokkaa ylimääräisille suurille näytöille vaan ylimääräisille pienille.

3. Esittää suhteelliset CSS-yksiköt

Bootstrap 4 lopettaa lopulta Internet Explorer 8: n tuen. Se on todella älykäs askel, koska se antaa heille mahdollisuuden päästä eroon ärsyttävistä polyfileistä ja muuntaa suhteelliset CSS-yksiköt. Pikselien sijasta uusi suuri julkaisutapahtuma käytä REMs ja EMs jotka mahdollistavat toteutettava reagoiva typografia Bootstrap-sivustoissa. Tämä lisää myös luettavuutta ja helpottaa sivustojen pääsyä vammaisille käyttäjille.

Jos haluat kokeilla, miten suhteelliset yksiköt toimivat uuden Bootstrap 4: n kanssa, tutustu tähän demoon Codepenissä.

4. Brand New Bootstrap -kortit

Kehitystiimi päätti yhdistää joitakin aiempia Bootstrapin käyttöliittymän elementtejä, joten he päättivät ottaa käyttöön a uusi UI-komponentti nimeltä Cards. Kortit korvaavat entiset kaivot, pikkukuvat ja paneelit ja tarjoavat käyttäjille entistä virtaviivaisemman työnkulun. Älä huoli, kortit pitävät tuttuja elementtejä, kuten kaivojen, pikkukuvien ja paneelien otsikot, otsikot ja alatunnisteet.

Koska kortit ovat joustavampia kuin nykyiset käyttöliittymäkomponentit, ne mahdollistavat suuremman tilan luoville toteutuksille. Siellä on joitakin edelläkävijöitä, jotka ovat jo suorittaneet kokeita Codepenillä Bootstrap Cards -korttien avulla. Voit tarkistaa ne tai luoda omia kortteja.

5. Uusi uudelleenkäynnistysmoduuli

Uusi uudelleenkäynnistysmoduuli korvaa edellisen normalize.css nollaa tiedosto. Se ei ojaa sitä; päinvastoin se rakentaa siihen enemmän sääntöjä. Siirron tavoitteena oli sisällyttää kaikki yleiset CSS-valitsimet ja palauttaa tyylit a yksi, helppokäyttöinen SCSS-tiedosto. Voit tarkastella lähdekoodia täällä, jos haluat paremmin ymmärtää, miten uusi moduuli toimii.

On hyvä tietää, että uudet nollaus-tyylit asettavat laatikon koon CSS-ominaisuuden fiksuiksi border-box on joka on periytynyt sivun jokaiselle lapsielementille. Uusi tyyli sääntö tekee reagoivista asetteluista helpommin hallittavissa. Jos haluat kokea sisältölaatikon ja raja-ruudun asettelutyyppien välisen eron, katso tämä kätevä demo, jonka CSS-Tricks.com tarjoaa (sitä ei luotu Bootstrap 4: lle, se näyttää vain, miten laatikko on yleensä toimii).

6. Flexboxin tuki

Bootstrap 4 mahdollistaa CSS3: n Flexbox-ulkoasun vipuvaikutuksen, koska Internet Explorer 9 ei tue flexbox-moduulia - Bootstrap 4: n oletusversio käyttää float-näyttöä ja näyttää CSS-ominaisuudet ominaisuuksien toteuttamiseksi.

Flexboxilla on helppokäyttöinen ulkoasu, jota voidaan hyödyntää erinomaisesti vastaavassa suunnittelussa, sillä se tarjoaa joustavan säiliön, joka joko laajenee tai kutistuu itse täyttääkseen käytettävissä olevan tilan. Käytä vain opt-in flexbox -ominaisuutta, jos älä tarve tukea IE9: ää.

7. Virtaviivainen muuttuva mukauttaminen

Kaikki uudessa Bootstrap-julkaisussa käytetyt Sass-muuttujat sisältyvät yhteen tiedostoon nimeltä _variables.scss, joka tehostaa merkittävästi kehitysprosessia. Sinun ei tarvitse tehdä mitään muuta kuin kopioida asetukset tästä tiedostosta toiseen _custom.scss Voit muuttaa oletusarvoja.

Sinä pystyt muokata monia asioita kuten värit, etäisyys, linkityylit, typografia, taulukot, ruudukon katkaisupisteet ja säiliöt, sarakkeen numero ja katon leveys sekä monet muut.

8. Uudet välineet luokkiin

Bootstrap 3: ssa on jo useita käytännöllisiä apuohjelmaluokkia, kuten niitä, jotka muuttavat kelluvia tai selkeitä, mutta Bootstrap 4 lisää vielä lisää. uudet välitunnit antaa kehittäjille mahdollisuuden vaihtaa sivustojensa nopeasti muutokset ja marginaalit.

Uusien luokkien syntaksi on melko yksinkertainen, esimerkiksi lisäämällä .m-a-0 luokka linkittää tyylisäännön asettaa marginaalit arvoon 0 tietyn elementin kaikilla puolilla (marginaali-all-0). Vaikka marginaalit käyttävät m- etuliite, tyynyt on muotoiltu p- etuliite. Kehitysasiakirjoissa voit tarkastella kaikkia uusia etäisyyden apuohjelmaluokkia.

9. Tooltips ja Popovers Powered by Tether

Bootstrap 4: ssä työkaluvihjeitä ja popoversia käytetään supersoolin Tether-kirjastossa, joka on paikannusmoottori, joka mahdollistaa absoluuttisesti sijoitetun elementin pitämisen toisen sivun vieressä samalla sivulla. Tämä tarkoittaa työkaluvihjeitä ja popoversia asetetaan automaattisesti oikein Bootstrap 4 -sivustoissa.

Älä unohda, että koska Tether on kolmannen osapuolen JavaScript-kirjasto, sinun on sisällytettävä se erikseen HTML-koodiin ennen bootstrap.js-tiedostoa.

10. Refactored JavaScript-laajennukset

Kehitystiimi uudisti jokaisen JavaScript-laajennuksen uuteen julkaisuun EcmaScript 6: n avulla. Uusimpien spesifikaatioiden ja uusimpien parannusten älykäs hyödyntäminen aikovat parantaa frontend-kokemusta.

Uusi Bootstrap 4 on myös käynyt läpi muita JavaScript-parannuksia, kuten optiotyypin tarkistus, yleiset teardown-menetelmät, ja UMD-tuki, että kaikki toimivat yhdessä, jotta suosituin etupaneelin kehys toimii sujuvammin kuin koskaan ennen.

Lue nyt: 10 kevyttä vaihtoehtoa Bootstrap & Foundationille