Share
19th August 2015 Bootstrap 4 alpha ble utgitt for offentligheten, akkurat fire år etter deres første offisielle kunngjøring av Bootstrap v1 (hvilken tilfeldighet er det?).
Woohoo! Twitter Bootstrap, et åpent CSS / HTML-rammeverk fra meg selv og @fat, bare gikk live: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo) 19. august 2011
Den stadig populære front-end-rammen har hatt en fullstendig makeover, og som en stor fan av Bootstrap er jeg ganske spent på å få hendene på noen av de nye funksjonene!
The Bootstrap hjemmesideEtter å ha gått gjennom et år med utvikling, endret 1 100 og 120 000 kodelinjer endret; det er en mengde endringer og nye funksjoner vi kan kaste over. For å spare deg for alle problemer med å skure endringsloggen, har jeg samlet en liste over funksjoner som jeg fant interessant.
La oss starte hvor hvert rammeverk starter, tilbakestillingsmodulen. Bootstraps nye omstartsmodul bygger på den tradisjonelle normalize.css og beveger nå alle generiske elementvelgerne og tilbakestiller stiler til en enkelt tilgjengelig scss-fil.
Du vil også legge merke til et greit triks, og sette den tradisjonelle boks størrelse: ramme boks til html element, deretter globalt til alle elementer via arv:
html boks størrelse: border-box; *, *: før, *: etter boks-størrelse: arve;
Dette gjør at vi bedre kan overstyre innstillingen (om nødvendig) uten å øke spesifisitet eller bruk !viktig.
Kreditt går til Jon Neal for den opprinnelige ideen og CSS-Tricks for en grundig oversikt over denne metoden.
I et trekk for å effektivisere CSS, dro Bootstrap v4 alpha IE8-støtte og en rekke hacky CSS3 polyfyll. Ved å støtte IE9 + har det vært i stand til å omfavne noen mye elskede CSS-moduler. En av disse er rem (root em) -enheten, som beregner skriftstørrelsen i forhold til rotelementet (html).
Ved å ta rem-enheter videre, kan vi virkelig begynne å dykke inn i responsiv typografi. Ettersom alle skriftstørrelser er basert på vårt rotelement, kan vi lage mediaforespørsler for å endre størrelser på forskjellige bruddpunkter. Kombiner dette med det nye gridbrytingspunktet mixins og voila!
Et eksempel på å endre skriftstørrelsen på hele nettstedet vårt når det vises på ekstra små enheter:
html font-size: 16px; // Lag en medieforespørsel for ekstra små enheter (0 - 34em) @include media-breakpoint-up (xs) html font-size: 18px;
Les mer i Kezz Braceys omfattende bruksanvisning: Når du skal bruke Em vs Rem.
Ut av boksen Bootstrap v4 støtter ikke Flexbox, i stedet utnytte mer tradisjonelle float eller vise tabell metoder. Mangelen på standard Flexbox-integrering bidrar til IE9 + -støtten, men hvis du er villig til å avstå fra denne støtten og støte den opp til IE10 +, kan du aktivere Flexbox over prosjektet ditt. Dette gjøres ved å endre den boolske variabelen i filen _variables.scss; Din kompilerte css vil nå inkludere Flexbox-stiler. Flexbox brukes ikke bare bare på rutenettet, men også forskjellige andre elementer, inkludert den nye kortkomponenten, inngangsgruppene og mediekomponenter.
La oss gå over et eksempel på hvor Flexbox hjelper oss ut. Ofte vil jeg ha et sett med inline kolonner (som vist nedenfor) der innholdet i en av kolonnene vil forlenge høyden langt utover de andre kolonnene. Et klassisk CSS dilemma. En av de mange fordelene ved å muliggjøre Flexbox er at vi kan tvinge kolonnhøydene til å være like. Ingen ekstra CSS er nødvendig!
Uten Flexbox
Med FlexboxÅ, btw-Bootstrap 4 vil være i SCSS. Og hvis du bryr deg, vil v5 sannsynligvis være i PostCSS fordi hellig crap som høres kult ut.
- Mark Otto (@mdo) 23. april 2015
SCSS har usurped LESS som CSS preprocessor til valg for Bootstrap v4. Hele CSS-koden har blitt refactored som SCSS, uten noen offisiell LESS-port ved skrivingstidspunktet. Mark forklarte noe av hans resonnement i en tweet:
Hvis du vil ha grunner: flere bruker SCSS, libsass er gal rask, syntaks os tydeligere, og jeg er lat og bruker SCSS på GitHub.
- Mark Otto (@mdo) 23. april 2015
Hvis du er en stor fan av den opprinnelige LESS-bygningen, har Mark bedt om hjelp til å opprette og vedlikeholde LESS-porten.
Bootstrap v4 har ryddet opp sine komponenter med fjerning av klassikeren vi vil, panel og thumbnail komponenter. I deres plass en ny komponent: kort!
Den nye kortkomponenten har de kjente aspektene til paneler, for eksempel titler, overskrifter og bunntekster, og ruller dem alle inn i en pen og fleksibel innholdsbeholder.
Og det er mer:
Du kan angi et kortbakgrunn med et bilde og legge over kortets tekst og annet innhold. Dette gjøres uten ekstra CSS ved å legge til følgende element i kortet ditt:
Legge til klassen kort-inverse vil sette skriftfargen til hvit slik at du kan sette en mørkere bakgrunn hvis du ønsker det.
Når det gjelder bakgrunn, kan de tradisjonelle fargevarianter også brukes på kortet og stil bakgrunnen tilsvarende. For eksempel, kort-primær vil sette kortet til primærfarge, så videre og så videre.
I tillegg til standardgitteret med takrenner finner du også muligheten til å gruppere kort sammen, fjern mellomromet mellomrom, og sett deretter hver kolonne til en jevn høyde. Som standard oppnås dette ved å bruke skjerm: bord og bordoppsett: fast, men hvis du har Flexbox aktivert, vil den bruke skjerm: flex i stedet.
Kortkomponenten leveres også med en masonry-lignende kolonnekonfigurasjon som tillater at kort stables tett sammen basert på tilgjengelig vertikal plass. Dette alternativet er ikke støttet i IE9-det krever IE10 og oppover!
Tidligere versjoner av Bootstrap har inneholdt ulike klasser kalt "verktøysklasser" for å muliggjøre rask og enkel justering av innholdet utenfor komponentspesifikke stiler. Vanligvis har dette vært begrenset til noen ganske grunnleggende endringer, for eksempel flytende (pull-venstre, pull-right), farge (.tekst-primær etc), clearfix (.clearfix) og noen andre.
I Bootstrap v4 alpha har vi tilgang til en hel rekke nye verktøysklasser rundt polstring og marginer. Dette muligens kontroversielle trekk vil gjøre det mulig for brukere av Bootstrap v4 å raskt skyve og justere innholdet i enhetlige trinn. Noen brukere kan føle at bruksklasser er et skritt unna inline-stiler, men de gir muligheten til raskt og jevnt å utforme en komponent uten å skape en bestemt velger for å gjøre det.
Margen- og polstringsverktøysklassene er opprettet i multipler med en jevn mellomromverdi. for eksempel:
// $ spacer er en sass-variabel som tilsvarer 1rem eller 16px .m-a-0 margin: 0! important; .m-a margin: $ spacer! viktig; .m-a-md margin: ($ spacer * 1.5)! viktig; .m-a-lg margin: ($ spacer * 3)! viktig;
Her .m-en står for margin på enll sider. Det er klasser for individuelle sider, akser, forskjellige størrelser (som betegnet av -0, -md og -lg) og for polstring.
Her er en titt på noen av de andre klassene:
// Bruk standard polstring på alle sider .p-a polstring: $ spacer! Viktig; // Bruk standard polstring til toppen .p-t polstring-toppen: $ spacer-y! Important; // Bruk standard polstring til høyre .p-r polstring-høyre: $ spacer-x! Viktig; // Bruk standard polstring til bunnen .p-b polstring-bunn: $ spacer-y! Important; // Bruk standard polstring til venstre .p-l polstring-venstre: $ spacer-x! Viktig; // Bruk standardpolstring til x-aksen (høyre og venstre) .p-x polstring-høyre: $ spacer-x! Important; padding-left: $ spacer-x! viktig; // Bruk standard polstring på y-aksen (topp og bunn) .p-y polstring-toppen: $ spacer-y! Important; polstring-bunn: $ spacer-y! viktig;
Ideen her er å redusere mengden av svært spesifikke egendefinerte klasser som er opprettet for å knyke innholdet, i stedet rulle dem inn i en jevn og konsistent metode for innholdsstilling.
Jeg snakket med Mark Otto (@mid co-creator of Bootstrap) på deres offentlige slakk kanal og diskutert bruken av disse klassene, sa han:
"Vi fant oss selv trenger dem, og ofte overstyrer standardverdiene for mange komponenter. Margin og polstring synes å være de mest overstyrte egenskapene (sammen med farge og skrift). "- Mark Otto
Det er ganske bokstavelig talt hundrevis av nye funksjoner og oppdateringer til eksisterende kodebase, for mange til å gå over i fin detalj. Så her er et par flere som ikke gjorde min hovedliste, men det er fortsatt verdt å nevne.
Bootstrap v4-dokumentasjonen har fått en oppdatering. Det er en litt annerledes struktur der funksjonene er oppdelt i oppsett, innhold og komponenter. Det jeg liker om den nye dokumentasjonen er at hver komponent har sin egen side, noe som gjør det enkelt å koble til og også leke med å endre størrelsen på siden for å teste responsivitet.
Bootstrap 4 har et nytt grid nivå for å målrette mindre enheter (under 480px bred), dette brytepunktet har tatt navnet på den forrige minste klassen (.COL-xs-XX). Ved å gjøre det har alle gridnivåene flyttet opp et hakk, og derved opprettet en ny største tierkalt .col-xl-XX for den forrige lg.
Som nevnt i konverteringen til rem og em, har Bootstrap-teamet lagt til nye mixins for raskt å lage breakpoints rundt de eksisterende brytpunktene. De kan brukes med følgende syntaks:
// Lag en medieforespørsel: @media (min bredde) @ inkludere media-breakpoint-up (xs) ... @ inkludere media-breakpoint-up (sm) ... @include media breakpoint-up (md) ... @ inkludere media-breakpoint-up (lg) ... @ inkludere media-breakpoint-up (xl) ... // Lag en medieforespørsel: @media (maksimal bredde) @include media breakpoint-down (xs) ... @include media-breakpoint-down (sm) ... @ inkludere media-breakpoint-down (md) ... @include media-breakpoint-down (lg) ... -down (xl) ...
Glyphicons har blitt fjernet fra bygningen; Bootstrap 4-dokumentasjonen vil til slutt inneholde instruksjoner om hvordan du skal inkludere tredjeparts ikonpakker som Font Awesome og Octicons.
Alle JavaScript-pluginene er omskrevet i ES6 for å utnytte den nyeste spesifikasjonen. Du kan legge merke til at noen plugins er fjernet (for eksempel affix-plugin) når de fortsetter å omskrive og bygge ut det nye biblioteket.
Så det er min liste over noen av de kule nye funksjonene lagt i Bootstrap 4 alpha. Hvis du vil sjekke ut hele endringsloggen så langt, ta en titt på @ mdo's git pull request for Bootstrap 4.
Jeg er sikker på at det kommer til å være en rekke endringer for å komme frem som teamet trener alle kinks. Deres utviklingsplan inneholder følgende milepæler
Det er ikke noe ord på når disse vil bli utgitt, i likhet med de forrige byggene, vil det komme ned til når biblioteket er klart. I mellomtiden får du oppstart og hjelper dem med å spore problemer og gi generell tilbakemelding gjennom deres feilsporing!
Accentsconagua
