ブートストラップ形式のレイアウトは「正しい」方法ですか？

Question

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> 

HERESに作業例：

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

私はブートストラップを使用してそれをbodgedましたが、私はどのように行の把握を取得しようとしているとレイアウトを「微調整」するためにスパンを使用する必要があります。

ボタンを中央に配置し、その上にスペースを確保します。あなたが見ることができるように、私はそこでいくつかの行とスパンのクラスをフードしたことがありますが、誰かが私にこれを行うための「ベストプラクティス」の方法を示すことができますか？このフレームワークを適切に使用する方法をより明確に示すのに役立ちます。

Answer 1

^{あなたの返信を見ましたが、ここにあなたのモックアップを取ります。}

適切にデザインをレイアウトするためには、まず私たちが含まれているために、ブートストラップによって設定された.control-groupクラスに依存することができ、これを行うために、あなたのボタンの2行、入力行と列にセクションを分離する必要があります各セクションだから、代わりに.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-horizo​​ntalクラスを呼び出し、フォーム要素ごとにフォームグループを作成することです。それはよりも複雑に聞こえる：

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