Bootstrap 4 Nove i cool značajke koje će vam se svidjeti

Sljedeće veliko izdanje Bootstrap okvira je iza ugla. Verzija alfa se već može preuzeti s Bootstrapove razvojne web stranice, a izvorni kod je također dostupan na Githubu.

Twitter Bootstrap je trenutno najpopularniji frontend okvir vani. To omogućuje programerima da brzo izradite web-mjesta koja su prvi i odgovorna za mobitele. Bootstrap omogućuje pametno korištenje standardnog HTML5, CSS3 i Javascript sučelja. Trenutno ga koristi više od 6 milijuna web-lokacija na webu.

Iako je Bootstrap 4 još uvijek u fazi razvoja (stoga ga nemojte koristiti na live siteu), programeri su napravili nevjerojatan posao. U ovom postu ćemo pogledati novu verziju koja uključuje mnoge sjajne značajke koje će zasigurno biti pojednostaviti i poboljšati tijek razvoja sučelja.

1. Sass umjesto manje

Do sada je Bootstrap koristio LESS kao svog glavnog CSS-a, ali za novo glavno izdanje pravila stila bit će preuređena za Sass, što je mnogo popularnije među programerima, ima veliku bazu podataka, koja je općenito lakša za korištenje i nudi više mogućnosti. Zahvaljujući moćnom Libsass Sass kompajleru napisanom na C / C++ Bootstrap 4 će se kompajlirati mnogo brže nego prije.

2. Nova rešetka za manje zaslone

Bootstrap ima sofisticirani odgovarajući sustav mreže koji programerima omogućuje da ciljaju uređaje s različitim prozorima. Bootstrap 3 trenutno ima 4 klasa mreže za stupce, .col-XS-XX za mobilne telefone, .stupac-sm-XX za tablete, .stupac-md-XX za stolna računala i .stupac-lg-XX za veća računala. Bootstrap 4 će poboljšati mrežu sa petom koja će olakšati programerima ciljajte manje uređaje pod širinom prozora 480px.

Nova klasa grid je uzela ime prethodnog najmanjeg i pomaknula trenutna imena razina mreže prema gore za jedan stupanj. U Bootstrap 4 će velika računala koristiti .stupac-xl-XX izbornik klase. Važno je znati da unatoč novom imenu nisu dodali novu klasu za ekstra velike ekrane, nego za ekstra male.

3. Uvodi relativne CSS jedinice

Bootstrap 4 napokon ispušta podršku za Internet Explorer 8. To je doista pametan korak jer im omogućuje da se riješe dosadnih polifila i pretvore u relativne CSS jedinice. Umjesto piksela, bit će novo veliko izdanje koristiti REM-ove i EM-ove koje omogućuju implementirati odgovarajuću tipografiju na web-lokacijama Bootstrap. To će također povećati čitljivost i učiniti mjesta pristupačnijima za korisnike s invaliditetom.

Ako želite isprobati kako relativne jedinice rade s novim Bootstrap 4, pogledajte ovaj demo na Codepen.

4. Brand New Bootstrap kartice

Razvojni tim odlučio je objediniti neke prethodne elemente korisničkog sučelja Bootstrap-a, pa su odlučili uvesti a nova komponenta korisničkog sučelja pod nazivom Kartice. Kartice će zamijeniti dosadašnje bušotine, sličice i panele te će korisnicima omogućiti jednostavniji tijek rada. Ne brinite, kartice će sadržavati poznate elemente, kao što su naslovi, zaglavlja i podnožja bunara, sličica i panela.

Kako će kartice biti fleksibilnije od trenutnih komponenti korisničkog sučelja, omogućit će veći prostor za kreativne implementacije. Postoje neki pioniri koji su već proveli eksperimente na Codepenu s Bootstrap karticama. Možete ih provjeriti ili stvoriti vlastite kartice.

5. Novi modul za ponovno podizanje sustava

