Bootstrap 4 New & Cool iezīmes, kas jums būs patīkamas

Nākamais lielākais Bootstrap sistēmas atbrīvojums ir ap stūri. Alfa versija jau ir lejupielādējama no Bootstrap izstrādes vietnes, un avota kods ir pieejams arī pakalpojumā Github.

Čivināt Bootstrap pašlaik ir populārākā frontend sistēma. Tas ļauj izstrādātājiem ātri izveidojiet mobilās un pirmās atbildes vietnes. Bootstrap ļauj gudri izmantot standarta HTML5, CSS3 un Javascript frontes trio. To pašlaik izmanto vairāk nekā 6 miljoni vietņu tīmeklī.

Lai gan Bootstrap 4 joprojām ir izstrādes fāzē (tāpēc neizmantojiet to tiešraides vietnē), izstrādātāji ir paveikuši lielisku darbu. Šajā amatā mēs apskatīsim jauno versiju, kas ietver daudzas lieliskas iespējas, kas noteikti būs racionalizēt un uzlabot priekšplāna izstrādes darbplūsmu.

1. Sass LESS vietā

Līdz šim Bootstrap ir izmantojis LESS kā galveno CSS priekšapstrādes iekārtu, bet jaunajam lielajam atbrīvojumam stila noteikumi tiks atjaunoti uz Sass, kas ir daudz populārāks frontendu izstrādātāju vidū, tam ir milzīga ieguldītāju bāze, parasti vieglāk lietojama un piedāvā vairāk iespējas. Pateicoties spēcīgajam Libsass Sass Complier rakstam C / C++ Bootstrap 4 apkopos daudz ātrāk nekā iepriekš.

2. Jauns režģa līmenis mazākiem ekrāniem

Bootstrap ir sarežģīta, atsaucīga režģa sistēma, kas ļauj izstrādātājiem atlasīt ierīces ar dažādām skatu logiem. Bootstrap 3 pašlaik ir 4 tīkla klases kolonnām, .col-xs-XX mobilajiem telefoniem, .col-sm-XX tabletes, .col-md-XX galddatoriem un .col-lg-XX lielākiem galddatoriem. Bootstrap 4 uzlabos tīkla sistēmu ar piekto, kas atvieglos izstrādātājiem mērķēt mazākas ierīces, kuru skatījums ir 480px.

Jaunā režģa klase ir pieņēmusi iepriekšējā mazākā nosaukuma nosaukumu, un pašreizējie režģa līmeņu nosaukumi ir izvirzīti uz augšu par vienu pakāpienu. Bootstrap 4 lielajos galddatoros tiks izmantots .col-xl-XX klases selektors. Ir svarīgi zināt, ka, neraugoties uz jauno nosaukumu, viņi nepievienoja jaunu klasi īpaši lieliem ekrāniem, bet gan maziem.

3. ievieš relatīvās CSS vienības

Bootstrap 4 beidzot samazina Internet Explorer 8 atbalstu. Tas tiešām ir gudrs solis, jo tas ļauj viņiem atbrīvoties no nepatīkamām polifilām un pārvērsties par relatīvajām CSS vienībām. Pikseļu vietā jaunais lielais atbrīvojums būs izmantot REMs un EMs kas ļauj īstenot atsaucīgu tipogrāfiju Bootstrap vietnēs. Tas arī palielinās lasāmību un padarīs vietnes pieejamākas lietotājiem invalīdiem.

Ja vēlaties izmēģināt, kā relatīvās vienības strādā ar jauno Bootstrap 4, pārbaudiet šo demonstrāciju Codepen.

4. Jaunas Bootstrap kartes

Attīstības komanda nolēma apvienot dažus iepriekšējos Bootstrap lietotāja interfeisa elementus, tāpēc viņi nolēma ieviest a jauns UI komponents, ko sauc par kartēm. Kartes aizstās bijušās akas, sīktēlus un paneļus un nodrošinās lietotājiem vienkāršāku darbplūsmu. Neuztraucieties, kartes saglabās pazīstamus elementus, piemēram, nosaukumus, galvenes un kājenes, sīktēlus un paneļus.

Tā kā kartes būs elastīgākas nekā pašreizējās UI sastāvdaļas, tās ļaus lielāku telpu radošām realizācijām. Ir daži pionieri, kas jau ir veikuši eksperimentus ar Codepen ar Bootstrap Cards. Jūs varat tos pārbaudīt vai izveidot savas kartes.

5. Jauns pārstartēšanas modulis

