Extensões

<< Click to Display Table of Contents >>

Navigation:  Bootstrap > Formulários >

Extensões

Previous pageReturn to chapter overviewNext page

Tela

 

bootstrap24

 

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 error">

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

                           Campo 1</label>

                      <div class="controls">

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

                          <p class="help-inline">

                               Error</p>

                      </div>

                  </div>

                  <div class="control-group warning">

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

                           Campo 2</label>

                      <div class="controls">

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

                          <p class="help-inline">

                               Warning</p>

                      </div>

                  </div>

                  <div class="control-group success">

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

                           Campo 3</label>

                      <div class="controls">

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

                          <p class="help-inline">

                               Sucesso!</p>

                      </div>

                  </div>

                  <div class="control-group">

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

                           Campo 4</label>

                      <div class="controls">

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

                          <p class="help-inline">

                               Desabilitado</p>

                      </div>

                  </div>

                  <div class="control-group">

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

                           Campo 5</label>

                      <div class="controls">

                          <div class="input-prepend">

                              <span class="add-on">@</span>

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

                          </div>

                          <p class="help-inline">

                               Prepend</p>

                      </div>

                  </div>

                  <div class="control-group">

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

                           Valor</label>

                      <div class="controls">

                          <div class="input-prepend input-append">

                              <span class="add-on">R$</span>

                              <input type="text" class="input-span2" id="CampoValor" />

                              <span class="add-on">,00</span>

                          </div>

                          <p class="help-inline">

                               prepend append (add-on)</p>

                      </div>

                  </div>

                  <div class="control-group">

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

                           Com botão</label>

                      <div class="controls">

                          <div class="input-append">

                              <input type="text" class="input-span2" id="Campobtn" />

                              <button class="btn" type="button">

                                   Vai!</button>

                          </div>

                      </div>

                  </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>