Exemple de transformation de texte bootstrap

Lors de la création d'une application, le texte doit être simple et compréhensible pour les utilisateurs. Les cas de texte peuvent également affecter l'apparence de l'application. Le "transformation de texte»La propriété dans CSS est utilisée pour spécifier comment le texte peut être capitalisé. Il peut faire en sorte que tout le texte en majus. Plus précisément, il existe des classes en bootstrap qui effectuent la tâche susmentionnée.

Cet article décrira:

• Qu'est-ce que la propriété Bootstrap «Text Transform»?
• Comment convertir le texte en majuscules à l'aide de bootstrap?
• Comment capitaliser le premier personnage du texte à l'aide de bootstrap?
• Comment transformer du texte en minuscules à l'aide de bootstrap?

Qu'est-ce que la propriété Bootstrap «Text Transform»?

En bootstrap, le «texte-*«Les classes sont utilisées pour transformer le texte où«*"Indique les valeurs"capitaliser","majuscule", et "minuscule". Ces valeurs sont utilisées en conséquence.

Pour une démonstration pratique, passez par les sections ci-dessous.

Méthode 1: Comment convertir le texte en majuscules à l'aide de bootstrap?

Amorcer "textaine"La classe est utilisée pour transformer chaque lettre en majuscules. Cette classe a un style prédéfini dans lequel le «transformation de texte"La propriété de CSS est définie avec la valeur"majuscule".

Exemple

Tout d'abord, ajoutez un lien aux fichiers bootstrap à l'intérieur de la section tête du fichier html à l'aide du "

”Élément du fichier et attribuez-le le"textaine" classe.

Html

Classe bootstrap "text-upper"

On peut observer que le texte ajouté a été transformé en toutes les majuscules:

Méthode 2: Comment capitaliser le premier caractère de chaque mot à l'aide de bootstrap?

Amorcer "Capitalisation de texte"La classe fait du premier capital de personnage de chaque mot. Cette classe a un style prédéfini où le «transformation de texte"La propriété a la valeur"capitaliser".

Exemple

Ajouter un "

«Élément dans le fichier HTML et attribuez-le le«Capitalisation de texte" classe.

Html

Classe bootstrap "Text-Capitalize"

Sortir

Méthode 3: Comment transformer le texte en minuscules à l'aide de bootstrap?

Amorcer "text-lotcase»La classe convertit chaque lettre en minuscules. Cette classe a un style prédéfini dans lequel le CSS "transformation de texte"La propriété est définie avec la valeur"minuscule".

Ajouter un "

«Élément dans le fichier HTML et attribuez-le le«text-lotcase" classe.

Html

Classe bootstrap "Text-Lower"

Sortir

Il s'agissait de transformer le texte en bootstrap.

Conclusion

Dans Bootstrap, la transformation de texte se fait en utilisant le «Capitalisation de texte","textaine", et "text-lotcase" Des classes. Pour ce faire, d'abord, ajoutez le texte au fichier HTML, puis attribuez l'élément à la classe souhaitée en fonction de votre besoin. Ce message a expliqué à travers des exemples comment transformer le texte dans bootstrap.