Bootstrap fornece os seguintes tipos de layouts de formulário:
• Formulário vertical (padrão)-> Este não é bonito, são todas as versões móveis, e a versão para PC leva uma linha e não é bonita;
• Formulário embutido-> Acredito que é isso que você deseja, a versão do PC responde às linhas horizontais e a versão móvel responde às linhas verticais.
• Formulário horizontal-> Visor de controle com sistema de grade
1. Forma vertical
Etapas padrão para uso vertical de forma
1. Adicione função = "formulário" ao elemento <morm>.
2. Coloque as tags e controles em um <div> com "Grupo de forma" para obter o melhor espaçamento.
3. Adicione os estilos "Form-Control" a todos os elementos de texto <Intput>, <sexttarea> e <select>.
<form role = "formulário"> <div> <gravador para = "name"> name </elabel> <input type = "text" id = "name" placeholder = "por favor, digite um nome"> </div> <div> <gravador para = "name"> idade </elbel> <input type = "text" = "name" placeholder = "por favor, digite uma idade">
2. Layout embutido
O layout embutido é exatamente o mesmo que o layout vertical, mas você precisa adicionar class = form-in-inline a <form role = "form">.
<form role = "form">
Depois de usar um layout em linha, a tela grande é exibida horizontalmente e a tela pequena é exibida verticalmente.
Tela pequena:
Tela grande:
3. Forma horizontal
Um formulário horizontal refere -se ao nível entre uma etiqueta de etiqueta e um controle (entrada, botão).
As etapas para usá -lo são as seguintes:
• Adicionar classe .form-horizontal ao elemento pai <form>.
• Coloque as tags e controles em um <div> com classe .form-group.
• Adicione classe .Control-label ao rótulo.
<form role = "form"> <div> <gravador para = "name"> name </elabel> <div> <input type = "text" id = "name" placeholder = "por favor digite um nome"> </div> </div> <div> <bel para = "name"> idade </etiqueta> <div> <input type = "text" id = "name" standolder ">"
Somente após o uso do formulário-horizontal, o controle de entrada pode ser definido como DIV, e o Div também pode usar o sistema de grade. O estilo de forma-horizontal altera o comportamento do grupo .Form, agindo como linhas em uma varredura.
4. Caixa de seleção e rádio
Esses dois controles são especiais em bootstrap. Às vezes, eles precisam ser organizados horizontalmente e, às vezes, precisam ser organizados verticalmente.
Também é como uma forma e também está inlinada.
• Se for necessária uma exibição embutida, defina a classe da etiqueta cercada por sua camada externa na caixa de seleção.
• Se a exibição vertical padrão for necessária, defina a classe do rótulo cercado pela camada externa no HeckBox.
<form role = "form"> <!-check-> <div> <belt> <input type = "caixa de seleção" value = ""> banana </elabel> </div> <div> <batel> <input type = "CheckBox" value = "> Apple </elbel> </div> <belt> <belt> <input Type =" check)> </watermM> watermmymen </bel> </div> <belt> <belt> <input/"check) TIPO = "Caixa de seleção" Value = ""> banana </crety> </div> <div> <belty> <input type = "Caixa de seleção" value = ""> Apple </crety> </div> <div> <bel> <bation> <input Type = "Caixa de seleção" Value = ""> Watermelon </) </Div> <!-Chopção-"<div> <belt =" "> WaterMelon </Div> <!-"-" check> masculino </crety> </div> <div> <belty> <input type = "radio" name = "optionsRadios" value = "option2" checked> feminino </creat> </div> <div> <belt> <belt> <input type = "radio" name = "optionsRadios" value = "option1" " value = "Option2" Checked> fêmea </crety> </div> </morm>
O efeito de exibição é o seguinte:
5. Controles estáticos
Os controles estáticos se referem àqueles que não podem alterar o valor. No bootstrap, quando você precisar colocar texto simples atrás das tags de formulário em uma forma horizontal, use class = "form-control-static" em <p>.
<form role = "form"> <div> <breting> Nome </elabel> <div> <p> Liu Xuande </p> </div> </div> </morm>
O efeito de exibição é o seguinte:
6. Formulário Texto de ajuda
O texto de ajuda do formulário de bootstrap geralmente se refere ao prompt de entrada, geralmente seguido por um elemento HTML de .help-Block.
<form role = "form"> <div> <input type = "text"> <pan> lembrete especial, se você não tiver nada, não digite. </span> </div> </morm>
O efeito de exibição é o seguinte:
Além disso, o Bootstrap também possui muitas colunas de estilos usadas para controlar a altura da entrada, se a entrada é bem -sucedida etc. Basta verificá -las e encontrar as palavras -chave correspondentes e registrá -las posteriormente.
O acima é o layout do formulário de bootstrap introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!