Bootstrap 5.3.0: Låser op for dens spændende nye funktioner

Bootstrap er et populært front-end framework, der har revolutioneret webudvikling. Med sin seneste udgivelse, Bootstrap 5.3.0, har frameworket introduceret et væld af spændende nye funktioner og forbedringer, der giver dig mulighed for at skabe fantastiske, responsive, funktionsrige websteder og applikationer.

Skift til mørk tilstand

En af de bemærkelsesværdige Bootstrap 5.3.0 tilføjelser er et skifte til mørk tilstand. Denne skift lader brugere af dit websted nemt skifte mellem lys og mørk tilstand, hvilket letter problemfri brug af din hjemmeside eller applikation på tværs af forskellige lysforhold.

For at bruge denne funktion skal du blot tilføje data-bs-toggle="mørk-tilstand" attribut til enhver knap eller et linkelement.

Her er et eksempel:

<knaptype="knap"klasse="btn btn-primær"data-bs-toggle="mørk tilstand">
 Skift mørk tilstand
knap>

Font Scale Utilities

Bootstrap 5.3.0 introducerer et sæt fontskaleringsværktøjer, der giver dig mulighed for hurtigt at justere størrelsen på din tekst baseret på foruddefinerede skalaer uden at skulle

vælg selv specifikke skrifttypeværdier.

Du kan bruge disse værktøjer i kombination med andre Bootstrap-typografiklasser for at opnå skalerbar og ensartet typografi på tværs af dit websted eller din applikation.

Her er et par eksempler på, hvordan du kan bruge fontskaleringsværktøjerne:

<sklasse="fs-1">Dette er den største skriftstørrelses>
<sklasse="fs-2">Dette er en lidt mindre skriftstørrelses>
<sklasse="fs-3">Dette er en medium skriftstørrelses>
<sklasse="fs-4">Dette er en lille skriftstørrelses>
<sklasse="fs-5">Dette er den mindste skriftstørrelses>

Gutter Utilities

En anden ny tilføjelse i Bootstrap 5.3.0 er introduktionen af ​​tagrender. Disse værktøjer gør det nemt at tilføje tagrender mellem kolonner i dit Bootstrap-gitterlayout uden at skulle skrive tilpasset CSS.

Her er et eksempel på, hvordan du kan bruge tagrendeværktøjerne:

<divklasse="række gx-3">
<divklasse="col">Kolonne 1div>
<divklasse="col">Kolonne 2div>
div>

Dette eksempel bruger gx-3 klasse for at tilføje en tagrende på 3 enheder (eller 1,5rem) mellem de to søjler.

Opdaterede formularkontrolelementer

Det formular kontrolelementer i Bootstrap er blevet opdateret i version 5.3.0 for at forbedre konsistens og brugervenlighed. De nye formularkontrolelementer inkluderer opdaterede typografier til afkrydsningsfelter, alternativknapper og valgfelter samt forbedret valideringsfeedback.

Afkrydsningsfelter og radioknapper

Bootstrap 5.3.0 introducerer nye stilarter til afkrydsningsfelter og alternativknapper, der gør dem nemmere at bruge og mere tilgængelige. Det nye design har større hitområder og forbedrede fokusindikatorer, hvilket gør det nemmere for dig at interagere med disse input.

Her er et eksempel på, hvordan du kan bruge de nye afkrydsningsfeltstile:

<divklasse="form-tjek">
<inputklasse="formular-check-input"type="afkrydsningsfelt"værdi=""id="tjek 1">
<etiketklasse="form-check-label"til="tjek 1">Standard afkrydsningsfeltetiket>
div>

Og her er et eksempel på, hvordan du kan bruge de nye alternativknapstile:

<divklasse="form-tjek">
<inputklasse="formular-check-input"type="radio"navn="eksempelRadios"id="radio1"værdi="Mulighed 1">
<etiketklasse="form-check-label"til="radio1"> Mulighed 1 etiket>
div>

Bemærk, hvordan denne markering bruger .form-check-input klasse for at style selve input-elementet og .form-check-label klasse for at style etiketten.

Vælg Bokser

Udvalgte bokse er også blevet opdateret i Bootstrap 5.3.0 med nye stilarter for bedre konsistens og brugervenlighed. De nye udvalgte boks-stile har større hitområder og forbedrede fokusindikatorer, hvilket gør det nemmere for dig at interagere med disse input.

Her er et eksempel på, hvordan du kan bruge de nye markeringsbokse:

<Vælgklasse="form-vælg"aria-mærke="Standardvalgseksempel">
<mulighedvalgte>Åbn denne valgmenumulighed>
<mulighedværdi="1">Enmulighed>
<mulighedværdi="2">Tomulighed>
<mulighedværdi="3">Tremulighed>
Vælg>

Læg mærke til, hvordan du kan bruge .form-vælg klasse for at style selve select-boksen.

Valideringsfeedback

Bootstrap 5.3.0 introducerer også nye valideringsfeedbackstile til formularkontrolelementer. Disse stilarter gør det nemmere at give visuel feedback til dine webstedsbrugere, når de udfylder en formular forkert.

Her er et eksempel på, hvordan du kan bruge de nye valideringsstile:

<divklasse="form-gruppe">
<etikettil="eksempelInputPassword1">Adgangskodeetiket>
<inputtype="adgangskode"klasse="form-kontrol er-ugyldig"id="eksempelInputPassword1"pladsholder="Adgangskode"påkrævet>
<divklasse="ugyldig-feedback"> Angiv venligst en gyldig adgangskode. div>
div>

Læg mærke til, hvordan .er ugyldig klasse angiver, at inputfeltet er ugyldigt, og .ugyldig-feedback klasse viser en besked til brugeren.

Med disse nye stilarter er det nemmere end nogensinde før at skabe tilgængelige og konsistente formularer til dit websted eller din applikation.

Spændende forbedringer i Bootstrap 5.3.0

Bootstrap 5.3.0 er en væsentlig opdatering til den populære CSS-ramme, der bringer flere nye funktioner og forbedringer til bordet. Fra den mørke tilstandsskifte til skrifttypeskala-værktøjer og gutter-værktøjer, er der masser af nye værktøjer til din rådighed for at hjælpe dig med at bygge bedre websteder og applikationer.