¿Bootstrap forma el diseño de la forma "correcta"?

Question

Heres mi formulario:

<div class="row"> 

<form class="well form-inline span6 offset3"> 

    <select name="data[Number][country]" id="NumberCountry"> 
     <option>Choose a country code:</option> 
     <option value="+44">+44</option> 
     <option value="+81">+81</option> 
     <option value="+1">+1</option> 
     <option value="+70">+70</option> 
    </select> 
    <input type="text" class="input-small span2" placeholder="eg. 7764"> 
    <input type="password" class="input-small span2" placeholder="eg. 123456"> 
    <button class="btn btn-large btn-primary">Activate Your SIM</button> 

</form> 


</div> 

Aquí está un ejemplo de trabajo:

http://jsfiddle.net/pickledegg/aJfMx/6/

he bodged arriba usando Bootstrap, pero estoy tratando de obtener una comprensión de cómo las filas y los tramos deben usarse para "ajustar" el diseño.

Quiero que el botón esté centralizado y tenga algo de espacio encima. Como pueden ver, he modificado algunas filas y ampliado las clases allí, pero ¿alguien puede mostrarme la forma de "mejores prácticas" de hacer esto? Me ayudará a formar una imagen más clara de cómo usar correctamente este marco.

Answer 1

^{Acabo de ver su respuesta, esta es mi opinión sobre su maqueta.}

Para diseñar correctamente su diseño, primero necesitamos separar las secciones en dos filas, una fila de entrada y una fila para su botón, para ello podemos confiar en la clase .control-group establecida por el programa de arranque para contener Cada sección. Así que con la clase .control-group en su lugar, su margen de beneficio se verá algo como esto:

<div class="container"> 

<div class="row"> 
    <form class="well form-inline span8 offset2 custom-form">  
     <div class="control-group"> 
      <div class="controls"> 
       <select class="span4" name="data[Number][country]" id="NumberCountry"> 
        <option>Choose a country code:</option> 
        <option value="+44">+44</option> 
        <option value="+81">+81</option> 
        <option value="+1">+1</option> 
        <option value="+70">+70</option> 
       </select> 
       <input type="text" class="input-small span2" placeholder="eg. 7764"> 
       <input type="password" class="input-small span2" placeholder="eg. 123456"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls center"> 
       <button class="btn btn-large btn-primary">Activate Your SIM</button> 
      </div> 
     </div> 
    </form> 
</div> 

</div> <!-- /container --> 

De esta manera usted tendrá un poco de margen establecido por el sistema de arranque en la fila de entrada y el botón y no se peguen entre sí. Noté que también incluyó la hoja de estilo receptiva en su diseño y que su configuración se rompe con el cambio de tamaño de la ventana, también notó lo mismo en la demostración de arranque en la documentación, así que tenemos que trabajar en eso. Para ese objetivo, creé mi propia clase .custom-form para espaciar correctamente la entrada y las filas de los botones al cambiar el tamaño de la pantalla, de esta manera sus cambios no afectarán otros elementos de arranque que pueda tener en su sitio. Creó otra clase llamada .center para centrar su botón en el formulario.

.custom-form input[class*="span"] { 
    width: 146px; 
} 

.center { 
    text-align:center; 
} 

@media (max-width: 767px) { 
    .custom-form input[class*="span"], select[class*="span"] { 
     margin-bottom:10px; 
     width:100%;  
    } 
} 

@media (min-width: 768px) and (max-width: 979px) { 
    .custom-form.span8 { 
     width:548px; 
    } 
} 

Demostración: http://jsfiddle.net/aJfMx/8/

Answer 2

Voy a poner un enfoque ligeramente diferente en esta basado en la versión más reciente de arranque y el uso de modos de transporte de pero es válido para el uso de otros recipientes en lugar de modales. No estoy quitando nada de la solución mencionada porque es bastante sólida; sin embargo, la razón por la que estoy publicando esto es porque la versión más nueva garantizará el soporte entre navegadores y el cambio de tamaño de la ventana.

Lo primero que deberá hacer es llamar a la clase horizontal de formulario y luego crear grupos de formulario para cada elemento de formulario. Suena más complicado de lo que es:

<form class="form-horizontal" name="formName" action="" method="POST"> 

Y

<!-- Name input--> 
<div class="form-group"> 
    <label class="col-md-4 control-label" for="tokenName">Name</label> 
     <div class="col-md-6"> 
      <input id="name" name="name" type="text" placeholder="Name" class="form-control"> 
     </div> 
</div> 

Ver ... No está mal en absoluto.

Una vez que tenga eso, configure sus longitudes de col para los grupos de formulario y debería estar en muy buena forma. Esto aplicará el tamaño adecuado cuando cambie el tamaño de su ventana. La mejor parte es que, a menos que desee obtener su propia personalización de la apariencia del formulario, no se necesitan modificaciones CSS. Bootstrap lo maneja por ti. Aquí hay un buen tutorial (http://tutsme-webdesign.info/bootstrap-3-contact-modal/) si desea leer más a los fines de esta publicación; aquí es lo que lancé rápidamente basado en el tutorial.

<a href="#" data-toggle="modal" data-target="#modalName">Some Link Here</a> 
<div class="modal fade" id="modalName" tabindex="-1" role="dialog" aria-labelledby="modalName" aria-hidden="true"> 
    <div class="modal-dialog> 
     <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Some Header Here</h4> 
    </div> 
    <div class="modal-body"> 
     <div class="container center-block"> 
      <form class="form-horizontal" name="formName" action="" method="POST"> 
       <fieldset> 

        <!-- Name input--> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="tokenName">Name</label> 
         <div class="col-md-6"> 
          <input id="name" name="name" type="text" placeholder="Name" class="form-control"> 
         </div> 
        </div> 

        <!-- URL input--> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="url">URL</label> 
         <div class="col-md-6"> 
          <input id="url" name="url" type="text" placeholder="http://somedomain.com" class="form-control"> 
         </div> 
        </div> 

        <!-- Entity Association --> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="associationId">Association</label> 
         <div class="col-md-6"> 
          <select class="form-control" id="associationId" name="associationId"> 
           <option>Choose an Association</option> 
           <option value="1">Programming</option> 
          </select> 
         </div> 
        </div> 

        <!-- Message body --> 
        <div class="form-group"> 
         <label class="col-md-4 control-label" for="description">Description</label> 
         <div class="col-md-6"> 
          <textarea class="form-control" id="description" name="description" placeholder="Please enter your description here..." rows="5"></textarea> 
         </div> 
        </div> 

        <!-- Form actions --> 
        <div class="form-group"> 
         <div class="col-md-10 text-right"> 
          <button type="submit" value="Submit" class="btn btn-primary btn-lg">Save</button> 
         </div> 
        </div> 
       </fieldset> 
      </form> 
     </div> 
    </div> 
</div> 
</div> 
</div>