O Bootstrap oferece três layouts de formulário: forma vertical, forma embutida e forma horizontal. Deixe -me apresentá -lo a você um por um. Amigos interessados aprenderão juntos.
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 à tag de formulário.
.form-inline
<form role = "formulário"> <div> <etiqueta para = "name"> name </elabel> <input type = "text" id = "name" placeholder = "por favor, digite um nome"> </div> <div> <gravador para = "inputfile"> input "> </etc. Verifique </belt> </div> <button type = "submit"> envie </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 = "digite um primeiro nome"> </div> </div> <div> <bel para = "lastname"> last </etiquetel> <erg> <bpT> "text> <bel =") para "lastname"> last </bels> <ert> <sput> <input> "text> <bel <bat> <bel =" lastname "> last </belt> <er) Nome "> </div> </div> <div> <belty> <input type =" Checkbox "> Lembre -se de mim </cretel> </div> </div> <div> <div> <botão type =" submit "> login </botão> </div> </div> </form>
O acima é a descrição completa do sétimo formulário de inicialização do formulário Exemplo de Código de Código de Layout (três formulários Layouts) Introduzido a você 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!