Share
Pe 19lea din august 2015 Bootstrap 4 alpha a fost lansat publicului, exact la patru ani după primul anunț oficial al lui Bootstrap v1 (ce drept de coincidență?).
Woo hoo! Twitter Bootstrap, un cadru CSS / HTML cu sursa deschisa de la mine si @ fat, tocmai a intrat live: http://t.co/3OOsQ5T #kaboom
- Mark Otto (@mdo) 19 august 2011
Cadrul front-end din ce în ce mai popular a avut un machiaj complet și, ca un mare fan al lui Bootstrap, sunt foarte încântat să-mi pun mâna pe unele dintre noile caracteristici!
Pagina de pornire BootstrapDupă ce a trecut un an de dezvoltare, s-au schimbat 1100 de angajamente și s-au schimbat 120.000 de linii de cod; există o grămadă de schimbări și noi caracteristici pe care le putem slăbi peste. Pentru a vă salva toate problemele de spălare a jurnalului de schimb am compilat o listă de caracteristici pe care mi-am găsit interesante.
Să începem unde începe fiecare cadru, modulul de resetare. Bootstrap noul modul de reboot se bazează pe modul tradițional normalize.css iar acum mișcă toți selectorii de elemente generice și reinițializează stilurile într-un singur fișier scss accesibil.
Veți observa, de asemenea, un truc minunat, stabilind tradiționalul box-size: caseta de frontieră la html element, apoi global la toate elementele prin moștenire:
html box-size: border-box; *, *: înainte, *: după box-size: moștenire;
Acest lucru ne permite să depășim mai bine setarea (dacă este necesar) fără a crește specificitatea sau utilizarea !important.
Creditul vine de la Jon Neal pentru ideea originală și CSS-Tricks pentru o prezentare detaliată a acestei metode.
Într-o mișcare care a ajutat la eficientizarea CSS, Bootstrap v4 alpha a renunțat la suportul IE8 și la o mulțime de hârtii de umplere din poliamidă CSS3. Prin sprijinirea IE9 + a reușit să îmbrățișeze câteva module CSS foarte iubite. Una dintre acestea este unitatea rem (root em), care calculează dimensiunea fontului în raport cu elementul rădăcină (html).
Luând în continuare unități rem, putem să începem cu adevărat să introducem în tipografie receptivă. Deoarece dimensiunea fontului se bazează pe elementul rădăcină, putem crea interogări media pentru a modifica dimensiunile la diferite puncte de pauză. Combinați acest lucru cu noile mixuri de puncte și cu voila!
Un exemplu de modificare a mărimii fontului pe site-ul nostru atunci când este vizualizat pe dispozitive suplimentare:
html font-size: 16px; // Creează o interogare media pentru dispozitivele de mici dimensiuni (0 - 34) @ include media-breakpoint-up (xs) html font-size: 18px;
Citiți mai multe în ghidul general al lui Kezz Bracey: Când să utilizați Em vs. Rem.
În afara casetei, Bootstrap v4 nu va suporta Flexbox, în schimb, folosind mai multe metode tradiționale de flotare sau de afișare. Lipsa integrării standard a Flexbox ajută la suportul IE9 +, totuși, dacă sunteți dispus să renunțați la acest suport și să-l aduceți la IE10 +, puteți permite Flexbox în cadrul proiectului dvs. Aceasta se face prin schimbarea variabilei booleene în fișierul _variables.scss; css-ul dvs. compilat va include acum stilurile Flexbox. Flexbox este folosit nu numai pe rețea, ci și în alte elemente, inclusiv noua componentă a cardului, grupuri de intrare și componente media.
Să vedem un exemplu în care Flexbox ne ajută. Destul de des, voi avea un set de coloane inline (după cum se prezintă mai jos), unde conținutul într-una din coloane va extinde înălțimea cu mult peste celelalte coloane. O dilemă clasică CSS. Unul dintre multele avantaje ale activării Flexbox este că putem forța înălțimea coloanelor să fie egală. Nu este necesar niciun CSS suplimentar!
Fără Flexbox
Cu FlexboxOh, btw-Bootstrap 4 va fi în SCSS. Și dacă vă pasă, v5 va fi probabil în PostCSS pentru că prostiile sfinte care sună rece.
- Mark Otto (@mdo) 23 aprilie 2015
SCSS a uzurpat mai puțin ca preprocesor CSS de alegere pentru Bootstrap v4. Întreaga bază de cod CSS a fost refactată ca SCSS, fără port oficial LESS la momentul redactării. Mark a explicat câteva dintre raționamentele sale într-un tweet:
Dacă doriți motive: mai mulți oameni folosesc SCSS, libsass este nebun rapid, sintaxa os mai clară clar și sunt leneș și folosesc SCSS la GitHub.
- Mark Otto (@mdo) 23 aprilie 2015
Dacă sunteți un mare fan al construirii inițiale mai puțin, Mark a cerut ajutor pentru crearea și menținerea portului LESS.
Bootstrap v4 și-a curățat componentele prin înlăturarea clasicului bine, panou și miniatură componente. În locul lor, o nouă componentă: cărți!
Noua componentă a cartelei are aspectele familiare ale panourilor, cum ar fi titlurile, anteturile și subsolurile, și le pune pe toate într-un container de conținut curat și flexibil.
Și mai sunt și altele:
Puteți seta un fundal al unei cărți cu o imagine și puteți suprapune textul și alt conținut al cardului. Acest lucru se face fără nici un CSS suplimentar prin adăugarea următorului element pe card:
Adăugarea clasei carte-inversă va seta culoarea fontului pe alb, permițându-vă să setați un fundal mai întunecat, dacă doriți.
Vorbind despre medii, variantele tradiționale de culoare pot fi, de asemenea, aplicate pe card și stilul de fundal în consecință. De exemplu, carte-primar va seta cardul la culoarea primară, așa mai departe și așa mai departe.
În plus față de rețeaua standard cu jgheaburi, veți găsi, de asemenea, opțiunea de a grupa cărțile împreună, eliminați spațiile între ele, apoi setați fiecare coloană la o înălțime uniformă. În mod implicit, acest lucru este realizat prin utilizarea afișare: tabel și tabel-layout: fix, cu toate acestea, dacă aveți activat Flexbox, acesta va fi utilizat afișare: flex in schimb.
Componenta cardului vine, de asemenea, cu o configurație a coloanei de tip zidărie care permite cartușelor să se suprapună împreună pe baza spațiului vertical disponibil. Această opțiune este nu sunt acceptate în IE9-este nevoie de IE10 și până!
Versiunile anterioare ale Bootstrap au inclus diferite clase numite "clase de utilitare" pentru a permite ajustarea rapidă și ușoară a conținutului în afara stilurilor specifice componentelor. De obicei, acest lucru a fost limitat la unele schimbări de bază, cum ar fi plutitoare (pull stânga, pull-dreapta), culoare (.text-primar etc), clarfix (.clearfix) și câteva altele.
În Bootstrap v4 alpha, avem acces la o întreagă serie de clase noi de utilități în jurul zonelor și marginilor. Această mișcare eventual controversată va permite utilizatorilor de Bootstrap v4 să împingă rapid și să alinieze conținutul în cadrul unor creșteri uniforme. Unii utilizatori pot simți că clasele de utilitate se află la un pas distanță de stilurile inline, cu toate acestea ele oferă posibilitatea de a modela rapid și uniform o componentă fără a crea un anumit selector pentru a face acest lucru.
Clasele de marjă și de utilitate de umplutură sunt create în multiplii cu o valoare uniformă a distanțierului. de exemplu:
// $ spacer este o variabilă sass care este egală cu 1rem sau 16px .m-a-0 margin: 0! important; .m-a margine: $ spacer! important; .m-a-md margine: ($ spacer * 1.5) important; .m-a-lg margine: ($ spacer * 3) important;
Aici .m-a standuri pentru margin pe APărțile. Există clase pentru părți individuale, axe, dimensiuni diferite (după cum se indică prin -0, -md și -lg) și pentru umplutura.
Iată câteva dintre celelalte clase:
// Aplicați umplutura standard pe toate părțile .p-a padding: $ spacer! Important; / / Aplicați umplutura standard în partea superioară .p-t padding-top: $ spacer-y! Important; / / Aplicați umplutură standard la dreapta .p-r padding-right: $ spacer-x! Important; // Aplicați umplutura standard în partea de jos .p-b padding-bottom: $ spacer-y! Important; / / Aplicați umplutura standard în stânga .p-l padding-left: $ spacer-x! Important; / / Aplicați umplutură standard pe axa x (dreapta și stânga) .p-x padding-right: $ spacer-x important! padding-left: $ spacer-x important! / / Aplicați umplutură standard pe axa y (partea de sus și de jos) .p-y padding-top: $ spacer-y! Important; padding-bottom: $ spacer-y important!
Ideea aici este de a reduce cantitatea de clase personalizate extrem de specifice create pentru a înăbuși conținutul, în loc să le aliniem într-o metodă uniformă și consecventă de aliniere a conținutului.
Am avut o discuție cu Mark Otto (@mdo co-creator de Bootstrap) pe canalul lor public Slack și am discutat despre utilizarea acestor clase, a spus el:
"Ne-am aflat că avem nevoie de ele și adesea suprasolicită valorile implicite pentru multe componente. Marginea și umplutura par a fi proprietățile cele mai frecvent suprasolicitate (împreună cu culoarea și fontul) "- Mark Otto
Există destul de literalmente sute de noi caracteristici și actualizări ale bazei de cod existente, prea multe pentru a trece peste detaliile fine. Deci, aici sunt un cuplu mai mult care nu a făcut lista mea majore, dar totuși merită menționat.
Documentația Bootstrap v4 a avut o actualizare. Există o structură ușor diferită, în care caracteristicile sunt defalcate schemă, conţinut și componente. Ceea ce îmi place destul de mult despre noua documentație este că fiecare componentă are o pagină proprie, făcându-se ușor să se leagă și să se joace în jurul valorii de redimensionarea paginii pentru a testa capacitatea de reacție.
Bootstrap 4 are un nou nivel de rețea pentru a viza dispozitive mai mici (sub lățimea de 480 px), acest punct de întâlnire a luat numele clasei anterioare mai mici (.Col-xs-XX). Procedând astfel, toate nivelurile rețelei s-au mutat într-o notă, creând astfel un nou nivel mai mare numit .col-xl-XX pentru lg precedent.
După cum sa menționat în conversia pentru rem și em, echipa Bootstrap a adăugat noi mixuri pentru a crea rapid puncte de rupere în jurul punctelor de întrerupere existente. Acestea pot fi utilizate cu următoarea sintaxă:
// Crează o interogare media: @media (min-width) @include media-breakpoint-up (xs) ... @include media-breakpoint-up (sm) ... ... @include media-breakpoint-up (lg) ... @ include media-breakpoint-up (xl) ... // Crează o interogare media: @media (max-width) @include media-breakpoint-down (xs) ... @ include media-breakpoint-down (sm) ... @include media-breakpoint-down (md) ... @include media-breakpoint-down (xl) ...
Glyphicons au fost scoase din construcție; Documentația Bootstrap 4 va include, în cele din urmă, instrucțiuni despre cum să includeți pachete de pictograme pentru terți, cum ar fi Font Awesome și Octicons.
Toate pluginurile JavaScript au fost rescrise în ES6 pentru a beneficia de cele mai recente specificații. S-ar putea să observați că unele pluginuri au fost eliminate (cum ar fi pluginul affix) deoarece continuă să rescrie și să construiască noua bibliotecă.
Deci aceasta este lista mea cu unele dintre noile funcții noi adăugate în Bootstrap 4 alpha. Dacă doriți să verificați întregul jurnal de schimbări până acum, aruncați o privire la cererea de tragere @ mdo's git pentru Bootstrap 4.
Sunt sigur că va veni o grămadă de schimbări pentru ca echipa să lucreze cu toții. Planul de dezvoltare include următoarele repere
Nu există nici un cuvânt despre momentul în care vor fi lansate, la fel ca și clădirile anterioare, care vor ajunge până când biblioteca va fi gata. Între timp, obțineți bootstrapping și ajutați-i să urmărească problemele și să furnizeze feedback general prin tracker-ul de bug-uri!
Accentsconagua
