Este artigo apresentará principalmente as habilidades de usar formulários de bootstrap.
1.Bootstrap Formulário básico
Os elementos comuns nos formulários incluem principalmente: caixas de entrada de texto, caixas de seleção suspensas, botões de rádio, botões de verificação, campos de texto e botões, etc.
Vamos primeiro olhar para um formulário básico:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> formulários básicos </title> <link rel = "STILESHEET" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </ad head> <body> <formulário = "formulário"> <div> <bel para = "ExpletemAil1"> email: </etc. Endereço "> </div> <div> <etiqueta para =" ExpletInputPassword1 "> Senha: </celt> <input type =" senha "id =" ExpletInputPassword1 "Planteholder =" Por favor, digite sua senha "> </div> <div> <botel> <belt> <brat> <input Type =" Checkbox "> Lembre -se da senha </bot> </brotth> <butt>" Typen> <blot> <blot> <input type = " </body> </html>
As renderizações são as seguintes:
Também podemos obter efeitos diferentes adicionando nomes de classe diferentes para formar. As regras específicas de formulário são mostradas na tabela a seguir:
Por exemplo:
<form role = "form"> ... </mand>
2.COOTSTRAP CONTROLE
1) entrada da caixa de entrada
<form role = "form"> <div> <!-O tipo de tipo deve ser adicionado. Se o tipo de tipo não for especificado, o estilo correto não será obtido -> <input type = "email" placeholder = "digite email"> </div> </morm>
2) Puxe a caixa de seleção para baixo selecione
<form role = "formulário"> <div> <!-caixa de seleção suspensa de linha única-> <leclect> <pution> 1 </pption> <pution> 2 </pption> </leclect> </div> <div> <!-caixa de seleção de várias linhas-> </Div Multip> </option> 1 </option> 2 </option> </select> </> </formulário> </formulário> </option> 1 </option> 2 </option> </select> </>
3) 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 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> <!-linhas = "3" Defina a altura três linhas-> <texttarea linhas = "3"> </sexttarea> </div> </form>
4) Caixa de seleção
Arranjo vertical:
<form role = "form"> <div> <bret> <input type = "caixa de seleção" value = "">
Arranjo horizontal:
<form role = "form"> <div> <belt> <input type = "Checkbox" value = "option1"> seleção
5) Rádio de botão de seleção única
Arranjo vertical:
<form role = "form"> <div> <belt> <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "love" checked> a </cret> </div> <div> <!-se é uma caixa de seleção ou rádio, eles são embrulhados em) <batel> <bated> <! </div> </morm>
Arranjo horizontal:
<form role = "form"> <div> <brety> <input type = "radio" value = "option1" name = "sexo"> a </label> <belt> <input type = "radio" value = "option2" name = "sexo"> b </label> </div> </form>
Nota: a caixa de seleção e a etiqueta são colocadas em um recipiente chamado ".CheckBox"; Rádio e etiqueta são colocados em um recipiente chamado ".Radio".
3. Status de controle de formulário de bootstrap
1) Status do foco
O estado de foco é alcançado adicionando o nome do nome da classe à entrada. O estado de foco do controle do formulário na estrutura do bootstrap exclui o estilo padrão do contorno e adiciona o efeito de sombra novamente.
<!-Form-Horizontal atinge o efeito da forma horizontal-> <form role = "form"> <div> <div> <input type = "text" stailholder = "Focus Status"> </div> </div> </form>
2) Desativar o status
Basta adicionar "desativado" ao controle do formulário que precisa ser desativado:
<O formulário de entrada de entrada = "text" placeholder = "está desativado, não pode ser inserido" desativado>>
3) Status da verificação
Para verificação do formulário, você também precisa fornecer um estilo de status de verificação. Esses efeitos também são fornecidos no bootstrap:
Ao usá-lo, você só precisa adicionar o nome da classe de status correspondente ao contêiner do grupo de formulários.
<form role = "formulário"> <div> <gravador para = "inputwarning1"> status de aviso </crety> <input type = "text" id = "inputwarning1" placeholder = "status de aviso"> </div> <div> <bel para = "inputerror1"> status de erro </etc. <Label para = "inputSuccess1"> status de sucesso </elabel> <input type = "text" id = "inputSuccess1" stawholder = "success"> </div> </morm>
As renderizações são as seguintes:
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 (esse nome de classe deve ser acompanhado por "Has-error", "has" e "has-sucesso").
4.Bootstrap Form-Button
1) botões de estilo personalizado
<butter type = "Button"> Botão básico </button> <botão de botão principal = "botão"> botão de botão </botão de botão </botão </buttão <buttão <buttão "> Button Button Button)
As renderizações são as seguintes:
2) O botão de bootstrap suporta vários rótulos, e os botões fabricados por outros rótulos são os seguintes:
<botão type = "button"> botão de tag </botão> <input type = "submit" value = "botão de tag de entrada"/> <pan> botão de tag </span> <div> botão de tag de div </div> <a href = "##"> um botão de tag </a>
3) Tamanho do botão
Controle o tamanho do botão anexando o nome da classe ao botão base ".btn".
<button type = "button"> botão normal </button> <botão tipo = "botão"> Botão grande </butut> <button type = "button"> botão pequeno </button>
4) Botão de bloco (mais usado em terminais móveis)
Botão do bloco: a largura do botão preenche todo o contêiner pai (largura: 100%) e não terá valores de preenchimento e margem.
O Bootstrap fornece um nome de classe "BTN-BLOCK". O botão pode usar esse nome de classe para implementar um botão de bloco (para obter detalhes, consulte a linha de arquivo bootstrap.css 2340 para a linha 2353)
<button type = "button"> button grande </button> <button type = "button"> botão normal </button> <button type = "button"> botão pequeno </butut>
As renderizações são as seguintes:
5.Cootstrap Status de botão de formulário
No bootstrap, os efeitos de status dos botões são divididos principalmente em dois tipos: estado ativo e estado desativado.
1) Estado ativo: inclui principalmente vários tipos de estado de suspensão de botão (: Passe o mouse), clique em estado (: ativo) e estado de foco (: foco).
2) Desativar o status
Existem duas maneiras de desativar o botão:
Método 1: Adicione o atributo desativado na tag
Método 2: Adicione o nome da classe "desativado" ao rótulo do elemento
As principais diferenças entre os dois são:
O estilo ". .Disabled" não proíbe o comportamento padrão do botão. O método de adicionar o atributo "desativado" ao rótulo do elemento pode proibir o comportamento padrão do elemento.
6. Bootstrap Image
No bootstrap, os seguintes estilos são fornecidos para o estilo de imagens:
Como usar: Basta adicionar o nome da classe correspondente à tag IMG, como segue:
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/2072615143225"> <mg src = "http://img.blog.csdn.net/20160726151432225">
O efeito de execução é o seguinte ou visualize a janela de resultado à direita:
7.Cootstrap Icon
O Bootstrap fornece 200 ícones diferentes, como segue:
Como usar: Basta adicionar o nome da classe de ícone correspondente à tag, como segue:
<span> </span>
<span> </span>
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
Série de artigos:
A primeira vez que entrei em contato com o Magical Bootstrap Basic Layout //www.vevb.com/article/89278.htm
A primeira vez que entrei em contato com o Magical Bootstrap Grid System //www.vevb.com/article/89333.htm
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.