Forma
Forma básica
Para entrada, textarea e selecione no formulário, geralmente adiciono a classe "Form-Control", que define a largura padrão do elemento como 100% (não absoluta, como a forma embutida mencionada abaixo). E cada elemento (incluindo rótulo e elemento a ser inserido) será adicionado com um "grupo de formulários". Tem apenas um estilo. Margin-Bottom: 15px.
<Form Action = ""> <div> <Label para = ""> Nome de usuário: </label> <input type = "text"/> </div> <div> <gravador para = ""> senha: </cret> <input type = "senha"/> </div> </form>
Forma em linha
Adicionando "formulário-na-linha" ao elemento mais externo (o elemento pai do grupo de formulários). Indica que todos os elementos de formulário são exibidos em uma linha (com largura suficiente). E ".form-inline .form-group" é exibido como um bloco em linha. E a largura de ".Form-Inline .form-Control" é automático. Isso garante que seja exibido em uma linha.
<Form Action = ""> <div> <Label para = ""> Nome de usuário: </label> <input type = "text"/> </div> <div> <gravador para = ""> senha: </cret> <input type = "senha"/> </div> </form>
Forma horizontal
Ao contrário de formas normais e embutidas. Se você deseja exibir elementos de formulário de etiqueta e entrada em uma linha, precisará usar o "formulário-horizontal". Esse tipo de "grupo de formulários" é equivalente a "linha" no sistema de grade. Portanto, suas subclasses têm "col-md-*" e o "Control-Label"-". Se você não adicionar isso, o rótulo e a entrada parecerão incompatíveis.
<Form Action = ""> <div> <Label para = ""> Nome de usuário: </crety> <div> <input type = "text"/> </div> </div> <div> <Label para = "" senha: </cret> <div> <input type = "senha"/> </div> </div> </form>
Tamanho da forma
Os que controlam o tamanho da entrada são "Input-SM" e "Input-LG", que tornam a caixa de entrada de entrada menor ou maior que o normal. Correspondente a isso é o tamanho do texto no rótulo. Você precisa adicionar "Form-Group-SM" e "Form-Group-LG" ao pai "Grupo de forma" ao mesmo tempo. Como na caixa de entrada de senha de uma demonstração acima.
Caixa de entrada
No HTML5, o tipo na tag de caixa de entrada suporta mais tipos. Existem texto, senha, dados de dados, localização de dados, data, mês, hora, semana, número, email, URL, pesquisa, tel e cor. O estilo correto só pode ser exibido no rótulo <input> se um tipo específico for atribuído. Alguns elementos só podem mostrar seus efeitos no seu telefone.
Caixa suspensa Selecionar
Semelhante à caixa de entrada. Ele apenas mudou a entrada para selecionar e adicionou a classe "Formulário de formulário".
<formulário de formulário = ""> <div> <gravador para = ""> Selecione: </celt> <div> <select name = "" id = ""> <option value = ""> html </pption> <opção value = ""> css </pption> <opção </opção = ""> javascript </option> <pution> "> jav value = ""> nodejs </pption> </leclect> </div> </form>
col-md-pull-* é o deslocamento esquerdo.
Campo de texto
Semelhante ao acima.
<Form Action = ""> <div> <Label para = ""> textarea: </crety> <div> <textarea name = "" id = "" lobos = "3"> hello </sexttarea> </div> </div> </morm>
Várias e caixas de rádio
Para fazer com que o rádio e os elementos da caixa de seleção apareçam em uma linha e se alinhem ao rótulo. O Bootstrap oferece duas opções. Um:
<div> <gravadora para = ""> <input type = "radio" name = "sexo"/> masculino <input type = "radio" name = "sexo"/> feminino <input type = "radio" name = "sexo"/> confidencial </belt> <etiqueta para = ""> <input Type = "caixa de seleção"/> html <input tipo = " TIPO = "Caixa de seleção"/> JavaScript </Label> </div>
O rótulo em si é o bloco em linha. Mas .Radio, .CheckBox está bloqueado.
Então envolva várias caixas de rádio ou seleção com uma etiqueta, que parecerá não profissional (haha). Além disso, muitos também são muito desagradáveis. Então, a segunda maneira de escrever está aqui.
<div> <gravador para = ""> <input type = "radio" name = "sexo"/> masculino </elabel> <etiqueta para = ""> <input type = "radio" name = "sex"/> feminino </etiquetel> Para = ""> <input type = "Caixa de seleção"/> CSS </Label> <Label para = ""> <input type = "Caixa de seleção"/> JavaScript </elabel> </div>
Verificação de formulário
Has-success: sucesso, verde.
Has-Warning: Aviso, Amarelo.
Has-error: erro, vermelho.
Basta adicionar o estilo correspondente ao "Grupo de forma". Para uma melhor verificação, podemos continuar adicionando "has-feedback". Em seguida, adicione "forma-controle-feedback" ao nível do elemento após a entrada ("Form-Control"). A semântica é clara e clara. O código é o seguinte:
<Form Action = ""> <div> <Label para = ""> Nome de usuário: </crety> <div> <input type = "text"/> <pan> </span> </div> </div> <div> <bel para = ""> senha: </label> </label> <div> <input type = "text"/> <pan> </span> </span> </morm>
Botão
Multi-botão e estilo de botão
Existem vários estilos de botão no bootstrap. Button, A, entrada, extensão, div, etc. podem se tornar botões, desde que possua "estilo BTN BTN". No entanto, para melhor compatibilidade e legibilidade, é melhor não usar dessa maneira, tente usar as tags de botão.
Button </button> <butão> Button </button> <button> Button </botão> <butão> Button </button> <but uma botão> Button </button> <butão> Button </botão> <!-BTN-BLOC Linha-> <butto> Button </botão> <butter> Button </botão> <butão> Button </botão> <but uma botão </button> <but uma botão> Button </botão> <butão> Button </botão> <butão> Button </Button> <butão> Button </Button> <but uma botão </botão> <//button>
Tamanho do botão
Como mencionado acima, use "btn-xs", "btn-sm", "btn-lg" para definir o tamanho do botão.
Status do botão
Como mencionado acima, os eficazes são "ativos" e "foco".
foto
Responsivo do IMG: imagens responsivas, destinadas principalmente a design responsivo.
IMG-ROUND: CANHORES ROURTADOS.
IMG-Circle: Round.
IMG-Thumbnail: Miniatura, representada por uma borda adicionada à camada externa.
ícone
O Bootstart possui muitos ícones pequenos incorporados. O método de uso é o seguinte. De fato, ele foi usado no "Form-Control-feedback". Entre eles, "glificon" é uma obrigação.
<span> </span>
Grupo de caixa de entrada
O grupo de caixas de entrada é um "grupo de entrada". Precisamos adicionar alguns sufixos (como sufixos de email) e prefixos (símbolos de dinheiro ￥, $, etc.) para usar "entrada de grupo de entrada" ou "input-group-btn". Semântica simples e clara. do seguinte modo:
<!-email-box-> <div> <input type = "text" /><span>@gmail.com</span></div><! type = "text"/> </div> <!-Escolha múltipla-> <div> <pan> <input type = "caixa de seleção"/> </span> <input type = "text"/> </div> <!-Taobao Entrada Grupo de entrada-</button> <div> <div> <butt-toggle = "DropDown> ALTING </Span> <//<//button> </button> </button> </button> href = "javascript: void (0)"> baby </a> </li> <li> <a href = "javascript: void (0)"> shop </a> </li> </ul> </div> <input type = "text"/> <botão> <botão> </button> </span> </div)
resumo
"Form-Horizontal" e "Form-Inline" são os rótulos mais externos do grupo de formulários.
Um grupo de formulários assume o "Grupo de forma" como o elemento pai. Os semelhantes são "Grupo de entrada" e "Grupo de botões" que podem ser usados no futuro. Todos eles podem ser dimensionados.
"Form-Group-LG", "Input-LG", "Input-Group-LG", "BTN-LG", etc.
O estilo de verificação tem "Has-Error", "Has-Success", "Has-Wilinging". "Has-feedback" pode ser adicionado ao mesmo elemento. Para tornar a verificação mais completa.
Existem muitos estilos para botões e tamanhos podem ser definidos.
Quatro estilos comuns para fotos.
O BootStarp possui muitos ícones incorporados.
O grupo de caixas de entrada começa com "entrada de entrada", e os elementos filhos incluem "input-group-addon", "input-group-btn", etc.
O exposto acima é uma coleção completa de formulários no Bootstrap apresentado 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!