Esempio di trasformata di testo bootstrap

Durante la creazione di qualsiasi applicazione, il testo deve essere semplice e comprensibile per gli utenti. I casi di testo possono anche influire sull'aspetto dell'applicazione. IL "trasformata di testo"La proprietà in CSS viene utilizzata per specificare come il testo può essere capitalizzato. Può rendere tutto il testo in maiuscolo o minuscolo o rendere capitalizzata la prima lettera di ogni parola. Più specificamente, ci sono classi in bootstrap che eseguono l'attività sopra menzionata.

Questo articolo descriverà:

• Cos'è la proprietà Bootstrap "Testo-Transform"?
• Come convertire il testo in maiuscolo usando bootstrap?
• Come capitalizzare il primo personaggio del testo usando bootstrap?
• Come trasformare il testo in minuscolo usando bootstrap?

Cos'è la proprietà Bootstrap "Testo-Transform"?

In bootstrap, il "testo-*"Le classi vengono utilizzate per trasformare il testo in cui"*"Indica i valori"capitalizzare","maiuscolo", E "minuscolo". Questi valori sono usati di conseguenza.

Per una dimostrazione pratica, attraversare le sezioni di seguito.

Metodo 1: come convertire il testo in maiuscolo usando bootstrap?

Bootstrap "text-uppercase"La classe viene utilizzata per trasformare ogni lettera in maiuscolo. Questa classe ha uno stile predefinito in cui il "trasformata di testo"La proprietà di CSS è impostata con il valore"maiuscolo".

Esempio

Innanzitutto, aggiungi un collegamento ai file bootstrap all'interno della sezione testa del file HTML utilizzando “

"Elemento nel file e assegnarlo il"text-uppercase" classe.

Html

classe bootstrap "text-upper"

Si può osservare che il testo aggiunto è stato trasformato in tutti i maiuscoli:

Metodo 2: come capitalizzare il primo carattere di ogni parola usando bootstrap?

Bootstrap "Capitalizza in testo"La classe rende il primo capitale del personaggio di ogni parola. Questa classe ha uno stile predefinito in cui il "trasformata di testoLa proprietà "sta avendo il valore"capitalizzare".

Esempio

Aggiungere un "

"Elemento nel file HTML e assegnarlo il"Capitalizza in testo" classe.

Html

Bootstrap Classe "text-capitalizza"

Produzione

Metodo 3: come trasformare il testo in minuscolo usando bootstrap?

Bootstrap "Testo-basso"La classe converte ogni lettera in minuscolo. Questa classe ha uno stile predefinito in cui il CSS "trasformata di testoLa proprietà "è impostata con il valore"minuscolo".

Aggiungere un "

"Elemento nel file HTML e assegnarlo il"Testo-basso" classe.

Html

Classe Bootstrap "Text-Power"

Produzione

Si trattava di trasformare il testo in bootstrap.

Conclusione

In bootstrap, la trasformazione del testo viene eseguita usando il "Capitalizza in testo","text-uppercase", E "Testo-basso" classi. Per fare ciò, prima, aggiungi il testo al file HTML e quindi assegna l'elemento con la classe desiderata in base alla tua necessità. Questo post ha spiegato attraverso esempi su come trasformare il testo in bootstrap.