Horizontais

<< Click to Display Table of Contents >>

Navigation:  Bootstrap > Formulários >

Horizontais

Previous pageReturn to chapter overviewNext page

Tela

 

bootstrap23

 

Fonte

 

<!DOCTYPE html>

<html>

<head>

  <link href="css/bootstrap.min.css" rel="stylesheet">

  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

  <style>      

  </style>

</head>

<body>

  <div class="container" style="margin-top: 10px">

      <div class="row">

          <div class="span2">

              <h3>

                   Formulario Horizontal</h3>

          </div>

          <div class="span10">

              <form class="well form-horizontal">

              <fieldset>

                  <div class="control-group">

                      <label class="control-label" for="CampoNome">

                           Nome</label>

                      <div class="controls">

                          <input type="text" class="input-xlarge" id="CampoNome" />

                          <p class="help-block">

                               Informe seu nome completo</p>

                      </div>

                  </div>

                  <div class="control-group">

                      <label class="control-label" for="CampoAtivo">

                           Ativo</label>

                      <div class="controls">

                          <label class="checkbox">

                              <input type="checkbox" id="CampoAtivo" value="sim" />

                               Marque

                          </label>

                      </div>

                  </div>

                  <div class="control-group">

                      <label class="control-label" for="CampoSexo">

                           Sexo</label>

                      <div class="controls">

                          <select id="CampoSexo" />

                          <option>Feminino</option>

                          <option>Macho</option>

                          <option>Não sei</option>

                          </select>

                      </div>

                  </div>

                  <div class="control-group">

                      <label class="control-label" for="CampoMulti">

                           Fruta</label>

                      <div class="controls">

                          <select multiple="multiple" id="CampoMulti" />

                          <option>Banan</option>

                          <option>Macã</option>

                          <option>Orange</option>

                          <option>Acabaxi</option>

                          <option>Zoe</option>

                          </select>

                      </div>

                  </div>

                  <div class="control-group">

                      <label class="control-label" for="CampoFile">

                           Foto</label>

                      <div class="controls">

                          <input type="file" class="input-xlarge" id="CampoFile" />

                      </div>

                  </div>

                  <div class="control-group">

                      <label class="control-label" for="CampoObs">

                           Obs</label>

                      <div class="controls">

                          <textarea class="input-xlarge" id="CampoObs" rows="4"></textarea>

                      </div>

                  </div>

                  <div class="form-actions">

                      <button type="submit" class="btn btn-primary">

                           Gravar</button>

                      <button type="submit" class="btn btn-danger">

                           Limpar</button>

                  </div>

              </fieldset>

              </form>

          </div>

      </div>

  </div>

</body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js"></script>

<script language="javascript">

</script>

</html>