Os elementos comuns dos formulários incluem principalmente: caixas de entrada de texto, caixas de seleção suspensas, caixas de rádio, caixas de seleção, campos de texto, botões, etc. Aqui estão as diferentes versões de bootstrap:
Menos: forms.less
SASS: _Forms.scss
O Bootstrap personaliza apenas as tags de campos, legenda e etiqueta no formulário
Fieldset {Min-Width: 0; preenchimento: 0; margem: 0; borda: 0;} legenda {display: block; largura: 100%; preenchimento: 0; margem-bottom: 20px; font »size: 21px; Block inline; Margin-Bottom: 5px; Fonte-peso: Bold;}Além desses elementos, também existem entrada, seleção, textarea e outros elementos. Na estrutura do bootstrap, o efeito é alcançado personalizando um nome de classe.form-control.
1. A largura se torna 100%;
2. Defina uma borda cinza claro (#CCC)
3. Canto redondo com 4px
4. Defina o efeito de sombra e o elemento obtém foco, os efeitos das sombras e da borda mudarão.
5. Defina a cor do Palceholder como #999
Forma em linha
Se você deseja adicionar uma tag de etiqueta antes da entrada, fará com que a quebra da linha de entrada seja exibida; Se você precisar adicionar uma tag de etiqueta e não quiser a quebra da linha de entrada, você precisa colocar a tag de etiqueta no contêiner.form-group, por exemplo:
<div> <bret> Endereço de email </cret> </div> <div> <input type = "email" placeholder = "por favor digite seu número de e -mail"> </div>
Os efeitos são os seguintes:
Para alcançar o efeito de unir formulários, basta adicionar o nome da classe. O princípio da implementação é:
Defina o controle do formulário como um elemento de bloco embutido (exibição: Block Inline) para permitir que o controle do formulário seja exibido em uma linha.
exemplo:
<form><div><label>Email</label><input type="email" placeholder="Please enter the email number"></div><div><label>Password</label><input type="password" placeholder="Please enter the password"></div><label><input type="checkbox" > Remember the password</label></div><div><button>Enter the email</button></div></form>
Os efeitos são os seguintes:
Você descobriu que o código claramente possui uma tag de etiqueta e não é colocado no contêiner.form-group, e a entrada não será embrulhada. O que é ainda mais estranho é que o conteúdo da tag de etiqueta não é exibido! De fato, se você olhar com cuidado, a tag de etiqueta adicionou o nome da classe.sr, o que significa que ela esconde o rótulo. Vamos dar uma olhada em seu código -fonte:
.sr -sly {Posição: Absoluto; largura: 1px; altura: 1px; preenchimento: 0; margem: -1px; transbordamento: oculto; clipe: ret (0, 0, 0); borda: 0;}Desde que a etiqueta da etiqueta foi adicionada e o nome da classe .SR somente foi adicionado para ocultar a etiqueta, não é desnecessário? ? ? Mas essa é exatamente uma das vantagens da estrutura de bootstrap. Se o rótulo não estiver definido para o controle de entrada, o leitor de tela não será reconhecido corretamente e também terá certas considerações para pessoas com deficiência.
Forma horizontal
A implementação dos efeitos da forma horizontal no bootstrap requer as duas condições a seguir:
1. Use o nome da classe.form-horizontal no elemento de formulário
2. Sistema de grade com estrutura de bootstrap (Detalhes: Explicação detalhada do sistema de grade de bootstrap)
Use a classe name.form-horizontal no elemento de formulário tem principalmente as seguintes funções:
1. Defina os valores de preenchimento e margem dos controles do formulário
2. Altere a forma de expressão de .From-Group, semelhante à linha do sistema de grade
Código -fonte CSS:
.Form-Horizontal .Control-label, .Form-Horizontal .Radio, .Form-Horizontal .CheckBox, .Form-Horizontal .Radio-Inline, .Form-Horizontal .CheckBox-Inline. {Min-HEUTH: 27px;}. Form-Horizontal .form-group {Margin-right: -15px; margem-left: -15px;}. form-horizontal .form-controle-static {Padding-top: 7px;}@mídia (min-widthth: 768px) {. direita;}}. form-horizontal .has-feedback .form-control-feedback {top: 0; direita: 15px;}exemplo:
<FORM> <div> <brety> email </crety> <div> <input type = "email" placeholder = "Por favor, digite seu email"> </div> </div> <div> <belt> senha </crety> <div> <input type = "senha" someholder = "Por favor, digite sua senha"> </div> </div) Senha </celt> </div> </div> <div> <div> <but uma button> Digite seu email </botão> </div> </morm>
Os efeitos são os seguintes:
Caixa de entrada de linha única
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, porque a estrutura do bootstrap define estilos através da forma de entrada [type = "?"], Como: Tipo de texto, que corresponde à entrada [type = "text"]
Para fazer com que os controles pareçam bons em vários estilos de formulários, você precisa adicionar o nome da classe.form-Control
<form role = "form"> <div> <input type = "email" placeholder = "digite email"> </div> </morm>
Puxe a caixa de seleção para baixo selecione
A seleção de várias linhas define o valor do atributo múltiplo para múltiplos
<form role = "form"> <div> <select> <pution> 1 </pption> <pution> 2 </pption> <pution> 3 </pption> </option> 4 </pption> <pution> 5 </pption> </leclect> </div> <div> <select múltiplo> <pption> 1 </pption> <pution> 2 </pption> </option> 3 </pption> <pution> 4 </pption> <pution> 5 </pption> </leclect> </div> </morm>
Texto do campo de texto
O campo de texto é o mesmo que o método de uso original. A configuração das linhas pode definir sua altura, a configuração dos cols pode definir sua largura. Se o nome da classe .Form-Control for adicionado ao elemento textarea, não há necessidade de definir o atributo cols, porque a largura do espaço do alvo do estilo .Form-Control na estrutura do bootstrap é 100% ou automático.
<form role = "form"> <div> <texttarea linhas = "3"> </sexttarea> </div> </morm>
Caixa de seleção e rádio
Haverá alguns problemas menores com a caixa de seleção e o rádio em conjunto com as tags de etiquetas (como problemas de alinhamento)
<FORM> <div> <belty> <input type = "Caixa de seleção"> Lembre -se da senha </LABEL> </div> <div> <belt> <input type = "radio" name = "optionsRadios" id = "optionsRadios1" checked> como </celt> </liv> <div> <belt> <bated type = "" names) Como </belt> </div> </morm>
1. Seja a caixa de seleção ou o rádio, eles são embrulhados em rótulos.
2.
3. Rádio e etiqueta são colocados em um recipiente chamado .Radio. O Bootstrap usa principalmente os estilos .CheckBox e .Radio para lidar com o alinhamento de caixas de seleção, botões de rádio e etiquetas.
.Radio, .CheckBox {Display: Block; Min-HETE: 20px; preenchimento-esquerda: 20px; margin-top: 10px; margem-bottom: 10px;}. Radio Label,. entrada [type = "caixa de seleção"],.Caixas de seleção e botões de rádio horizontalmente
1. Se a caixa de seleção precisar ser organizada horizontalmente, você só precisará adicionar o nome da classe no rótulo.
2. Se o rádio precisar de um arranjo horizontal, basta adicionar o nome da classe.
Aqui está o código -fonte do CSS:
.Radio-inline, .CheckBox-In-line {Display: Inline-Block; Padding-Left: 20px; Margin-Bottom: 0; Peso da fonte: Normal; Vertical-Align: Middle; Cursor: Pointer;}. Radio-Inline + .Radio-Inline,. <div> <Boel> <input type = "radio" name = "sexo" value = "option1"> masculino </crety> <etiqueta> <input type = "radio" name = "sex" value = "option2"> feminino </etiquetador> <batel> <input type = "radio" name = "sexo" = "option3"> neutral </label> </div)Status de controle de formulário
1. Status do foco:
O estado de foco é implementado através da pseudo-classe: foco. O estado de foco no formulário de bootstrap exclui o estilo padrão de contorno e adiciona o efeito de sombra novamente. O seguinte é
Código -fonte CSS:
.Form-Control: Focus {Border-Color: #66afe9; esboço: 0; -Webkit-box-shadow: Insert 0 1px 1pxrgBa (0,0,0, .075), 0 0 0 8px RGBA (102, 175, 233, .6); 8px rgba (102, 175, 233, .6);}Como pode ser visto no código-fonte, para fazer com que o controle tenha o efeito de estilo acima no estado de foco, você precisa adicionar o nome da classe ao control.form-control
<form> <div> <div> <input type = "text" placeholder = "não é um efeito no foco"> </div> <div> <input type = "text" placeholder = "em foco"> </div> </div> </morm>
O efeito dos controles de arquivo, rádio e caixa de seleção no foco também é diferente do dos controles de entrada comuns. O seguinte é o código -fonte
input [type = "file"]: focus, input [type = "Radio"]: foco, input [type = "Caixa de seleção"]: foco {esboço: pontilhado fino; esboço: 5px auto -webkit-focus-ring-cor; esboço: -2px;}2. Desativar o status:
Basta adicionar a propriedade desativada no controle de formulário correspondente e o seguinte é o código -fonte CSS:
.Form-Control [desativado],. input [type = "Radio"] [desativado], input [type = "Caixa de seleção"] [desativado], o rádio [desativado] ,. Radio-Inline [desativado], a caixa de seleção [desabilitada], a caixa de seleção-Infabled [desativada], fieldset [desativado] input [type = "Radio"], Fieldset [desativado] em Type [Type] "Disablet]" check "". .Radio, Fieldset [desabilitado] .Radio-Inline, Fieldset [desabilitado] .CheckBox, Fieldset [desativado] .CheckBox-Inline {cursor: não-Arelado;}exemplo:
<input type = "text" placeholder = "form desativado" desativado>
Se Fieldset definir a propriedade desativada, todo o domínio será desativado
exemplo:
<form role = "form"> <fieldset desativado> <div> <breting> A caixa de entrada está desativada </cretel> <input type = "text" placeholder = "desabilitar entrada"> </div> <div> <breting> caixa suspensa é desativado </celt> <leclect> <pution> 1 </pption> <pution> 2 </pption> <pution> 3 </pption> </option> 4 </pption> </leclect> </div> <div> <bret> <input type = "caixa de seleção"> a caixa de opção está desativada </etiquet.
O efeito é o seguinte: (um ícone desativado aparece quando o mouse é movido para cima. Aqui está uma captura de tela direta que não pode ser vista)
3. Status da verificação
Bootstrap fornece os seguintes efeitos:
1.S-WASTING: STATUS DE AVISO Amarelo
2 .Has-Error: Status do erro Red
3.
Ao usá-lo, basta adicionar o nome da classe de status ao contêiner do grupo de formulários. Os efeitos são os mesmos nos três estados, mas as cores são diferentes.
exemplo:
<form> <div> <breting> status de sucesso </elating> <input type = "text" stailholder = "status do sucesso"> </div> <div> <belt> status do erro </celt> <input type = "text" placeholder = "status do erro"> </div> <div> <div> <bel> warning status </etique> </typ (text) "Praça"> </div> <div> <div> <bel> warning status </etc.
Os efeitos são os seguintes:
Às vezes, estados diferentes fornecem ícones diferentes ao validar o formulário. Se você deseja exibir o ícone no estado correspondente, você só precisará adicionar o nome da classe.Has-feedback no estado correspondente. Observe que ele deve ser usado com .has-error, .s-sucesso,.
Os pequenos ícones de bootstrap são todos fabricados usando @font-face. como:
<span class = ”Glificon-Warning Form-Control-Feedback”> </span>
exemplo:
<form> <div> <breting> status de sucesso </elabel> <input type = "text" placeholder = "status do sucesso"> <pan> </span> </div> <div> <duBely> status do erro </label> <input type = "text" warholder = "status do erro"> <pla> <///) </div> <div> <belt "status" Status "> <pan> </span> </div> </morm>
Os efeitos são os seguintes:
Formulário de informações rápidas
Geralmente, ao fazer a verificação do formulário, são necessárias informações rápidas diferentes. Use .help-Block na estrutura do bootstrap para exibir as informações promissoras em blocos e exibi-lo na parte inferior do controle.
Aqui está o código -fonte do CSS:
.Help-Block {Display: Block; Margin-top: 5px; Margin-Bottom: 10px; cor: #737373;}exemplo:
<form> <div> <breting> status de sucesso </elated> <input type = "text" stailholder = "status bem -sucedido"> <pan> As informações de entrada estão corretas </span> </span> </span> </div> <div> <beling> status </etiquetel> <input type = "text" placeholder = "Error"> <pan> <pump> <belt> Is Incorrect <put Type = "text" status </elabel> <input type = "text" placeholder = "status de aviso"> <pan> Por favor, insira as informações corretas </span> <pan> </span> </div> </form>
Os efeitos são os seguintes:
Se você não quiser adicionar seu próprio código ao bootstrap.css, e o design precisa disso, você pode usar o sistema de grade da Bootstrap, por exemplo:
<form role = "form"> <div> <gravador para = "inputSuccess1"> status de sucesso </crety> <div> <div> <input type = "text" id = "inputSuccess1" stailholder = "status de sucesso"> </div> </span> As informações inseridas estão corretas </span> </div> </form>
O acima exposto é o conteúdo relevante do componente do formulário de bootstrap introduzido pelo editor. Espero que seja útil para você!