Bootstrap Text-Transform Eksempel

Mens du oppretter ethvert program, må teksten være enkel og forståelig for brukerne. Teksttilfellene kan også påvirke utseendet på applikasjonen. “Teksttransform”Eiendom i CSS brukes til å spesifisere hvordan teksten kan utnyttes. Det kan lage all teksten i store bokstaver eller små bokstaver eller gjøre hvert ords første bokstav kapitalisert. Mer spesifikt er det klasser i Bootstrap som utfører den ovennevnte oppgaven.

Denne oppskrivningen vil beskrive:

• Hva er bootstrap “Text-Transform” -egenskap?
• Hvordan konvertere tekst i store bokstaver ved hjelp av bootstrap?
• Hvordan kapitalisere tekstens første karakter ved hjelp av Bootstrap?
• Hvordan transformere tekst i små bokstaver ved hjelp av bootstrap?

Hva er bootstrap “Text-Transform” -egenskap?

I bootstrap, "tekst-*”Klasser brukes til å transformere teksten der“*”Indikerer verdiene”kapitalisere”,“stor bokstav”, Og“små bokstaver”. Disse verdiene brukes deretter.

For en praktisk demonstrasjon, gå gjennom de under-uttalte seksjonene.

Metode 1: Hvordan konvertere tekst i store bokstaver ved hjelp av bootstrap?

Støvelhempe "tekst-uppercase”Klasse brukes til å transformere hver bokstav til store bokstaver. Denne klassen har en forhåndsdefinert stil der "Teksttransform”Eiendom til CSS er satt med verdien”stor bokstav”.

Eksempel

Først legger du til en lenke til Bootstrap -filer i hodeseksjonen i HTML -filen ved å bruke "

”Element i filen og tilordne den“tekst-uppercase”Klasse.

Html

Bootstrap "Text-Upper" -klasse

Det kan observeres at den ekstra teksten er blitt transformert til all store bokstaver:

Metode 2: Hvordan kapitalisere det første tegnet til hvert ord ved hjelp av bootstrap?

Støvelhempe "tekstkapitaliser”Klasse gjør hvert ords første karakterhovedstad. Denne klassen har en forhåndsdefinert styling der "Teksttransform”Eiendom har verdien”kapitalisere”.

Eksempel

Legg til en "

”Element i HTML -filen og tilordne den“tekstkapitaliser”Klasse.

Html

Bootstrap "tekstkapitaliserende" klasse

Produksjon

Metode 3: Hvordan transformere tekst i små bokstaver ved hjelp av bootstrap?

Støvelhempe "tekst-lowercase”Klasse konverterer hver bokstav til små bokstaver. Denne klassen har en forhåndsdefinert stil der CSS “Teksttransform”Eiendom er satt med verdien”små bokstaver”.

Legg til en "

”Element i HTML -filen og tilordne den“tekst-lowercase”Klasse.

Html

Bootstrap "text-lower" -klasse

Produksjon

Det handlet om å transformere teksten i Bootstrap.

Konklusjon

I bootstrap gjøres teksttransformasjonen ved å bruke "tekstkapitaliser”,“tekst-uppercase”, Og“tekst-lowercase”Klasser. For å gjøre det, først, legg til teksten i HTML -filen og deretter tilordne elementet med ønsket klasse i henhold til ditt behov. Dette innlegget har forklart gjennom eksempler hvordan man transformerer tekst i bootstrap.