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>
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
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.
O estilo de layout do formulário de bootstrap é o seguinte
Código de implementação:
<form role = "formulário"> <Dieldset> <legend> Configure a fonte de dados </legend> <div> <gravador para = "ds_host"> hostname </creat> <div> <input id = "ds_host" type = "text" text = "192.168.1.161"/> </div> </div "<belt =" Text " <input id = "ds_name" type = "text" placeholder = "msh"/> </div> </div> <div> <gravador para = "ds_username"> nome de usuário </elabel> <div> <input id = "ds_username" type = "text" placeholder = "root"/</> </> </> </" id="ds_password" type="password" placeholder="123456"/> </div> </fieldset> <fieldset> <legend>Select related table</legend> <div> <label for="disabledSelect">Table name</label> <div> <select id="disabledSelect"> <option>Select </option> <option>Select </select> </div> </fieldset> <Fieldset> <legend> Nome do campo </legend> <div> <gravador para = "DisableSelect"> Nome da tabela </crety> <div> <select ID = "DisableSelect"> <pution> sem seleção </pption> </option> sem seleção </ppthment> </select> </div> </fieldset> </forma>
Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
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.