부트 스트랩 양식 레이아웃 '올바른'방법?

Question

Heres는 내 양식 : Heres는

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

작업 예 :

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

내가 부트 스트랩을 사용하여 최대 bodged했습니다,하지만 난에 대한 이해를 얻으려고 어떻게 행 범위는 '미세 조정'레이아웃에 사용되어야합니다.

버튼을 중앙에 배치하고 그 위에 약간의 공간이 있어야합니다. 당신이 볼 수 있듯이, 거기에 몇 개의 행과 스팬 클래스를 퍼지했지만, 누군가 이걸하는 '최고의 연습'방법을 보여줄 수 있습니까? 이 프레임 워크를 올바르게 사용하는 방법을 명확하게 파악하는 데 도움이 될 것입니다.

Answer 1

^{귀하의 회신을 보았습니다. 여기 귀하의 모형에 대한 제 소개가 있습니다.}

디자인을 올바르게 배치하려면 먼저 입력 행과 버튼 행을 두 행으로 나누어야합니다. 이렇게하려면 부트 스트랩에 포함 된 클래스 집합을 사용하여 .control-group 클래스를 설정할 수 있습니다. 각 섹션. 장소에 .control-group 클래스 그래서, 마크 업는 다음과 같이 표시됩니다

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

이 방법을 사용하면 입력과 버튼 행에 부트 스트랩 설정 일부 마진을해야합니다 그리고 그들은 함께 스틱되지 않습니다. 당신이 디자인에 반응 형 스타일 시트를 포함하고 있음을 알게되었고 윈도우 크기 조정시 설정 종류가 깨졌으며 문서의 부트 스트랩 데모에서도 똑같이 나타 났으므로이를 해결해야합니다. 그 목표를 위해, 화면 크기 변경시 입력 및 버튼 행의 간격을 적절히 조정하기 위해 자신의 .custom-form 클래스를 만들었습니다. 이렇게하면 변경 사항이 사이트에있는 다른 부트 스트랩 요소에 영향을 미치지 않습니다. 폼에 단추를 가운데에 배치하기 위해 .center이라는 또 다른 클래스를 만들었습니다.

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

데모 : 나는 부트 스트랩의 최신 버전 및 모달의 사용에 따라이에 약간 다른 테이크를 넣어려고하지만 오히려 조동사 이외의 컨테이너를 사용하는 사실이 보유하고 http://jsfiddle.net/aJfMx/8/

Answer 2

. 꽤 견고하기 때문에 나는 앞서 언급 한 해결책에서 벗어나는 것이 아닙니다. 그러나, 내가 게시하는 이유는 최신 버전이 브라우저 간 지원과 창 크기 조정을 보장하기 때문입니다.

먼저해야 할 일은 form-horizontal 클래스를 호출 한 다음 각 양식 요소에 대해 양식 그룹을 만드는 것입니다. 그것보다 더 복잡 소리 :

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

및

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

보기 ... 아니 나쁜 전혀.

일단 양식 그룹에 대해 길이를 설정하면 모양이 아주 좋아집니다. 이렇게하면 창 크기를 조정할 때 적절한 크기 조정이 적용됩니다. 가장 중요한 부분은 양식 모양을 사용자 정의하여 원하는 경우가 아니면 CSS를 수정하지 않아도된다는 것입니다. 부트 스트랩이 그것을 처리합니다. 이 게시물의 목적에 따라 더 자세히 읽고 싶다면 여기에 꽤 좋은 자습서 (http://tutsme-webdesign.info/bootstrap-3-contact-modal/)가 있습니다. 여기 내가 튜토리얼을 토대로 진짜 빨리 던진 것입니다.

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