Bootstrap 5.3.0: Låser opp de spennende nye funksjonene

Bootstrap er et populært front-end-rammeverk som har revolusjonert nettutvikling. Med sin siste utgivelse, Bootstrap 5.3.0, har rammeverket introdusert et vell av spennende nye funksjoner og forbedringer som gir deg mulighet til å lage fantastiske, responsive, funksjonsrike nettsteder og applikasjoner.

Veksle mellom mørk modus

En av de bemerkelsesverdige Bootstrap 5.3.0 tillegg er en bryter for mørk modus. Denne bryteren lar brukere av nettstedet ditt enkelt bytte mellom lys og mørk modus, noe som letter sømløs bruk av nettstedet eller applikasjonen din på tvers av ulike lysforhold.

For å bruke denne funksjonen, legg til data-bs-toggle="dark-mode" attributt til en hvilken som helst knapp eller lenkeelement.

Her er et eksempel:

<knapptype="knapp"klasse="btn btn-primær"data-bs-toggle="mørk modus">
 Slå av/på mørk modus
knapp>

Font Scale Utilities

Bootstrap 5.3.0 introduserer et sett med fontskaleringsverktøy som lar deg raskt justere størrelsen på teksten din basert på forhåndsdefinerte skalaer, uten å måtte

velg spesifikke skriftverdier selv.

Du kan bruke disse verktøyene i kombinasjon med andre Bootstrap-typografiklasser for å oppnå skalerbar og konsistent typografi på tvers av nettstedet eller applikasjonen din.

Her er noen eksempler på hvordan du kan bruke fontskaleringsverktøyene:

<sklasse="fs-1">Dette er den største skriftstørrelsens>
<sklasse="fs-2">Dette er en litt mindre skriftstørrelses>
<sklasse="fs-3">Dette er en middels skriftstørrelses>
<sklasse="fs-4">Dette er en liten skriftstørrelses>
<sklasse="fs-5">Dette er den minste skriftstørrelsens>

Gutter Utilities

Et annet nytt tillegg i Bootstrap 5.3.0 er introduksjonen av takrenneverktøy. Disse verktøyene gjør det enkelt å legge til takrenner mellom kolonnene i Bootstrap-rutenettoppsettet ditt uten å måtte skrive tilpasset CSS.

Her er et eksempel på hvordan du kan bruke takrenneverktøyene:

<divklasse="rad gx-3">
<divklasse="col">Kolonne 1div>
<divklasse="col">Kolonne 2div>
div>

Dette eksemplet bruker gx-3 klasse for å legge til en renne på 3 enheter (eller 1,5rem) mellom de to søylene.

Oppdaterte skjemakontroller

De skjemakontroller i Bootstrap har blitt oppdatert i versjon 5.3.0 for å forbedre konsistensen og brukervennligheten. De nye skjemakontrollene inkluderer oppdaterte stiler for avmerkingsbokser, alternativknapper og utvalgsbokser, samt forbedret valideringstilbakemelding.

Avmerkingsbokser og radioknapper

Bootstrap 5.3.0 introduserer nye stiler for avmerkingsbokser og alternativknapper som gjør dem enklere å bruke og mer tilgjengelige. Den nye designen har større treffområder og forbedrede fokusindikatorer, noe som gjør det lettere for deg å samhandle med disse inngangene.

Her er et eksempel på hvordan du kan bruke de nye avmerkingsboksstilene:

<divklasse="skjemasjekk">
<inputklasse="skjema-sjekk-inndata"type="avmerkingsboks"verdi=""id="sjekk1">
<merkelappklasse="skjema-sjekk-etikett"til="sjekk1">Standard avmerkingsboksmerkelapp>
div>

Og her er et eksempel på hvordan du kan bruke de nye alternativknappstilene:

<divklasse="skjemasjekk">
<inputklasse="skjema-sjekk-inndata"type="radio"Navn="eksempelradioer"id="radio1"verdi="valg 1">
<merkelappklasse="skjema-sjekk-etikett"til="radio1"> valg 1 merkelapp>
div>

Legg merke til hvordan denne markeringen bruker .skjema-sjekk-inndata klasse for å style selve inngangselementet, og .form-check-label klasse for å style etiketten.

Velg Bokser

Utvalgte bokser har også blitt oppdatert i Bootstrap 5.3.0 med nye stiler for bedre konsistens og brukervennlighet. De nye utvalgte boksstilene har større treffområder og forbedrede fokusindikatorer, noe som gjør det lettere for deg å samhandle med disse inngangene.

Her er et eksempel på hvordan du kan bruke de nye valgboksstilene:

<plukke utklasse="form-velg"aria-etikett="Standard valg eksempel">
<alternativvalgt>Åpne denne valgmenyenalternativ>
<alternativverdi="1">Enalternativ>
<alternativverdi="2">Toalternativ>
<alternativverdi="3">Trealternativ>
plukke ut>

Legg merke til hvordan du kan bruke .form-select klasse for å style selve select-boksen.

Valideringstilbakemelding

Bootstrap 5.3.0 introduserer også nye tilbakemeldingsstiler for validering for skjemakontroller. Disse stilene gjør det lettere å gi visuell tilbakemelding til brukerne av nettstedet ditt når de fyller ut et skjema på feil måte.

Her er et eksempel på hvordan du kan bruke de nye valideringsstilene:

<divklasse="form-gruppe">
<merkelapptil="exampleInputPassword1">Passordmerkelapp>
<inputtype="passord"klasse="skjemakontroll er ugyldig"id="exampleInputPassword1"plassholder="Passord"nødvendig>
<divklasse="ugyldig tilbakemelding"> Vennligst oppgi et gyldig passord. div>
div>

Legg merke til hvordan .er ugyldig klasse indikerer at inndatafeltet er ugyldig, og .invalid-feedback klasse viser en melding til brukeren.

Med disse nye stilene er det enklere enn noen gang å lage tilgjengelige og konsistente skjemaer for nettstedet eller applikasjonen din.

Spennende forbedringer i Bootstrap 5.3.0

Bootstrap 5.3.0 er en betydelig oppdatering av det populære CSS-rammeverket som bringer flere nye funksjoner og forbedringer til bordet. Fra mørk modus-veksling til fontskaleringsverktøy og gutter-verktøy, det er mange nye verktøy til din disposisjon for å hjelpe deg med å bygge bedre nettsteder og applikasjoner.