Share
Bootstrap, en av de mest populære front-end rammer blant webdesignere, nylig lansert sin veldig ivrig etterlengtede versjon 4! La oss ta en titt på hva som er nytt, hva som er fjernet, og hva du kan gjøre med det.
Vi stoppet aldri med å tro, og håper du ikke heller! Bootstrap 4.0.0 har endelig landet! https://t.co/zFAOxpyhvD
- Bootstrap (@getbootstrap) 18. januar 2018
Denne iterasjonen av Bootstrap, ifølge Mark Otto og teamet, er en "stor omskrivning av hele prosjektet". Det lover mange forbedringer, og foreslår også at det er mye å få hodet rundt hvis du planlegger å migrere eksisterende prosjekter til denne nye versjonen. Det er ingen "bryte endringer", men det er mye å ta inn. Tid til å hoppe inn og undersøke de viktigste funksjonene.
Tradisjonelt har Bootstraps layout blitt drevet av float-baserte stiler. I nyere versjoner ble et flexbox-alternativ gjort tilgjengelig, men i følge sin utbredte nettleserstøtte er flexbox nå mesteren i Bootstrap-nettene. CSS-teknologien bak Bootstrap-gridene gjør ikke stor forskjell, men flexbox gir mer fleksibilitet enn flyter, så flexbox-baserte grids kommer med noen flere alternativer. For eksempel, ved hjelp av flexbox betyr at du kan definere en kolonne og få sine søsken automatisk å endre størrelsen på den.
Bevegelsen mot å favorisere flexbox spurte faktisk en annen endring: nettleserstøtte. Bootstrap v4 har offisielt falt støtte for Internet Explorer 8, 9 og iOS 6. Dette betyr at Bootstrap-nettstedene dine bare vil støtte IE10 + og iOS 7+. Verdt å merke seg.
Fans av Sass vil gjerne høre at Bootstrap nå er offisielt et Sass-første prosjekt. Hvis du laster ned Bootstrap-kilden, finner du en mappe som heter "Sass", der du vil se alle de nødvendige delene. "_Variables.scss" inneholder alle variablene og innstillingene du trenger, da "bootstrap.scss" huser alle de @importere direktiver, slik at du kan tilpasse Bootstrap-installasjonen ved å inkludere eller ekskludere hvilke komponenter du ønsker.
På alle steder, bortsett fra medieforespørsler, har Bootstrap v4 falt piksler til fordel for relative måleenheter som remmer. Dette gjør hele greia mer skalerbar, så hvis du ikke har blitt vant til rem-enheter nå, ville det være en god tid å ta en titt på disse ressursene:
Foruten Bootstraps flytting fra flytebaserte oppsett, kommer responsen sin nå også med et ekstra nivå. Fra nå av kan du tilpasse disse fem standardverdiene:
$ grid-breakpoints: (xs: 0px, sm: 576px, md: 768px, lg: 992px, xl: 1200px)! default;
Den neste bemerkelsesverdige endringen kommer i form av en ny tilbakestillingsfil. "Reboot" tar Normalize resets, som bare bruker element selektorer, bygger deretter på den med noen påståtte klassebaserte reset-stiler (du finner .bord og .table-grenser begravet der inne med flere andre).
Hvis du noen gang har lastet ned en tidligere versjon av Bootstrap, vil du være kjent med den elektroniske tilpasseren. Dette verktøyet tillot deg å sjekke og fjerne merket fra ulike aspekter av Bootstrap-rammeverket for å lage din ideelle versjon.
Vel, det er borte.
I stedet fokuserer Bootstrap nå på sin egen modulære struktur, slik at du kan utnytte Sass fra slutten, bare inkludere det du trenger, og kompilere ditt eget implementerbare sluttresultat .
Gjør det selvBootstrap inneholder ikke lenger glyfikoner. I stedet anbefales det å finne dine egne favoritter og inkludere dem, uansett hvordan du ser det. Bootstrap-teamet selv foretrekker følgende sett, som vi anbefaler at du implementerer som SVG i stedet for å bruke webfontsymboler:
Ikonisk tommelen oppTidligere versjoner av Bootstrap inkluderte Grunt-støtte for å automatisere mange av de vanlige oppgavene; det er nå borte. I stedet kommer Bootstrap nå med en rekke npm-skript som du finner i "package.json" -filen. Du kan bruke disse til å gjøre ting som å se dine Sass-filer for endringer, utføre lintester på JavaScript, eller bare bruk Kjør npm dist å gjøre alt og kompilere en distribusjonsversjon av ditt ferdige nettsted.
Hvis du vil ha mer informasjon om hvordan Bootstrap og Node.js fungerer, kan du se på byggverktøyet, eller se følgende opplæringsprogrammer:
Sammen med disse store endringene, er det en rekke små endringer i den nyeste Bootstrap. Fans av komponenter som paneler, miniatyrbilder og brønner vil bli skuffet over at de har blitt fjernet. Men de har gjort veien for en altomfattende komponent kalt "kortet", som faktisk er en stor forbedring. Du kan lese alt om disse endringene, og mer, på Migreringssiden.
Hold deg oppdatert på flere Bootstrap 4 opplæringsprogrammer og kurs på Tuts +, og jeg får se deg neste gang!
Accentsconagua