Bootstrap 4 nové a cool funkcie budete milovať

Ďalšie hlavné vydanie rámca Bootstrap je za rohom. Verziu alfa je možné stiahnuť z webovej stránky vývoja Bootstrap a zdrojový kód je k dispozícii aj na stránkach spoločnosti Github.

Twitter Bootstrap je v súčasnosti najobľúbenejší rámec frontend tam. Umožňuje vývojárom rýchlo vytvoriť najprv mobilné a rýchlo reagujúce webové stránky. Bootstrap umožňuje elegantne využiť štandardné trio HTML5, CSS3 a Javascript. V súčasnosti ho využíva viac ako 6 miliónov webových stránok.

Hoci Bootstrap 4 je stále vo vývojovej fáze (takže ho nepoužívajte na živom webe), vývojári urobili skvelú prácu. V tomto príspevku sa pozrieme na novú verziu, ktorá obsahuje mnoho skvelých funkcií, ktoré určite zaistia zjednodušiť a zlepšiť pracovný postup vývoja frontend.

1. Sass namiesto LESS

Až do teraz Bootstrap použil LESS as jej hlavným CSS prepocessor, ale pre novú hlavnú verziu, budú pravidlá štýlu byť refactored Sass, čo je oveľa viac populárny medzi vývojármi frontend, má obrovskú prispievateľa základňu, všeobecne ľahšie použiteľný a ponúka viac možností. Vďaka silnému kompilátoru Libassa Sass napísanému v C / C++ Bootstrap 4 bude kompilovať oveľa rýchlejšie ako predtým.

2. Nová úroveň siete pre menšie obrazovky

Bootstrap disponuje sofistikovaným systémom reagujúcich na sieť, ktorý umožňuje vývojárom zacieľovať na zariadenia s rôznymi výrezmi. Bootstrap 3 má v súčasnosti 4 stĺpce mriežky, .col-xs-XX pre mobilné telefóny, .col-sm-XX pre tablety, .col-md-XX pre stolné počítače a .col-lg-XX pre väčšie desktopy. Bootstrap 4 zvýši systém mriežky s piatym, čo uľahčí vývojárom zacieľte na menšie zariadenia s šírkou výhľadu 480 px.

Nová trieda mriežky prevzala názov predchádzajúcej najmenšej triedy a stlačila aktuálne názvy mriežkových vrstiev nahor o jeden zárez. V Bootstrap 4 budú veľké plochy používať .col-XL-XX selektor triedy. Je dôležité vedieť, že aj napriek novému názvu nepridávali novú triedu pre extra veľké obrazovky, ale pre mimoriadne malé.

3. Predstavuje relatívne jednotky CSS

Bootstrap 4 nakoniec upustí podporu pre Internet Explorer 8. To je naozaj chytrý krok, pretože im umožňuje zbaviť sa zbytočných polyfillov a konvertovať na relatívne CSS jednotky. Namiesto pixelov bude nové hlavné vydanie použite REM a EM ktoré to umožňujú implementovať citlivú typografiu na stránkach Bootstrap. To tiež zvýši čitateľnosť a sprístupní stránky pre užívateľov so zdravotným postihnutím.

Ak chcete vyskúšať, ako relatívne jednotky pracujú s novým Bootstrap 4, pozrite si toto demo na Codepen.

4. Zbrusu nové karty Bootstrap

Vývojový tím sa rozhodol zjednotiť niektoré predchádzajúce prvky užívateľského rozhrania Bootstrapu, a preto sa rozhodli zaviesť a nová zložka používateľského rozhrania s názvom Karty. Karty nahradia pôvodné studne, miniatúry a panely a poskytnú užívateľom efektívnejší pracovný tok. Nebojte sa, karty budú mať známe prvky, ako sú názvy, hlavičky a päty jamiek, miniatúr a panelov.

Keďže karty budú flexibilnejšie než súčasné komponenty používateľského rozhrania, umožnia väčší priestor pre kreatívne implementácie. Existujú aj niektorí priekopníci, ktorí už vykonali experimenty s Codepen s kartami Bootstrap. Môžete ich skontrolovať alebo vytvoriť vlastné karty.

5. Nový reštartovací modul

