7 Mga Bagong Tampok na Dapat Abangan sa Bootstrap 5

7 Mga Bagong Tampok na Dapat Abangan sa Bootstrap 5

Ang Bootstrap 5 ay mayroong pangunahing mga pagbabago, kasama na ang drop para sa suporta ng Internet Explorer (IE) at pagtitiwala sa jQuery. Binuo ng Twitter, ang Bootstrap ay ang pinakatanyag na balangkas ng CSS sa buong mundo. Ang balangkas ng interface ng bukas na mapagkukunan ng gumagamit ay tinitingnan ang pagpoposisyon mismo para sa hinaharap, at nakita nitong gumawa ng mga pagbabago sa ground-break sa v5.





Ang drop ng Bootstrap para sa IE ay ginawa itong unang tool sa pag-unlad ng web na nagawa ito. Ang paglipat ay nagmumula sa patuloy na pagbawas ng bahagi ng merkado ng Internet Explorer, na tumutukoy sa mas mababa sa 3% ng lahat ng mga web browser.





Basahin pa upang makita kung ano ang higit pang mga pagpapabuti na nagawa sa Bootstrap at kung paano sila nakakaapekto sa iyo.





1. Suporta ng jQuery

Hindi na gagamit ang Bootstrap ng jQuery library. Pinahusay ng pangkat ng pag-unlad ang library ng JavaScript upang maisagawa ang pagbabagong ito. Ang pagiging maaasahan ng jQuery ay hindi kinakailangang isang masamang bagay sa Bootstrap.

Sa katunayan, ang pagpapakilala ng jQuery ay radikal na binago kung paano ginamit ang JavaScript. Pinasimple nito ang mga gawain sa pagsusulat sa JavaScript na kung hindi man ay kumuha ng maraming mga linya ng code.



Kaugnay: Alamin Kung Paano Lumikha ng isang Elemento sa jQuery

Sa kabila ng lahat ng ito, nagpasya ang koponan na patayin ito. Ito ay kasama ng pakinabang ng mas maliit na mga file ng mapagkukunan at mas mataas na mga oras ng pag-load ng pahina. Ito ay isang kinakailangang pagbabago na makakakita sa Bootstrap na makakuha ng isang mas istilo sa hinaharap.





Ang sukat ng pinagmulan ng file ay naging mas magaan ng 85KB ng minified na JavaScript, at ito ang susi dahil isinasaalang-alang ng Google ang mga oras ng pag-load ng pahina para sa mga mobile site bilang isang factor sa pagraranggo.

Hangga't ang paggamit ng jQuery ay hindi na kinakailangan sa Bootstrap 5, maaari mo pa rin itong magamit kung nais mo. Mahalaga rin na tandaan na ang lahat ng mga plugin ng JavaScript ay mananatiling magagamit.





2. Pasadyang Mga Katangian ng CSS

Sa pamamagitan ng pag-drop ng suporta sa Internet Explorer, maaaring magamit ang mga pasadyang pag-aari ng CSS (variable). Hindi sinusuportahan ng IE ang mga pasadyang pag-aari - isang dahilan lamang kung bakit pinigilan nito ang mga developer ng web ng mahabang panahon.

Ang pasadyang mga pag-aari ng CSS ay ginagawang mas may kakayahang umangkop at mai-program ang CSS. Ang mga variable ng CSS ay pauna na -bs upang maiwasan ang salungatan sa CSS ng third party.

Mayroong dalawang uri ng mga variable na magagamit: mga variable ng ugat at mga variable ng bahagi.

Maaaring ma-access ang mga variable ng ugat saan man mai-load ang Bootstrap CSS. Ang mga variable na ito ay matatagpuan sa _root.scss file at bahagi ng pinagsamang dist file.

Ginagamit ang mga variable ng bahagi bilang mga lokal na variable sa mga partikular na bahagi. Nakatutulong ang mga ito upang maiwasan ang hindi sinasadyang pamana ng mga istilo sa mga sangkap tulad ng mga pugad na mesa.

3. Pinabuting Grid System

Dahil may ilang mga isyu sa pag-upgrade mula sa bersyon 3 hanggang 4, pinapanatili ng Bootstrap 5 ang karamihan ng system sa oras na ito, na itinatayo sa mayroon nang system sa halip na ganap na baguhin ito. Ang ilan sa mga pagbabago ay:

  • Ang gutter class ( .boys ) ay napalitan sa isang utility ( .g * ) katulad ng margin at padding
  • Ang mga klase sa puwang na puwang ay isinama din
  • Ang mga haligi ay hindi na na-default sa posisyon: kamag-anak

4. Pinagbuting Dokumentasyon

Ang dokumentasyon ay pinahusay na may maraming impormasyon lalo na pagdating sa pagpapasadya. Ang isang karaniwang problema ay sa maraming mga site na gumagamit ng Bootstrap, maaari mong agad na makilala na gumagamit ito ng Bootstrap. Ang Bootstrap 5 ay may kasamang bagong hitsura at pakiramdam, at may mas mahusay na pagpapasadya.

