Home-theater-designers
Bootstrap 5 ha comportat canvis importants, inclosa la caiguda del suport a Internet Explorer (IE) i la dependència de jQuery. Desenvolupat per Twitter, Bootstrap és el marc CSS més popular del món. El marc de la interfície d’usuari de codi obert busca posicionar-se per al futur, i això l’ha vist fer canvis innovadors a v5.
La caiguda de Bootstrap per IE l’ha convertit en la primera eina de desenvolupament web que ho fa. El pas es produeix a mesura que la quota de mercat d’Internet Explorer continua disminuint, representant menys del 3% de tots els navegadors web.
Seguiu llegint per veure quines millores s'han fet a Bootstrap i com us afecten.
1. Suport jQuery
Bootstrap deixarà d'utilitzar la biblioteca jQuery. En canvi, l’equip de desenvolupament ha millorat la biblioteca JavaScript per efectuar aquest canvi. La dependència de jQuery no era necessàriament una cosa dolenta a Bootstrap.
De fet, la introducció de jQuery va canviar radicalment l’ús de JavaScript. Simplificava les tasques d’escriptura en JavaScript que d’una altra manera haurien suposat moltes línies de codi.
Relacionat: Obteniu informació sobre com es crea un element a jQuery
Malgrat tot, l'equip ha decidit acabar amb això. Això comporta l'avantatge de tenir fitxers font més petits i un temps de càrrega de la pàgina més alt. Aquest va ser un canvi molt necessari, que farà que Bootstrap guanyi un estil més favorable al futur.
La mida del fitxer font s’ha reduït en 85 KB de JavaScript reduït, i això és clau, ja que Google considera els temps de càrrega de pàgines dels llocs mòbils com un factor de classificació.
Per més que l'ús de jQuery ja no sigui necessari a Bootstrap 5, podeu utilitzar-lo si voleu. També val la pena assenyalar que tots els connectors de JavaScript continuen disponibles.
2. Propietats personalitzades CSS
En deixar de banda el suport d’Internet Explorer, es poden utilitzar propietats CSS (variables) personalitzades. IE no admet propietats personalitzades, només una de les raons per les quals va retenir els desenvolupadors web durant molt de temps.
Les propietats personalitzades de CSS fan que CSS sigui més flexible i programable. Les variables CSS es prefixen amb -bs per evitar conflictes amb tercers CSS.
Hi ha dos tipus de variables disponibles: variables arrel i variables de components.
Es pot accedir a les variables arrel allà on es carregui Bootstrap CSS. Aquestes variables es troben a _arrel.scss i formen part dels fitxers dist compilats.
Les variables de components s’utilitzen com a variables locals en components particulars. Són útils per evitar l’herència accidental d’estils en components com les taules imbricades.
3. Sistema de quadrícula millorat
Com que hi va haver alguns problemes en actualitzar-se de la versió 3 a la 4, Bootstrap 5 conserva la major part del sistema aquesta vegada, basant-se en el sistema existent en lloc de canviar-lo completament. Alguns dels canvis són:
- La classe de canaletes ( .nois ) s'ha substituït per una utilitat ( .g * ) s’assembla molt al marge i al farciment
- També s'han inclòs classes d'espaiat vertical
- Les columnes ja no estan predeterminades posició: relativa
4. Documentació millorada
La documentació s’ha millorat amb més informació, sobretot quan es tracta de personalització. Un problema habitual era que, amb molts llocs que utilitzen Bootstrap, podríeu identificar immediatament que feia servir Bootstrap. Bootstrap 5 ara inclou un nou aspecte i una millor personalització.
Ara hi ha més flexibilitat per personalitzar els temes de manera que no tots els llocs o aplicacions tinguin la mateixa semblança. La pàgina de temàtica v4 en realitat s’ha ampliat amb més contingut i fragments de codi per construir sobre els fitxers Sass (el popular preprocessador CSS). També podeu trobar un projecte Starter npm a la plataforma GitHub que està disponible com a dipòsit de plantilles.
La paleta de colors també s'ha ampliat a la versió 5. El sistema de colors integrat ampliat implica que podeu dissenyar fàcilment el color sense haver de deixar la base de codis. També s’ha treballat més per millorar el contrast de color, inclosa l’addició de mètriques de contrast de color als documents de color Bootstrap.
5. Controls de formulari millorats
Bootstrap ha millorat els seus controls de formulari, grups d’entrada i molt més.
A v4, Bootstrap feia servir controls de formulari personalitzats, a més dels valors predeterminats proporcionats per cada navegador. A la v5, ara tots estan personalitzats. Tots els botons d’opció, caselles de selecció, fitxers, abast i molt més per donar-los el mateix aspecte i comportament en diferents navegadors.
Els nous controls de formulari ja no contenen marques de colors innecessàries, sinó que se centren en les funcions de disseny lògic i estàndard.
6. Bootstrap 5 Adds Utilities API
Després de noves biblioteques CSS com Tailwind CSS, Bootstrap ara també afegeix una biblioteca d'utilitat. L’equip d’arrencada afirma que està content de veure com altres desenvolupadors desafien la manera com hem creat al web durant l’última dècada.
Les utilitats estan guanyant força a la comunitat de desenvolupament i l’equip d’arrencada se n’ha adonat. Anteriorment, l’equip havia afegit provisió per a les utilitats de v4 mitjançant global $ enable- * classes. A la v5, han canviat a un enfocament API i a un nou llenguatge i sintaxi a Sass. Això us donarà la possibilitat de crear noves utilitats mentre pugueu eliminar o modificar els valors predeterminats indicats.
Com a manera de proporcionar una millor organització, algunes de les utilitats que hi havia a v4 s’han mogut a la secció Helpers.
7. Nova biblioteca d'icones Bootstrap
Bootstrap ara compta amb la seva pròpia biblioteca d’icones de codi obert SVG amb més de 1.300 icones. Està fet a mida per als components del framework, però encara podeu treballar amb ells en qualsevol projecte.
Tenint en compte que són imatges SVG, es poden escalar ràpidament i es poden implementar de moltes maneres i també amb un estil CSS.
Podeu instal·lar les icones mitjançant sobre el nivell del mar:
$ npm i bootstrap-iconsInstal·leu Bootstrap 5
Podeu anar al Pàgina oficial de descàrrega de Bootstrap 5 si voleu instal·lar-lo. Si voleu estar al corrent de l'última versió de desenvolupament, podeu utilitzar-la sobre el nivell del mar per tirar-lo:
$ npm i bootstrap@next
En el moment d’escriure aquest article, el framework es troba en la seva versió Beta 3. Això vol dir que el programari és segur d’utilitzar però encara està en desenvolupament. No dubteu a donar comentaris a l’equip i fer qualsevol contribució necessària.
Compartir Compartir Tweet Correu electrònic Introducció als components web i l'arquitectura basada en componentsFem una ullada als components web més habituals i vegem per què són útils.
Llegiu a continuació Temes relacionats- Programació
- Desenvolupament web
- JavaScript
- CSS
Jerome és escriptor de personal de MakeUseOf. Cobreix articles sobre programació i Linux. També és un entusiasta de la criptografia i manté sempre al dia la indústria de la criptografia.
Més de Jerome DavidsonSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
és segura l’aplicació d’efectiuFeu clic aquí per subscriure-us