Dimensionamento de entrada de bootstrap

Ao criar formulários em um aplicativo da web, exigimos uma variedade de componentes, incluindo campos de entrada, botões de rádio, caixas de seleção e muito mais. Mais especificamente, várias classes de bootstrap são utilizadas para ajustar o tamanho desses componentes, como “Controle de forma-*" e "Grupo de entrada-*”. O "*”Simboliza as classes que definem o tamanho, onde“LG”Representa grande e“sm”Refere -se a pequeno.

Este post guiará:

• Método 1: Como especificar o tamanho da entrada usando “Controle de forma" aula?
• Método 2: Como especificar o tamanho da entrada usando “Grupo de entrada" aula?
• Método 3: Como especificar o tamanho da entrada usando a largura “c" aula?

Método 1: Como especificar o tamanho da entrada usando a classe “Formol-Control”?

O "Controle de forma”A classe no bootstrap é utilizada para estilizar controles de formulário textual como“ ”,“ ”e“ ”. Fornece estilo geral para os elementos de entrada, como aparência, dimensionamento e mais.

Para ajustar o dimensionamento dos controles do formulário, o “Controle de forma-*”A classe é usada. O asterisco "*" simboliza a classe de tamanho. Além disso, o “forma-controle-lg”Indica um grande controle de forma,“formulário-control-sm”Define o pequeno controle de forma e, sem mencionar nenhuma classe, o tamanho médio será aplicado ao campo de entrada.

Exemplo

Neste exemplo, criaremos três entradas especificando o “Controle de forma"E diferente"Controle de forma-*" Aulas:

Pequena entrada

Saída

Método 2: Como especificar o tamanho da entrada usando a classe "input-group"?

O "Grupo de entrada”A classe é utilizada para fornecer estilo geral aos grupos de entrada. Os grupos de entrada se referem aos campos de entrada com um ícone, botão, texto ou mais.

Para ajustar o tamanho do grupo de entrada, a classe “Grupo de entrada-*”É utilizado, onde o asterisco“*”Símbolo indica o tamanho especificando o“LG"Para grande,"sm”Para pequeno, caso médio.

Exemplo

O exemplo abaixo representa os dois grupos de entrada separados por um “
" marcação. Cada um consiste em um campo de entrada e um botão:

Enviar

Saída

Método 3: Como especificar o dimensionamento de entrada usando a classe “W” de largura?

A largura “c-*”A classe é utilizada para ajustar a largura dos campos de entrada da seguinte forma:

• ““W-25”Define a largura da entrada para 25% dos pais.
• ““W-50”Define a largura da entrada para 50% dos pais.
• ““W-75”Define a largura da entrada para 75% dos pais.
• ““W-100”Define a largura da entrada para 100% dos pais.

Exemplo

Neste exemplo, os campos de entrada são especificados com o “Controle de forma" e "c-*" Aulas:

largura 25

largura 50

Largura 75

largura 100

Saída

Pode -se observar que a largura especificada foi aplicada ao campo de entrada adicionado.

Conclusão

Para ajustar o tamanho dos campos de entrada textual, o ““Controle de forma-*”A classe é utilizada. Para definir o dimensionamento dos grupos de entrada, o “Grupo de entrada-*”A classe é utilizada. Considerando que a "c-*”A classe é usada para determinar a largura dos campos de entrada. O asterisco “*”Indica as classes como“LG","sm”, E qualquer número, respectivamente. Este post explicou como ajustar o tamanho das entradas no bootstrap.