Mayroong higit na kakayahang umangkop upang ipasadya ang iyong mga tema upang hindi lahat ng site o app ay magkakapareho ng pagkakahawig. Ang pahina ng tema ng v4 ay talagang pinalawak na may maraming nilalaman at mga code ng snippet para sa pagbuo sa tuktok ng Sass (ang tanyag na CSS pre-processor) na mga file. Maaari ka ring makahanap ng isang proyekto ng starter npm sa GitHub platform na magagamit bilang isang template repository.

Ang color palette ay pinalawak din sa bersyon 5. Ang pinalawig na built-in na sistema ng kulay ay nagpapahiwatig na madali mong mai-istilo ang iyong pangkulay nang hindi na kinakailangang iwanan ang iyong codebase. Mas maraming trabaho ang nagawa upang mapabuti ang kaibahan ng kulay, kasama ang pagdaragdag ng isang sukatan ng kaibahan ng kulay sa mga Bootstrap na color doc.

5. Pinahusay na Mga Kontrol sa Form

Pinagbuti ng Bootstrap ang mga kontrol sa form nito, mga pangkat ng pag-input, at marami pa.

Sa v4, gumagamit ang Bootstrap ng mga kontrol ng pasadyang form bilang karagdagan sa mga default na ibinigay ng bawat browser. Sa v5, lahat ng ito ay na-customize na ngayon. Lahat ng mga radio button, checkbox, file, range at higit pa upang mabigyan sila ng parehong hitsura at pag-uugali sa iba't ibang mga browser.

Ang bagong kontrol ng form ay hindi na naglalaman ng hindi kinakailangang makulay na markup, ngunit sa halip ay tumuon sa pamantayan at lohikal na mga tampok sa disenyo.

6. Ang Bootstrap 5 Nagdaragdag ng Mga Utilities API

Kasunod sa mga bagong library ng CSS tulad ng Tailwind CSS, ang Bootstrap ay nagdaragdag din ngayon ng isang library ng utility. Sinabi ng koponan ng bootstrap na nasisiyahan silang makita kung paano hinahamon ng iba pang mga developer ang paraan na binuo namin sa web para sa huling dekada.

Ang mga utility ay nakakakuha ng momentum sa pamayanan ng pag-unlad at napansin ng koponan ng bootstrap. Ang koponan ay naunang nagdagdag ng pagkakaloob para sa mga kagamitan sa v4 gamit ang pandaigdigan $ paganahin- * mga klase. Sa v5, nagbago sila sa isang diskarte sa API at isang bagong wika at syntax sa Sass. Bibigyan ka nito ng kapangyarihan na lumikha ng mga bagong kagamitan habang nagagawa mong alisin o baguhin ang mga ibinigay na default.

Bilang isang paraan upang makapagbigay ng mas mahusay na samahan, ang ilang mga kagamitan na nasa v4 ay inilipat sa seksyon ng Mga Katulong.

7. Bagong Bootstrap Icon Library

Ipinagmamalaki ngayon ng Bootstrap ang sarili nitong bukas na mapagkukunan ng SVG icon library na may higit sa 1,300 mga icon. Pasadyang ginawa ito para sa mga bahagi ng balangkas ngunit maaari mo pa rin silang gumana sa anumang proyekto.

Dahil sa mga ito ay mga imahe ng SVG, maaari silang mabilis na masukat at maipatupad sa maraming paraan at naka-istilo din ng CSS.

Maaari mong mai-install ang mga icon gamit sa itaas ng antas ng dagat:

$ npm i bootstrap-icons

I-install ang Bootstrap 5

Maaari kang pumunta sa Bootstrap 5 opisyal na pahina ng pag-download kung nais mong i-install ito. Kung nais mong subaybayan ang pinakabagong paglabas ng pag-unlad na maaari mong gamitin sa taas ng dagat upang hilahin ito:

$ npm i bootstrap@next

Sa oras ng pagsulat na ito, ang balangkas ay nasa bersyon ng Beta 3 na ito. Nangangahulugan ito na ang software ay ligtas na gamitin ngunit nasa pag-unlad pa rin. Huwag mag-atubiling magbigay ng puna sa koponan at gumawa ng anumang kinakailangang kontribusyon.

Magbahagi Magbahagi Mag-tweet Email Isang Panimula sa Mga Component sa Web at Arkitekturang Nakabatay sa Component

Tingnan natin ang mga karaniwang bahagi ng web at tingnan kung bakit kapaki-pakinabang ang mga ito.

Basahin Susunod
Mga Kaugnay na Paksa
  • Programming
  • Pag-unlad sa Web
  • JavaScript
  • CSS
Tungkol sa May-akda Jerome Davidson(22 Mga Artikulo Na-publish)

Si Jerome ay isang Staff Writer sa MakeUseOf. Saklaw niya ang mga artikulo sa Programming at Linux. Siya rin ay isang taong mahilig sa crypto at palaging pinapanatili ang mga tab sa industriya ng crypto.

Higit pa Mula kay Jerome Davidson

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

natigil ang wifi sa pagkuha ng ip address
Mag-click dito upang mag-subscribe