Bootstrap 5.3.0: Sen jännittävien uusien ominaisuuksien avaaminen

Bootstrap on suosittu etupään kehys, joka on mullistanut verkkokehityksen. Uusimmalla Bootstrap 5.3.0 -julkaisulla kehys on tuonut käyttöön runsaasti jännittäviä uusia ominaisuuksia ja parannuksia, jotka antavat sinulle mahdollisuuden luoda upeita, responsiivisia ja monipuolisia verkkosivustoja ja sovelluksia.

Tumman tilan vaihto

Yksi huomionarvoisista Bootstrap 5.3.0 lisäyksiä on kytkin tumma tila. Tämän vaihdon avulla verkkosivustosi käyttäjät voivat vaihtaa vaivattomasti vaalean ja pimeän tilan välillä, mikä helpottaa verkkosivustosi tai sovelluksesi saumatonta käyttöä erilaisissa valaistusolosuhteissa.

Voit käyttää tätä ominaisuutta lisäämällä data-bs-toggle="dark-mode" attribuutti mille tahansa painikkeelle tai linkkielementille.

Tässä on esimerkki:

<-painikettatyyppi="painike"luokkaa="btn btn-primary"data-bs-toggle="tumma tila">
 Tumma tila päälle/pois
-painiketta>

Font Scale Utilities

Bootstrap 5.3.0 sisältää joukon fonttimittakaava-apuohjelmia, joiden avulla voit nopeasti säätää tekstin kokoa ennalta määritettyjen asteikkojen perusteella ilman tarvetta valitse itse tietyt fonttiarvot.

Voit käyttää näitä apuohjelmia yhdessä muiden Bootstrap-typografian luokkien kanssa saavuttaaksesi skaalautuvan ja johdonmukaisen typografian koko verkkosivustollasi tai sovelluksessasi.

Tässä on muutamia esimerkkejä siitä, kuinka voit käyttää kirjasinmittakaava-apuohjelmia:

<sluokkaa="fs-1">Tämä on suurin fonttikokos>
<sluokkaa="fs-2">Tämä on hieman pienempi kirjasinkokos>
<sluokkaa="fs-3">Tämä on keskikokoinen kirjasinkokos>
<sluokkaa="fs-4">Tämä on pieni fonttikokos>
<sluokkaa="fs-5">Tämä on pienin kirjasinkokos>

Gutter Utilities

Toinen uusi lisäys Bootstrap 5.3.0:aan on kouruapuohjelmien käyttöönotto. Nämä apuohjelmat helpottavat kourujen lisäämistä sarakkeiden väliin Bootstrap-ruudukkoasettelussa ilman, että sinun tarvitsee kirjoittaa mukautettua CSS: ää.

Tässä on esimerkki siitä, kuinka voit käyttää kourua:

<divluokkaa="rivi gx-3">
<divluokkaa="col">Sarake 1div>
<divluokkaa="col">Sarake 2div>
div>

Tässä esimerkissä käytetään gx-3 luokkaa lisätäksesi 3 yksikön (tai 1,5 rem) kourun kahden pilarin väliin.

Päivitetyt lomakeohjaimet

The lomakeohjaimet Bootstrapissa on päivitetty versioon 5.3.0 johdonmukaisuuden ja käytettävyyden parantamiseksi. Uudet lomakeohjaimet sisältävät päivitetyt valintaruutujen, valintanappien ja valintaruutujen tyylit sekä parannetun vahvistuspalautteen.

Valintaruudut ja valintapainikkeet

Bootstrap 5.3.0 esittelee uusia tyylejä valintaruuduille ja valintanapeille, jotka tekevät niistä helpompia käyttää ja helpommin saavutettavia. Uudessa suunnittelussa on suuremmat osumaalueet ja parannetut tarkennusilmaisimet, mikä helpottaa näiden tulojen käyttöä.

Tässä on esimerkki siitä, kuinka voit käyttää uusia valintaruututyylejä:

<divluokkaa="lomakkeen tarkistus">
<syöttöluokkaa="lomake-tarkistus-syöttö"tyyppi="valintaruutu"arvo=""id="check1">
<etikettiluokkaa="lomake-check-label"varten="check1">Oletusvalintaruutuetiketti>
div>

Ja tässä on esimerkki siitä, kuinka voit käyttää uusia valintanappityylejä:

<divluokkaa="lomakkeen tarkistus">
<syöttöluokkaa="lomake-tarkistus-syöttö"tyyppi="radio"nimi="esimerkkiRadiot"id="radio1"arvo="Vaihtoehto 1">
<etikettiluokkaa="lomake-check-label"varten="radio1"> Vaihtoehto 1 etiketti>
div>

Huomaa, kuinka tämä merkintä käyttää .form-check-input luokka itse syöttöelementin tyyliin ja .form-check-label luokkaa etiketin tyyliin.

Valitse Laatikot

Bootstrap 5.3.0:ssa valintaruudut on myös päivitetty uusilla tyyleillä johdonmukaisuuden ja käytettävyyden parantamiseksi. Uusissa valintaruututyyleissä on suuremmat osumaalueet ja parannetut tarkennusilmaisimet, mikä helpottaa näiden syötteiden käyttöä.

Tässä on esimerkki siitä, kuinka voit käyttää uusia valintaruututyylejä:

<valitseluokkaa="lomake-valinta"aria-merkki="Oletusvalintaesimerkki">
<vaihtoehtovalittu>Avaa tämä valintavalikkovaihtoehto>
<vaihtoehtoarvo="1">Yksivaihtoehto>
<vaihtoehtoarvo="2">Kaksivaihtoehto>
<vaihtoehtoarvo="3">Kolmevaihtoehto>
valitse>

Huomaa, kuinka voit käyttää .form-select luokkaa itse valintaruudun tyyliin.

Validointipalaute

Bootstrap 5.3.0 tuo myös uusia validointipalautetyylejä lomakehallintaan. Nämä tyylit helpottavat visuaalisen palautteen antamista verkkosivustosi käyttäjille, kun he täyttävät lomakkeen väärin.

Tässä on esimerkki siitä, kuinka voit käyttää uusia vahvistustyylejä:

<divluokkaa="lomakeryhmä">
<etikettivarten="exampleInputPassword1">Salasanaetiketti>
<syöttötyyppi="Salasana"luokkaa="form-control is-invalid"id="exampleInputPassword1"paikanpitäjä="Salasana"edellytetään>
<divluokkaa="virheellinen palaute"> Anna kelvollinen salasana. div>
div>

Huomaa kuinka .ei kelpaa luokka osoittaa, että syöttökenttä on virheellinen, ja .invalid-feedback luokka näyttää viestin käyttäjälle.

Näiden uusien tyylien avulla on helpompaa kuin koskaan luoda helppokäyttöisiä ja johdonmukaisia ​​lomakkeita verkkosivustollesi tai sovelluksellesi.

Jännittäviä parannuksia Bootstrap 5.3.0:ssa

Bootstrap 5.3.0 on merkittävä päivitys suosittuun CSS-kehykseen, joka tuo taulukkoon useita uusia ominaisuuksia ja parannuksia. Käytössäsi on paljon uusia työkaluja, jotka auttavat sinua luomaan parempia verkkosivustoja ja sovelluksia.