12

ここに私のフォームがあります：

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

Bootstrap を使用して問題を解決しましたが、レイアウトを「微調整」するために行とスパンをどのように使用する必要があるかを理解しようとしています。

ボタンを中央に配置し、その上にスペースを確保したい。ご覧のとおり、いくつかの行とスパンクラスをごまかしましたが、誰かがこれを行う「ベストプラクティス」の方法を教えてもらえますか? このフレームワークを適切に使用する方法をより明確に理解するのに役立ちます。

4

2 に答える 2

46

あなたの返信を見たところです。これがあなたのモックアップに対する私の見解です。

デザインを適切にレイアウトするには、まずセクションを入力行とボタンの行の 2 つの行に分ける必要があります。これを行うには.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/

于 2012-04-29T14:46:05.170 に答える
1

新しいバージョンのブートストラップとモーダルの使用に基づいて、これについて少し異なる見方をしますが、モーダルではなく他のコンテナーを使用する場合にも当てはまります。前述のソリューションは非常に堅実であるため、私はこのソリューションから何も奪っていません。ただし、これを投稿する理由は、新しいバージョンではクロスブラウザーのサポートとウィンドウのサイズ変更が保証されるためです。

最初に行う必要があるのは、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 の変更は必要ないことです。Bootstrap がそれを処理します。この投稿の目的のためにさらに読みたい場合は、かなり優れたチュートリアル ( 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>
于 2014-06-23T23:51:59.670 に答える