Este artigo apresenta principalmente o conhecimento do uso de estilos de formulário de bootstrap para você. É muito bom, vamos dar uma olhada juntos!
Forma
<form role = "formulário"> <div> <etiqueta para = "ExemploinputEmail1"> email: </celt> <input type = "email" id = "ExempliinInputEmail1" placeholder = "digite seu endereço de email"> </div> <div> <bel para = "ExemplleinInpUspPassword"> Password </Label> <input Type = " Senha "> </div> <bret> <input type =" caixa de seleção "> lembre
Imagem de reprodução:
Classe: Controle de Formulário
1. A largura tornou -se 100%, 2. Uma borda cinza claro (#CCC) está definido, 3. Um canto arredondado com 4px, 4. Um efeito de sombra é definido e, quando o elemento fica foco, os efeitos da sombra e da borda mudarão, 5. A cor do espaço local está definido como #999
2. Formulário horizontal:
A forma padrão da estrutura do bootstrap é o estilo de exibição vertical, mas geralmente precisamos do estilo de forma horizontal (a etiqueta está à esquerda e o controle de formulário está à direita)
<form role = "form"> <div> <etiqueta para = "inputEmail3"> email </celt> <div> <input type = "email" id = "inputEmail3" placeholder = "digite seu endereço de email"> </div> </div> <div> <div> <bel para = "inputpasspord3"> senha </label> <b> <input> <nput> typenget = "inputpasspord3" Senha "> </div> </div> <div> <div> <brety> <input type =" Caixa de seleção "> Lembre -se da senha </cretel> </div> </div> </div> <div> <div> <button type =" submit "> digite o email </butão> </div> </div> </form>
Imagem de reprodução:
Para alcançar o efeito da forma horizontal na estrutura do bootstrap, as duas condições a seguir devem ser atendidas:
1. O nome da classe "Form-Horizontal" é usado no elemento.
2. Sistema de malha de acordo com a estrutura do bootstrap.
Usando o nome da classe "Form-Horizontal" em elementos tem as seguintes funções:
- Defina os valores de preenchimento de controle de formulário e margem.
- Altere a expressão de "Grupo de forma", semelhante à "linha" do sistema de grade.
3. Formulário horizontal:
A implementação de tais efeitos de formulário na estrutura do bootstrap é uma brisa, você só precisa adicionar o nome da classe "Form-Inline" ao elemento.
O princípio da implementação da forma em linha é muito simples. Para exibir o controle do formulário em uma linha, você precisa definir o controle do formulário como um elemento de bloco embutido (exibição: bloco embutido).
<form role = "formulário"> <div> <etiqueta para = "ExemploEInputEmail2"> email </celt> <input type = "email" id = "ExpletInputEmail2" placeholder = "Por favor, digite seu endereço de email"> </div> <div> <gravador para = "ExpletInInpasspassword"> senha </etc. Senha "> </div> <bret> <input type =" caixa de seleção "> lembre
Imagem de reprodução:
4. Entrada da caixa de entrada
Uma caixa de entrada de linha única, uma caixa de entrada de texto comum, ou seja, o valor de atributo de tipo de entrada é o texto. Ao usar a entrada no bootstrap, você também deve adicionar tipo de tipo. Se você não especificar o tipo de tipo, não obterá o estilo correto.
<form role = "form"> <div> <input type = "email" placeholder = "digite email"> </div> <div> <input type = "text" placeholder = "por favor, digite o nome de usuário"/> </div> </form>
Imagem de reprodução:
5. Caixa de seleção puxe para baixo selecione
A caixa de seleção suspensa na estrutura do bootstrap é consistente com o uso original, e a seleção de várias linhas define o valor do atributo múltiplo para múltiplas. A estrutura de bootstrap fornece um estilo unificado para esses elementos.
<form role = "formulário"> <div> <select> <pption> 1 </pption> <pution> 2 </pption> <pution> 3 </pption> </option> 4 </pption> <pution> 5 </pption> </leclect> </clit> <div> <sivis> <civion> </option> option> <//option> </option> </4 </4 <40> <4 </4 option> </option> </option> </4 </4 </4 <40> </leclect> </div> </morm>
Imagem de reprodução:
6. Texto do campo de texto textarea
O campo de texto é o mesmo que o método de uso original, a configuração das linhas pode definir sua altura e a configuração do Cols pode definir sua largura. Mas se o nome da classe "Form-Control" for adicionado ao elemento textarea, não há necessidade de definir o atributo cols. Porque o controle do estilo "Controle de formulário" na estrutura do bootstrap é 100% ou automático.
<form role = "form"> <div> <texttarea linhas = "3"> </sexttarea> </div> </morm>
Imagem de reprodução:
7. Caixa de seleção Caixa de seleção e Rádio de botão de seleção única
A caixa de seleção e o rádio na estrutura do bootstrap são um pouco especiais. O Bootstrap fez alguns tratamentos especiais para eles. O principal motivo é que a caixa de seleção e o rádio terão alguns pequenos problemas quando usados com rótulos de etiquetas (a maior dor de cabeça é o problema de alinhamento). Com a estrutura de bootstrap, os desenvolvedores não precisam pensar muito, eles só precisam seguir o método a seguir.
<form role = "formulário"> <h3> case 1 </h3> <div> <belty> <input type = "caixa de seleção" value = ""> lembre id = "optionsRadios2" value = "hate"> não goste de </celt> </div> </morm>
Imagem de reprodução:
8. Caixas de seleção e botões de rádio horizontalmente
Às vezes, para fins de layout, caixas de seleção e botões de rádio precisam ser organizados horizontalmente. A estrutura do bootstrap também fez considerações a esse respeito:
1. Se a caixa de seleção precisar ser organizada horizontalmente, você só precisará adicionar o nome da classe "Caixa de seleção" ao rótulo da etiqueta.
2. Se o rádio precisar ser organizado horizontalmente, você só precisará adicionar o nome da classe "Radio-Inline" ao rótulo da etiqueta.
<form role = "form"> <div> <belt> <input type = "caixa de seleção" value = "option1"> game </label> <belt> <input type = "caixa de seleção" value = "option2"> fotografia </elbel> <belt> <input type = "caixa de seleção" "=" option3 "> tourism </elbel> <div> <input Type =" Type "=" option3 ">"> name = "sexo"> masculino </etiqueta> <brety> <input type = "radio" value = "option2" name = "sexo"> feminino </elabel> <belt> <input type = "radio" value = "option3" name = "sexo"> neutro </elbel> </div> </morm>
Imagem de reprodução:
9. Botão
Os botões na estrutura do bootstrap são todos implementados
<TABLE> <TH> <TH> Button </th> <th> class = "" </th> <th> Descrição </th> </tr> </tbody> <tr> <td> <butter href = "#"> padrão </button> </td> <td> <code> btn </code> </td Padrin> Gradiente </td> </tr> <td> <td> <button href = "#"> primário </button> </td> <td> <code> btn btn-primary </codes> </td> <td> fornece peso visual extra e identifica a ação primária em um conjunto de botões </td> </tr> href = "#"> info </botão> </td> <td> <code> btn btn-info </code> </td> <td> usado como uma alternativa aos estilos padrão </td> </td> <td> <td> <butão [href = "#"> success </buttle </td> <t> <t> <t> <t> <t> <t> <t> <t> <t> <t> <t> <t> <t> <t> <t> <t> <tbot> <tbot> <tbot> <tbot> <tt> <t> <t> <t> <t> <t> <t> <tbot> <tbot> <tbot> <tbot> <tbut> <tbott> <Tt> <t> <t> <t> <t> <t> <t> <tbot> <tbot> <tbot> <tbotão> Button = "#"> Success </Butt> </TD> btn-success </code> </td> <td> indica uma ação bem-sucedida ou positiva </td> </tr> <tr> <td> <button href = "#"> aviso </button> </td> <td> <dode> btn btn-war </code> </td> <td> <T. ação </td> </tr> <td> <td> <button href = "#"> perigo </butut> </td> <td> <code> btn btn-Danger </code> </td> <td> indica uma ação perigosa ou potencialmente negativa </td> </tr> <td> <butt> <butt> href = "#"> inverso </but uma button> </td> <td> <code> btn </verse </button> </td> <td> <code> btn btn-inverse </code> </td> <td> botão de cinza escuro alternativo, não amarrado a uma ação semântica ou uso </td> </trd> </trd> </trd> </trd> </trd> <td>
Imagem de reprodução:
10. Tamanho do controle de formulário
Os controles de formulário vistos anteriormente são de tamanho normal. Você pode definir a altura do controle, definindo as propriedades de altura, altura de linha, preenchimento e tamanho de fonte do controle. No entanto, a estrutura de bootstrap também fornece dois nomes de classes diferentes para controlar a altura dos controles de formulário. Esses dois nomes de classe são:
1. Input-sm: torne o controle menor que o tamanho normal
2. Input-LG: torne o controle maior que o tamanho normal
Essas duas classes são adequadas para entrada, textarea e controles selecionados nos formulários.
<form role = "formulário"> <div> <brety> O controle se torna maior </elated> <input type = "text" placeholder = "add.input-lg, o controle se torna maior"> </div> <div> <brety> tamanho normal </celt> <bel> control type = "text" placeholder = "sizer normal"> </div> <div> <> control se torna menor </" Torna -se menor "> </div> </morm>
Imagem de reprodução:
11. Status de controle de formulário (status desativado)
O estado desativado do controle do formulário na estrutura do bootstrap é o mesmo que o método normal de implementação de estado desativado, adicionando o atributo "desativado" ao controle de formulário correspondente. Veja o seguinte código para obter detalhes
Desative uma tag de formulário, basta adicionar desativado aos atributos da tag.
<form role = "form"> <div> <div> <insput id = "desabilableInput" type = "text" someholder = "Forms foi desativado e não pode ser inserido" desativado> </div> </div> </form>
Imagem de reprodução:
Na estrutura do bootstrap, se o Fieldset tiver desativado o conjunto de propriedades, todo o domínio será desativado.
<form role = "formulário"> <fieldset desativado> <div> <gravador para = "desabledTextInput"> caixa de entrada desativada selecionável </pption> </leclect> </div> <div> <belt> <input type = "caixa de seleção"> não é possível selecionar </celt> </div> <button type = "submit"> submeter </butut> </fieldset> </mand>
Imagem de reprodução:
Dizem que, para todo o campo desativado, se houver uma caixa de entrada na legenda, esta caixa de entrada não poderá ser desativada.
Formulário Role = "Form"> <Fieldset desativado> <legend> <input type = "text" placeholder = "Obviamente, minha cor ficou cinza, mas não estou desativado, não acredite? Clique para tentar"/> </legend> <div> <bel para = "DisableTTInput"> Disabed Input Box </LABEL> <input Type = "text") Input "> </div> <div> <gravador para =" desabilableSelect "> caixa suspensa desabilitada
Imagem de reprodução:
Status de verificação do formulário
Ao fazer um formulário, você precisa fazer a verificação. Também é necessário fornecer estilos de status de verificação, e esses efeitos também são fornecidos na estrutura do bootstrap.
1.Dearning: status de aviso (amarelo)
2 .has-error: status de erro (vermelho)
3.Has-sucesso: status de sucesso (verde)
Muitas vezes, ao verificar o formulário, diferentes estados fornecem ícones diferentes, como o sucesso é um sinal de verificação (√), o erro é um sinal cruzado (×), etc. Esse efeito também é fornecido na caixa de bootstrap. Se você deseja que o formulário exiba o ícone no estado correspondente, você só precisará adicionar o nome da classe "has-feedback" no estado correspondente. Observe que esses nomes devem estar com "Has-Error", "Has-Willing" e "Has-success":
<form role = "formulário"> <div> <etiqueta para = "inputSuccess1"> status de sucesso </crety> <input type = "text" id = "inputSuccess1" stailholder = "success"> </div> <div> <gravador para = "inputwarning1"> status de aviso </belt> <input = "text)" idiota = "inputWarning1"> status </etc. status "> </div> <div> <etiqueta para =" inputError1 "> status do erro </elatel> <input type =" text "id =" inputError1 "stailholder =" Erro Status "> </div> </form> <br> <br> <br> <br> <morm role =" formulário "> <div> <bel> <belt> <brt>" id = "inputSuccess1" placeholder = "status de sucesso"> <pan> </span> </div> <div> <gravador para = "inputwarning1"> status de aviso </cret> <input type = "text" id = "inputwarning1" placeholder = "warning status"> <//span> </div> type = "text" id = "inputError1" placeholder = "status do erro"> <pan> </span> </div> </form>
Imagem de reprodução:
Formulário de informações rápidas
Geralmente, informações rápidas diferentes devem ser fornecidas ao fazer a verificação do formulário. Esse efeito também é fornecido na estrutura do bootstrap. Um estilo de "bloco de ajuda" é usado e a mensagem rápida é exibida em blocos e é exibida na parte inferior do controle.
<form role = "form"> <div> <gravador para = "inputSuccess1"> status de sucesso </crety> <input type = "text" id = "inputSuccess1" stailholder = "success"> <rpa> A informação inserida está correta </span> </span> </div> </Div> <belning, " id = "inputwarning1" placeholder = "status de aviso"> <pan> Por favor, insira as informações corretas </span> </span> </span> </div> <div> <gravador para = "inputError1"> status do erro </elbel> <input type = "text" id = "inputerror1" placeholder = "error"> <pan> Errado </span> <pan> </span> </div> </morm>
Imagem de reprodução:
O exposto acima é o uso de estilos de formulário de bootstrap introduzidos pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!