Home-theater-designers
Bootstrap 5 heeft grote veranderingen ondergaan, waaronder het wegvallen van ondersteuning voor Internet Explorer (IE) en jQuery-afhankelijkheid. Bootstrap, ontwikkeld door Twitter, is 's werelds populairste CSS-framework. Het open-source raamwerk voor gebruikersinterfaces probeert zichzelf te positioneren voor de toekomst, en dit heeft geleid tot baanbrekende veranderingen in v5.
De daling van Bootstrap voor IE heeft ervoor gezorgd dat het de eerste tool voor webontwikkeling is die dit doet. De verhuizing komt op het moment dat het marktaandeel van Internet Explorer blijft slinken, goed voor minder dan 3% van alle webbrowsers.
Lees verder om te zien welke verbeteringen er nog meer zijn aangebracht aan Bootstrap en welke invloed deze op u hebben.
1. jQuery-ondersteuning
Bootstrap zal niet langer de jQuery-bibliotheek gebruiken. Het ontwikkelteam heeft in plaats daarvan de JavaScript-bibliotheek verbeterd om deze wijziging door te voeren. De jQuery-afhankelijkheid was niet per se een slechte zaak in Bootstrap.
In feite heeft de introductie van jQuery de manier waarop JavaScript werd gebruikt radicaal veranderd. Het vereenvoudigde schrijftaken in JavaScript die anders veel regels code zouden hebben gekost.
Verwant: Leer hoe u een element in jQuery maakt
Ondanks dit alles heeft het team besloten om ermee te stoppen. Dit komt met het voordeel van kleinere bronbestanden en hogere laadtijden van pagina's. Dit was een broodnodige verandering waardoor Bootstrap een meer toekomstvriendelijke stijl krijgt.
De grootte van het bronbestand is kleiner geworden met 85 KB geminimaliseerde JavaScript, en dit is van cruciaal belang omdat Google de laadtijden van pagina's voor mobiele sites als een rangschikkingsfactor beschouwt.
Hoewel het gebruik van jQuery niet langer nodig is in Bootstrap 5, kunt u het nog steeds gebruiken als u dat wilt. Het is ook vermeldenswaard dat alle JavaScript-plug-ins beschikbaar blijven.
2. Aangepaste CSS-eigenschappen
Door Internet Explorer-ondersteuning te laten vallen, kunnen aangepaste CSS-eigenschappen (variabelen) worden gebruikt. IE ondersteunt geen aangepaste eigenschappen - slechts één reden waarom het webontwikkelaars lange tijd tegenhield.
Aangepaste CSS-eigenschappen maken CSS flexibeler en programmeerbaarder. CSS-variabelen worden voorafgegaan door -bs om conflicten met CSS van derden te voorkomen.
Er zijn twee soorten variabelen beschikbaar: hoofdvariabelen en componentvariabelen.
Rootvariabelen zijn overal toegankelijk waar Bootstrap CSS is geladen. Deze variabelen bevinden zich in de _root.scss bestand en maken deel uit van de gecompileerde dist-bestanden.
Componentvariabelen worden gebruikt als lokale variabelen in bepaalde componenten. Ze zijn handig om onbedoelde overerving van stijlen in componenten zoals geneste tabellen te voorkomen.
3. Verbeterd rastersysteem
Omdat er enkele problemen waren met het upgraden van versie 3 naar 4, behoudt Bootstrap 5 dit keer het grootste deel van het systeem, voortbouwend op het bestaande systeem in plaats van het volledig te veranderen. Enkele van de wijzigingen zijn:
- De goot klasse ( .jongens ) is vervangen door een hulpprogramma ( .G* ) net als de marge en opvulling
- Verticale afstandsklassen zijn ook opgenomen
- Kolommen zijn niet langer standaard ingesteld op positie:relatief
4. Verbeterde documentatie
De documentatie is uitgebreid met meer informatie, vooral als het gaat om maatwerk. Een veelvoorkomend probleem was dat bij veel sites die Bootstrap gebruiken, je meteen kon zien dat het Bootstrap gebruikte. Bootstrap 5 wordt nu geleverd met een nieuwe look en feel, en met betere aanpassingsmogelijkheden.
Er is nu meer flexibiliteit om uw thema's aan te passen, zodat niet elke site of app dezelfde gelijkenis vertoont. De v4-themapagina is eigenlijk uitgebreid met meer inhoud en codefragmenten om bovenop Sass-bestanden (de populaire CSS-preprocessor) te bouwen. Je kunt ook een starters-npm-project vinden op het GitHub-platform dat beschikbaar is als een sjabloonrepository.
Het kleurenpalet is ook uitgebreid in versie 5. Het uitgebreide ingebouwde kleurensysteem houdt in dat je je kleuring gemakkelijk kunt stylen zonder dat je je codebase hoeft te verlaten. Er is ook meer werk verzet om het kleurcontrast te verbeteren, inclusief de toevoeging van kleurcontraststatistieken in de Bootstrap-kleurdocumenten.
5. Verbeterde formulierbesturing
Bootstrap heeft de formulierbesturingselementen, invoergroepen en meer verbeterd.
In v4 gebruikte Bootstrap aangepaste formulierbesturingselementen naast de standaardinstellingen van elke browser. In v5 zijn deze nu allemaal aangepast. Alle keuzerondjes, selectievakjes, bestanden, bereik en meer om ze hetzelfde uiterlijk en gedrag te geven in verschillende browsers.
De nieuwe formulierbesturingselementen bevatten niet langer onnodige kleurrijke opmaak, maar richten zich in plaats daarvan op de standaard en logische ontwerpkenmerken.
6. Bootstrap 5 voegt Utilities API toe
In navolging van nieuwe CSS-bibliotheken zoals Tailwind CSS, voegt Bootstrap nu ook een hulpprogrammabibliotheek toe. Het bootstrap-team zegt dat ze blij zijn te zien hoe andere ontwikkelaars de manier waarop we de afgelopen tien jaar op internet hebben gebouwd, uitdagen.
Hulpprogramma's winnen aan kracht in de ontwikkelingsgemeenschap en het bootstrap-team heeft dit opgemerkt. Het team had eerder voorzieningen voor hulpprogramma's in v4 toegevoegd met behulp van global $inschakelen-* klassen. In v5 zijn ze veranderd in een API-aanpak en een nieuwe taal en syntaxis in Sass. Dit geeft u de mogelijkheid om nieuwe hulpprogramma's te maken terwijl u de opgegeven standaardinstellingen nog steeds kunt verwijderen of wijzigen.
Als een manier om de organisatie beter te organiseren, zijn sommige hulpprogramma's in v4 verplaatst naar de sectie Helpers.
7. Nieuwe Bootstrap-pictogrambibliotheek
Bootstrap beschikt nu over een eigen open source SVG-pictogrambibliotheek met meer dan 1.300 pictogrammen. Het is op maat gemaakt voor de componenten van het raamwerk, maar je kunt er nog steeds mee werken aan elk project.
Aangezien het SVG-afbeeldingen zijn, kunnen ze snel worden geschaald en op vele manieren worden geïmplementeerd en ook worden gestyled met CSS.
U kunt de pictogrammen installeren met boven zeeniveau:
$ npm i bootstrap-iconsInstalleer Bootstrap 5
U kunt naar de Bootstrap 5 officiële downloadpagina als u deze wilt installeren. Als u op de hoogte wilt blijven van de nieuwste ontwikkelingsrelease die u kunt gebruiken boven zeeniveau om het te trekken:
$ npm i bootstrap@next
Op het moment van schrijven bevindt het framework zich in de Beta 3-versie. Dit betekent dat de software veilig te gebruiken is, maar nog in ontwikkeling is. Voel je vrij om feedback te geven aan het team en een eventuele bijdrage te leveren.
Deel Deel Tweeten E-mail Een inleiding tot webcomponenten en op componenten gebaseerde architectuurLaten we eens kijken naar veelvoorkomende webcomponenten en kijken waarom ze nuttig zijn.
Lees volgende Gerelateerde onderwerpen- Programmeren
- Webontwikkeling
- JavaScript
- CSS
Jerome is een stafschrijver bij MakeUseOf. Hij behandelt artikelen over programmeren en Linux. Hij is ook een crypto-enthousiasteling en houdt de crypto-industrie altijd in de gaten.
Meer van Jerome DavidsonAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
verwijder pagina-einde in wordKlik hier om je te abonneren