Novi modul Reboot zamjenjuje prethodni normalize.css reset datoteku. To ga ne odbacuje; naprotiv, ona gradi više pravila o tome. Cilj je tog poteza bio uključiti sve generičke CSS selektore i poništiti stilove u a jedan, jednostavan za korištenje SCSS datoteku. Ovdje možete pogledati izvorni kod ako želite bolje razumjeti kako novi modul radi.

Dobro je znati da novi stilovi resetiranja pametno postavljaju CSS svojstvo veličine okvira border-box na element, koji je stoga naslijedio svaki podređeni element na stranici. Novo pravilo stila čini prilagodljivim izgledima lakše upravljati. Ako želite iskusiti razliku između sadržaja sadržaja okvira i okvira rubnog okvira, pogledajte ovaj praktični demo koji nudi CSS-Tricks.com (nije stvoren za Bootstrap 4, već samo pokazuje kako je određivanje veličine kutije općenito radi).

6. Opt-in Flexbox podrška

Bootstrap 4 omogućuje korištenje CSS3 Flexbox Layout-a - budući da Internet Explorer 9 ne podržava flexbox modul - zadana verzija Bootstrap 4 koristi float i CSS svojstva za implementaciju izgleda fluida.

Flexbox je jednostavan za korištenje raspored koji se može izvrsno iskoristiti u prilagodljivom dizajnu, budući da pruža fleksibilan spremnik koji se ili proširuje ili skuplja kako bi ispunio raspoloživi prostor na najbolji način. Koristite samo opciju opt-in flexbox ako to učinite nemoj treba pružiti podršku za IE9.

7. Uređeno prilagođavanje varijabli

Sve Sass varijable korištene u novom izdanju Bootstrap uključene su u jednu datoteku pod nazivom _variables.scss, koja će značajno pojednostaviti razvojni proces. Ne morate ništa drugo osim kopirati postavke iz ove datoteke u drugu koja se zove _custom.scss za promjenu zadanih vrijednosti.

Možeš prilagodite mnoge stvari kao što su boje, razmaci, stilovi veza, tipografija, tablice, točke prekida i spremnici, broj stupca i širina oluka, i mnogi drugi.

8. Novi uslužni razredi za razmak

Bootstrap 3 već ima mnoge praktične uslužne klase kao što su one koje mijenjaju plutajući ili clearfix, ali Bootstrap 4 dodaje još više. nove klase razmaka omogućiti programerima da brzo promijene paddings i margine na svojim web stranicama.

Sintaksa za nove klase je prilično jednostavna, na primjer dodavanje .Razred m-a-0 povezuje pravilo stila postavlja margine na 0 na svim stranama zadanog elementa (margin-all-0). Dok margine koriste m- Prefiks, obloge su oblikovane s p- prefiks. U razvojnim dokumentima možete pogledati sve nove klase uslužnih prostora.

9. Tooltips i Popovers Powered by Tether

U Bootstrap 4 tooltipsima i popoversima se koristi biblioteka superhladnog Tether-a, mehanizam za pozicioniranje koji omogućuje da se potpuno pozicionirani element drži odmah pored drugog elementa na istoj stranici. To znači upute i popovers automatski će biti pravilno postavljen na web-mjestima Bootstrap 4.

Ne zaboravite da je Tether JavaScript knjižnica treće strane, koju je potrebno zasebno uključiti u HTML prije datoteke bootstrap.js.

10. Prerađeni JavaScript dodaci

Razvojni tim je prepravio svaki JavaScript plugin za novo izdanje koristeći EcmaScript 6. Uz pametno korištenje najnovijih specifikacija i najnovijih poboljšanja, oni namjeravaju poboljšati iskustvo sučelja..

Novi Bootstrap 4 također je prošao kroz druga poboljšanja JavaScripta, kao što je provjeru vrste opcije, generičke metode otkidanja, i UMD podrška, koji će svi zajedno raditi kako bi najpopularniji okvir frontenata funkcionirao glatko nego ikada prije.

Sada pročitajte: 10 lakih alternativa za Bootstrap & Foundation