Bố cục biểu mẫu Bootstrap cách 'chính xác'?

Question

Heres hình thức của tôi:

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

Heres một ví dụ làm việc:

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

Tôi đã bodged nó bằng cách sử dụng Bootstrap, nhưng tôi đang cố gắng để có được một nắm về cách các hàng và nhịp nên được sử dụng để 'tinh chỉnh' bố cục.

Tôi muốn nút được tập trung và có một số khoảng trống phía trên. Như bạn có thể thấy tôi đã fudged một số hàng và span các lớp học trong đó, nhưng ai đó có thể chỉ cho tôi cách thực hành tốt nhất để làm điều này? Nó sẽ giúp tôi hình thành một bức tranh rõ ràng hơn về cách sử dụng đúng khuôn khổ này.

Answer 1

^{Chỉ cần nhìn thấy câu trả lời của bạn, đây là nhận của tôi về mô hình của bạn.}

Để bố cục đúng thiết kế, trước tiên chúng ta cần tách các phần thành hai hàng, một hàng nhập và một hàng cho nút của bạn, để làm điều này chúng ta có thể dựa vào lớp .control-group do bootstrap đặt mỗi phần. Vì vậy, với lớp .control-group tại chỗ, đánh dấu của bạn sẽ trông giống như thế này:

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

Bằng cách này bạn sẽ có một số lợi nhuận theo quy định của bootstrap vào đầu vào và nút hàng và họ sẽ không dính vào nhau. Tôi nhận thấy rằng bạn cũng bao gồm các bản định kiểu đáp ứng trong thiết kế của bạn và thiết lập của bạn phá vỡ khi thay đổi kích thước cửa sổ, cũng nhận thấy tương tự trên bản demo bootstrap trong tài liệu vì vậy chúng tôi phải làm việc xung quanh đó. Với mục tiêu đó, tôi đã tạo lớp .custom-form của riêng mình để không gian đúng các hàng nhập và các nút của nút khi thay đổi kích thước màn hình, theo cách này, các thay đổi của bạn sẽ không ảnh hưởng đến các yếu tố khởi động khác mà bạn có thể có trên trang web của mình. Đã tạo một lớp khác có tên là .center để căn giữa nút của bạn trên biểu mẫu.

.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; 
    } 
} 

Demo: http://jsfiddle.net/aJfMx/8/

Answer 2

Tôi sẽ đặt một hơi khác nhau về vấn đề này dựa trên phiên bản mới hơn của bootstrap và việc sử dụng các phương thức, nhưng nó cũng đúng cho việc sử dụng đồ chứa khác hơn là modals. Tôi không lấy bất cứ thứ gì từ giải pháp nói trên vì nó khá chắc chắn; tuy nhiên, lý do tôi đăng bài này là vì phiên bản mới hơn sẽ đảm bảo hỗ trợ qua trình duyệt và thay đổi kích thước cửa sổ.

Điều đầu tiên bạn cần làm là gọi trên lớp biểu mẫu theo chiều ngang rồi tạo (các) nhóm biểu mẫu cho từng phần tử biểu mẫu. Nghe có vẻ phức tạp hơn nó là:

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

VÀ

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

Xem ... Không phải là xấu cả.

Khi bạn đã có, hãy thiết lập độ dài col của bạn cho các nhóm biểu mẫu và bạn sẽ có hình dạng khá tốt. Điều này sẽ thực thi kích thước thích hợp khi bạn thay đổi kích thước cửa sổ của bạn. Phần tốt nhất là trừ khi bạn muốn nhận được vào tùy biến của riêng bạn của hình thức xuất hiện, không có sửa đổi css cần thiết. Bootstrap xử lý nó cho bạn. Đây là một hướng dẫn khá tốt (http://tutsme-webdesign.info/bootstrap-3-contact-modal/) trên đó nếu bạn muốn đọc thêm nhưng với mục đích của bài đăng này; đây là những gì tôi đã ném cùng nhau thật nhanh chóng dựa trên hướng dẫn.

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