Jaunais Reboot modulis aizstāj iepriekšējo normalize.css atiestatīt failu. Tas nav grāvis; gluži pretēji, tā uz to veido vairāk noteikumu. Pārvietošanas mērķis bija iekļaut visus vispārējos CSS selektorus un atiestatīt stili a viens, viegli lietojams SCSS fails. Jūs varat apskatīt avota kodu šeit, ja vēlaties labāk saprast, kā darbojas jaunais modulis.

Ir labi zināt, ka jaunie atiestatīšanas stili gudri nosaka kastes izmēra CSS īpašumu rāmis uz elementu, kas ir mantojums katram lapas elementam. Jaunais stila noteikums padara atsaucīgākus izkārtojumus vieglāk pārvaldāmus. Ja vēlaties izbaudīt atšķirību starp satura lodziņu un rāmju izkārtojuma veidiem, apskatiet šo ērto demonstrāciju, ko nodrošina CSS-Tricks.com (tas nav izveidots Bootstrap 4, tas tikai parāda, kā izmēra parasti darbojas).

6. Izvēlēties Flexbox atbalstu

Bootstrap 4 ļauj izmantot CSS3 Flexbox izkārtojuma sviras, tomēr, tā kā Internet Explorer 9 neatbalsta flexbox moduli - Bootstrap 4 noklusējuma versija izmanto peldēšanas un displeja CSS īpašības, lai īstenotu šķidruma izkārtojumu.

Flexbox ir viegli lietojams izkārtojums, ko var lieliski izmantot atsaucīgā dizainā, jo tas nodrošina elastīgu tvertni, kas vai nu paplašinās, vai samazinās, lai aizpildītu pieejamo vietu vislabākajā veidā. Izmantojiet tikai opt-in flexbox funkciju, ja jūs nav nepieciešams sniegt atbalstu IE9.

7. Racionalizēta mainīga pielāgošana

Visi Sass mainīgie, kas izmantoti jaunajā Bootstrap versijā, ir iekļauti vienā failā ar nosaukumu _variables.scss, kas ievērojami pilnveidos attīstības procesu. Jums nav jādara nekas cits, izņemot to, ka kopējat iestatījumus no šī faila citā _custom.scss lai mainītu noklusējuma vērtības.

Jūs varat pielāgot daudzas lietas piemēram, krāsas, atstarpes, saiknes stili, tipogrāfija, tabulas, tīkla pārtraukuma punkti un konteineri, kolonnas numurs un notekas platums, un daudzi citi.

8. Jaunas lietderības klases atstarpēm

Bootstrap 3 jau ir daudzas praktiskas lietderības klases, piemēram, tās, kas maina peldošo vai skaidrojumu, bet Bootstrap 4 pievieno vēl vairāk. The jaunas atstarpes klases ļauj izstrādātājiem ātri mainīt vietnes un margas.

Jauno klašu sintakse ir diezgan vienkārša, piemēram, pievienojot .m-a-0 klase saista stila noteikumu nosaka starpības uz 0 visos konkrētā elementa malās (margin-all-0). Kamēr rezerves izmanto m- prefikss, polsterējumi ir veidoti ar p- priedēklis. Attīstības dokumentos varat aplūkot visas jaunās atstarpes lietderības klases.

9. Tooltips un Popovers Powered by Tether

Programmā Bootstrap 4 rīku padomi un pārspriegumi izmanto Teter bibliotēku, kas ir pozicionēšanas dzinējs, kas ļauj saglabāt absolūti novietotu elementu blakus citam elementam tajā pašā lapā. Tas nozīmē rīkus un popovers tiks automātiski ievietots pareizi Bootstrap 4 tīmekļa vietnēs.

Neaizmirstiet, ka, tā kā Tether ir trešās puses JavaScript bibliotēka, jums tas atsevišķi jāiekļauj HTML pirms jūsu bootstrap.js faila.

10. Atjaunoti JavaScript spraudņi

Attīstības komanda atjaunoja katru JavaScript spraudni jaunajai versijai, izmantojot EcmaScript 6. Ar gudru jaunāko specifikāciju izmantošanu un jaunākajiem uzlabojumiem viņi plāno uzlabot frontend pieredzi.

Jaunais Bootstrap 4 ir arī pakļauts citiem JavaScript uzlabojumiem, piemēram, opcijas tipa pārbaude, vispārējas nolaišanas metodes, un UMD atbalsts, kas visi strādās kopā, lai padarītu populārāko frontendu sistēmu vieglāku nekā jebkad agrāk.

Tagad lasiet: 10 vieglās alternatīvas Bootstrap & Foundation