{"id":91381,"date":"2022-10-11T19:10:35","date_gmt":"2022-10-12T00:10:35","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/7-nya-funktioner-att-halla-utkik-efter-i-bootstrap-5\/"},"modified":"2022-10-11T19:10:35","modified_gmt":"2022-10-12T00:10:35","slug":"7-nya-funktioner-att-halla-utkik-efter-i-bootstrap-5","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/7-nya-funktioner-att-halla-utkik-efter-i-bootstrap-5\/","title":{"rendered":"7 nya funktioner att h\u00e5lla utkik efter i Bootstrap 5"},"content":{"rendered":"
\n

Bootstrap 5 har kommit med stora f\u00f6r\u00e4ndringar, inklusive minskningen av st\u00f6d f\u00f6r Internet Explorer (IE) och jQuery-beroende. Bootstrap \u00e4r utvecklat av Twitter och \u00e4r v\u00e4rldens mest popul\u00e4ra CSS-ramverk. Ramverket f\u00f6r anv\u00e4ndargr\u00e4nssnitt med \u00f6ppen k\u00e4llkod tittar p\u00e5 att positionera sig f\u00f6r framtiden, och detta har sett det g\u00f6ra banbrytande f\u00f6r\u00e4ndringar i v5.<\/p>\n

Bootstraps droppe f\u00f6r IE har gjort det till det f\u00f6rsta webbutvecklingsverktyget som g\u00f6r detta. Flytten kommer n\u00e4r Internet Explorers marknadsandel forts\u00e4tter att minska och st\u00e5r f\u00f6r mindre \u00e4n 3 % av alla webbl\u00e4sare.<\/p>\n

L\u00e4s vidare f\u00f6r att se vilka fler f\u00f6rb\u00e4ttringar som har gjorts av Bootstrap och hur de p\u00e5verkar dig.<\/p>\n

<\/span> 1. jQuery Support<\/span><\/h2>\n

Bootstrap kommer inte l\u00e4ngre att anv\u00e4nda jQuery-biblioteket. Utvecklingsteamet har ist\u00e4llet f\u00f6rb\u00e4ttrat JavaScript-biblioteket f\u00f6r att genomf\u00f6ra denna f\u00f6r\u00e4ndring. jQuery-beroendet var inte n\u00f6dv\u00e4ndigtvis en d\u00e5lig sak i Bootstrap.<\/p>\n

Faktum \u00e4r att introduktionen av jQuery radikalt f\u00f6r\u00e4ndrade hur JavaScript anv\u00e4ndes. Det f\u00f6renklade skrivuppgifter i JavaScript som annars skulle ha tagit m\u00e5nga rader kod.<\/p>\n

Trots allt detta har laget beslutat att g\u00f6ra sig av med det. Detta kommer med f\u00f6rdelen av mindre k\u00e4llfiler och h\u00f6gre sidladdningstider. Detta var en v\u00e4lbeh\u00f6vlig f\u00f6r\u00e4ndring som kommer att se Bootstrap f\u00e5 en mer framtidsv\u00e4nlig stil.<\/p>\n

K\u00e4llfilens storlek har blivit mindre med 85 KB minifierad JavaScript, och detta \u00e4r nyckeln eftersom Google betraktar sidladdningstider f\u00f6r mobilwebbplatser som en rankningsfaktor.<\/p>\n

S\u00e5 mycket som anv\u00e4ndningen av jQuery inte l\u00e4ngre beh\u00f6vs i Bootstrap 5, kan du fortfarande anv\u00e4nda den om du vill. Det \u00e4r ocks\u00e5 v\u00e4rt att notera att alla JavaScript-plugins f\u00f6rblir tillg\u00e4ngliga.<\/p>\n

<\/span> 2. Anpassade CSS-egenskaper<\/span><\/h2>\n

Genom att avbryta Internet Explorer-st\u00f6det kan anpassade CSS-egenskaper (variabler) anv\u00e4ndas. IE st\u00f6der inte anpassade egenskaper \u2013 bara en anledning till att det h\u00f6ll tillbaka webbutvecklare under l\u00e5ng tid.<\/p>\n

Anpassade CSS-egenskaper g\u00f6r CSS mer flexibel och programmerbar. CSS-variabler har prefix -bs <\/strong>f\u00f6r att f\u00f6rhindra konflikt med tredje parts CSS.<\/p>\n

Det finns tv\u00e5 typer av variabler tillg\u00e4ngliga: rotvariabler och komponentvariabler.<\/p>\n

Rotvariabler kan n\u00e5s varhelst Bootstrap CSS laddas. Dessa variabler finns i _root.scss <\/strong>fil och \u00e4r en del av de kompilerade dist-filerna.<\/p>\n

Komponentvariabler anv\u00e4nds som lokala variabler i vissa komponenter. De \u00e4r anv\u00e4ndbara f\u00f6r att undvika oavsiktlig arv av stilar i komponenter som kapslade tabeller.<\/p>\n

<\/span> 3. F\u00f6rb\u00e4ttrat Grid System<\/span><\/h2>\n
\n<\/figure>\n

Eftersom det fanns n\u00e5gra problem med att uppgradera fr\u00e5n version 3 till 4, beh\u00e5ller Bootstrap 5 huvuddelen av systemet den h\u00e4r g\u00e5ngen och bygger vidare p\u00e5 det befintliga systemet ist\u00e4llet f\u00f6r att helt \u00e4ndra det. N\u00e5gra av \u00e4ndringarna \u00e4r:<\/p>\n

R\u00e4nnstensklassen (.r\u00e4nna<\/strong>) har ersatts till ett verktyg (.g*<\/strong>) ungef\u00e4r som marginalen och utfyllnadsklasserna Vertikala avst\u00e5ndsklasser har ocks\u00e5 inkluderats. Kolumner \u00e4r inte l\u00e4ngre standardinst\u00e4llda till position:sl\u00e4kting<\/strong> <\/p>\n

<\/span> 4. F\u00f6rb\u00e4ttrad dokumentation<\/span><\/h2>\n

Dokumentationen har ut\u00f6kats med mer information, s\u00e4rskilt n\u00e4r det g\u00e4ller anpassning. Ett vanligt problem var att med m\u00e5nga webbplatser som anv\u00e4nder Bootstrap, kunde du omedelbart identifiera att den anv\u00e4nde Bootstrap. Bootstrap 5 kommer nu med ett nytt utseende och k\u00e4nsla och med b\u00e4ttre anpassning.<\/p>\n

Det finns nu mer flexibilitet att anpassa dina teman s\u00e5 att inte alla webbplatser eller appar har samma likhet. Temasidan f\u00f6r v4 har faktiskt ut\u00f6kats med mer inneh\u00e5ll och kodavsnitt f\u00f6r att bygga ovanp\u00e5 Sass-filer (den popul\u00e4ra CSS-f\u00f6rprocessorn). Du kan ocks\u00e5 hitta ett startande npm-projekt p\u00e5 GitHub-plattformen som \u00e4r tillg\u00e4ngligt som ett malllager.<\/p>\n

F\u00e4rgpaletten har \u00e4ven ut\u00f6kats i version 5. Det ut\u00f6kade inbyggda f\u00e4rgsystemet inneb\u00e4r att du enkelt kan styla din f\u00e4rgs\u00e4ttning utan att beh\u00f6va l\u00e4mna din kodbas. Mer arbete har ocks\u00e5 gjorts f\u00f6r att f\u00f6rb\u00e4ttra f\u00e4rgkontrasten, inklusive till\u00e4gget av ett f\u00e4rgkontrastm\u00e5tt i Bootstrap-f\u00e4rgdokumenten.<\/p>\n

<\/span> 5. F\u00f6rb\u00e4ttrade formul\u00e4rkontroller<\/span><\/h2>\n

Bootstrap har f\u00f6rb\u00e4ttrat sina formul\u00e4rkontroller, inmatningsgrupper och mer.<\/p>\n

I v4 anv\u00e4nde Bootstrap anpassade formul\u00e4rkontroller ut\u00f6ver standardinst\u00e4llningarna som tillhandah\u00e5lls av varje webbl\u00e4sare. I v5 \u00e4r alla nu anpassade. Alla alternativknappar, kryssrutor, filer, intervall och mer f\u00f6r att ge dem samma utseende och beteende i olika webbl\u00e4sare.<\/p>\n

De nya formul\u00e4rkontrollerna inneh\u00e5ller inte l\u00e4ngre on\u00f6diga f\u00e4rgstarka markeringar, utan fokuserar ist\u00e4llet p\u00e5 de vanliga och logiska designfunktionerna.<\/p>\n

<\/span> 6. Bootstrap 5 l\u00e4gger till Utilities API<\/span><\/h2>\n

Efter nya CSS-bibliotek som Tailwind CSS, l\u00e4gger Bootstrap nu ocks\u00e5 till ett verktygsbibliotek. Bootstrap-teamet s\u00e4ger att de \u00e4r glada \u00f6ver att se hur andra utvecklare \u201cutmanar s\u00e4ttet vi har byggt p\u00e5 webben under det senaste decenniet plus. \u201d<\/p>\n

Verktygen tar fart i utvecklingssamh\u00e4llet och bootstrap-teamet har lagt m\u00e4rke till det. Teamet hade tidigare lagt till best\u00e4mmelser f\u00f6r verktyg i v4 med global $enable-*<\/strong> klasser. I v5 har de bytt till ett API-uppl\u00e4gg och ett nytt spr\u00e5k och syntax i Sass. Detta ger dig m\u00f6jlighet att skapa nya verktyg samtidigt som du kan ta bort eller \u00e4ndra standardinst\u00e4llningarna.<\/p>\n

Som ett s\u00e4tt att ge b\u00e4ttre organisation har n\u00e5gra verktyg som fanns i v4 flyttats till avsnittet Hj\u00e4lpare.<\/p>\n

<\/span> 7. Nytt Bootstrap Icon Library<\/span><\/h2>\n
\n<\/figure>\n

Bootstrap har nu sitt eget SVG-ikonbibliotek med \u00f6ppen k\u00e4llkod med \u00f6ver 1 300 ikoner. Det \u00e4r skr\u00e4ddarsytt f\u00f6r ramverkets komponenter men du kan fortfarande arbeta med dem i alla projekt.<\/p>\n

Med tanke p\u00e5 att de \u00e4r SVG-bilder kan de snabbt skalas och kan implementeras p\u00e5 m\u00e5nga s\u00e4tt och \u00e4ven stylas med CSS.<\/p>\n

Du kan installera ikonerna med npm:<\/strong><\/p>\n

$\u00a0npm i bootstrap-icons<\/pre>\n
<\/span>  Installera Bootstrap 5<\/span><\/h2>\n
Du kan g\u00e5 till den officiella nedladdningssidan f\u00f6r Bootstrap 5 om du vill installera den.  Om du vill h\u00e5lla dig \u00e0 jour med den senaste utvecklingsversionen kan du anv\u00e4nda npm <\/strong> att dra den:<\/p>\n
$ npm i [email\u00a0protected]<\/a><\/pre>\n
N\u00e4r detta skrivs \u00e4r ramverket i sin Beta 3-version.  Det betyder att programvaran \u00e4r s\u00e4ker att anv\u00e4nda men fortfarande under utveckling.  K\u00e4nna free att ge feedback till teamet och g\u00f6ra alla n\u00f6dv\u00e4ndiga bidrag.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Jerome Davidson (33 artiklar publicerade)
<\/strong><\/p>\n
Jerome \u00e4r personalskribent p\u00e5 MakeUseOf.  Han t\u00e4cker artiklar om programmering och Linux.  Han \u00e4r ocks\u00e5 en kryptoentusiast och h\u00e5ller alltid koll p\u00e5 kryptoindustrin.<\/p>\n
                            Mer fr\u00e5n Jerome Davidson<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n