Bootstrap fornece três layouts de formulário: forma vertical, forma embutida e forma horizontal
Crie um formulário vertical ou básico:
• ・ Adicione função = "formulário" ao elemento pai <form>.
• ・ Coloque as tags e controles em um <div> com classe .form-group. Isso é necessário para obter o melhor espaçamento.
• ・ Adicione classe .form-controle a todos os elementos de texto <input>, <sexttarea> e <select>
<form role = "formulário"> <div> <etiqueta para = "name"> name </elabel> <input type = "text" id = "name" placeholder = "por favor, digite um nome"> </div> <div> <etiqueta para = "inputfile"> entrada de arquivo </bel> <input type = "file" id = "inputfile"> <p> </p> </div> <div> <belt> <input type = "Caixa de seleção"> Por favor, verifique </crety> </div> <botão tipo = "submeter"> enviar </button> </morm>
Formulário em linha:
Todos os elementos na forma embutida estão alinhados à esquerda e os rótulos são lado a lado. Para criar um formulário em linha, você precisa adicionar classe.form-inline à tag do formulário
<form role = "formulário"> <div> <gravador para = "name"> name </elabel> <input type = "text" id = "name" placeholder = "por favor, digite um nome"> </div> <div> <etiqueta para = "input file"> File input </etc. </div> <button type = "submmit"> submeter </butut> </morm>
O efeito de exibição é o seguinte:
Nota: Por padrão, entrada, seleção e textarea no bootstrap têm 100% de largura. Ao usar formulários embutidos, você precisa definir uma largura no controle do formulário.
Formulário horizontal: Diferente das outras duas formas, você precisa seguir as etapas a seguir para criar uma forma horizontal.
• 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.
Por exemplo:
<form role = "form"> <div> <etiqueta para = "primeironame"> name </elabel> <div> <input type = "text" id = "primeironame" placeholder = "por favor, digite um primeiro nome"> </div> </div> <div> <bel para = "lastname"> last </etiquetel> <erg> <but> typen "iDT> <bel =" "LastName"> last </elbel> <ert> <input> "text>" iden = ") </div> <div> <div> <bret> <input type = "caixa de seleção"> Lembre -se de mim </cretel> </div> </div> </div> <div> <div> <button type = "submit"> login </button> </div> </div> </form>
O efeito de exibição é o seguinte:
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
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.