Nový modul Reboot nahrádza predchádzajúci normalize.css obnoviť súbor. Nevystavuje to; naopak, stavia na ňom viac pravidiel. Cieľom tohto kroku bolo zahrnúť všetky generické selektory CSS a štýly obnovenia v a jednoduchý, ľahko použiteľný súbor SCSS. Tu sa môžete pozrieť na zdrojový kód, ak chcete lepšie pochopiť, ako funguje nový modul.

Je dobré vedieť, že nové štýly obnovenia inteligentne nastavujú vlastnosť CSS s veľkosťou boxu border-box na element, ktorý je preto zdedený každým dieťaťovým prvkom na stránke. Nové pravidlo štýlu umožňuje ľahšie ovládateľné usporiadanie odpovedí. Ak chcete zažiť rozdiel medzi content-box a border-box typov rozloženie, pozrite sa na tento šikovný deme poskytnutých CSS-Tricks.com (to nebol vytvorený pre bootstrap 4, to len ukazuje, ako box-sizing všeobecne funguje).

6. Opt-in podpora Flexbox

Bootstrap 4 umožňuje využívať flexibilitu rozloženia CSS3 Flexbox Layout, avšak - keďže program Internet Explorer 9 nepodporuje modul flexbox - predvolená verzia Bootstrap 4 využíva vlastnosti CSS pre float a zobrazenie na vykonanie rozloženia kvapaliny.

Flexboxu má ľahko použiteľné usporiadanie, ktoré možno výborne využiť v citlivým dizajnom, pretože poskytuje flexibilný kontajner, ktorý buď sťahuje alebo rozťahuje sám zaplniť dostupného priestoru najlepší spôsob. Používajte len funkciu opt-in flexbox, ak ste nie poskytovať podporu pre IE9.

7. Zjednodušené prispôsobenie premenných

Všetky premenné Sass používané v novej verzii Bootstrap sú zahrnuté v jednom súbore s názvom _variables.scss, ktorý výrazne zjednoduší vývojový proces. Nemusíte robiť nič iného, ​​okrem toho, že by ste skopírovali nastavenia z tohto súboru na iné _custom.scss ak chcete zmeniť predvolené hodnoty.

Môžeš prispôsobiť veľa vecí ako sú farby, medzery, štýly odkazov, typografia, tabuľky, hraničné body a kontajnery, počet stĺpcov a šírka žľabu a mnoho ďalších.

8. Nové triedy nástrojov pre medzery

Bootstrap 3 už má veľa praktických pomôcok, ako sú tie, ktoré zmenia plávajúcu alebo clearfix, ale Bootstrap 4 pridáva ešte viac. nové rozdeľovacie triedy umožniť vývojárom rýchlo meniť paddings a marže na svojich stránkach.

Syntax pre nové triedy je pomerne jednoduchý, napríklad pridanie .m-a-0 prepája pravidlo štýlu nastaví okraje na 0 na všetkých stranách daného prvku (margin-all-0). Zatiaľ čo okraje používajú m- prefix, paddings sú v štýle p- prefix. Vo vývojových dokumentoch sa môžete pozrieť na všetky nové triedy utility.

9. Tooltips a Popovers Powered by Tether

V bootstrap 4 bubliny a popovers využije Supercool Tether knižnica, polohovacie motor, ktorý umožňuje, aby sa absolútne umiestnený prvok tesne vedľa iný prvok na rovnakej stránke. To znamená nácvik nástrojov a popovers bude automaticky umiestnená správne na stránkach Bootstrap 4.

Nezabudnite, že ako Tether je knižnica JavaScript tretej strany, musíte ju samostatne zahrnúť do kódu HTML pred súborom bootstrap.js.

10. Zmätené doplnky JavaScript

Vývojový tím obnovil každý plugin JavaScript pre novú verziu pomocou EcmaScript 6. S inteligentným využitím najnovších špecifikácií a najnovších vylepšení zamýšľajú zlepšiť skúsenosti s frontend.

Nový Bootstrap 4 prešiel aj ďalšími vylepšeniami jazyka JavaScript, napríklad kontrola typu voľby, všeobecné teardown metódy, a Podpora UMD, to všetko bude spolupracovať na tom, aby najpopulárnejší rámec frontend fungoval hladšie ako kedykoľvek predtým.

Prečítajte si: 10 Ľahké alternatívy Bootstrap & Foundation