Exemplo de transformação de texto de bootstrap

Ao criar qualquer aplicativo, o texto deve ser simples e compreensível para os usuários. Os casos de texto também podem afetar a aparência do aplicativo. O "transformação de texto”A propriedade no CSS é utilizada para especificar como o texto pode ser capitalizado. Pode fazer todo o texto em maiúsculas ou minúsculas ou fazer a primeira letra de cada palavra capitalizada. Mais especificamente, existem aulas de bootstrap que executam a tarefa acima mencionada.

Este artigo descreverá:

• O que é a propriedade “Transformática de texto” de bootstrap?
• Como converter texto em maiúsculas usando bootstrap?
• Como capitalizar o primeiro caractere do texto usando o bootstrap?
• Como transformar o texto em minúsculas usando o bootstrap?

O que é a propriedade “Transformática de texto” de bootstrap?

Em bootstrap, o “texto-*”As aulas são utilizadas para transformar o texto em que“*”Indica os valores“capitalizar","maiúsculas", e "minúsculo”. Esses valores são usados ​​de acordo.

Para uma demonstração prática, passe pelas seções abaixo estatadas.

Método 1: Como converter texto em maiúsculas usando o bootstrap?

Bootstrap “Appercase de texto”A classe é utilizada para transformar cada letra em maiúsculas. Esta classe tem um estilo predefinido no qual o “transformação de texto”A propriedade do CSS está definida com o valor“maiúsculas”.

Exemplo

Primeiro, adicione um link para arquivos de bootstrap dentro da seção principal do arquivo html usando o “

”Elemento no arquivo e atribui o“Appercase de texto" aula.

Html

Classe "Upper" Bootstrap "Text-Upper"

Pode -se observar que o texto adicionado foi transformado em toda a maçaneta:

Método 2: Como capitalizar o primeiro personagem de cada palavra usando bootstrap?

Bootstrap “capitalização de texto”Classe torna o primeiro capital de personagem de cada palavra. Esta classe tem um estilo predefinido onde o “transformação de texto”A propriedade está tendo o valor“capitalizar”.

Exemplo

Adicione um “

”Elemento no arquivo html e atribui o“capitalização de texto" aula.

Html

Bootstrap "Text-capitalize" Classe

Saída

Método 3: Como transformar o texto em minúsculas usando o bootstrap?

Bootstrap “text-lowercaseA classe converte cada letra em minúsculas. Esta classe tem um estilo predefinido no qual o CSS “transformação de texto”A propriedade está definida com o valor“minúsculo”.

Adicione um “

”Elemento no arquivo html e atribui o“text-lowercase" aula.

Html

Classe "Text-Lower" Bootstrap

Saída

Isso se tratava de transformar o texto em bootstrap.

Conclusão

No bootstrap, a transformação do texto é feita usando o “capitalização de texto","Appercase de texto", e "text-lowercase" Aulas. Para fazer isso, primeiro, adicione o texto ao arquivo html e depois atribua o elemento à classe desejada de acordo com a sua necessidade. Este post explicou através de exemplos de como transformar o texto em bootstrap.