Форматирование формы ботстрапа "правильный"?

Вот моя форма:

<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, но я пытаюсь понять, как строки и промежутки должны использоваться для "тонкой настройки" макета.

Я хочу, чтобы кнопка была централизована и имела некоторое пространство над ней. Как вы можете видеть, я провел несколько строк и классов, но может ли кто-нибудь показать мне способ "лучшей практики"? Это поможет мне составить более четкое представление о том, как правильно использовать эту инфраструктуру.

Ответ 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/

Ответ 2

Я собираюсь немного поработать над этим на основе новой версии бутстрапа и использования модального кода, но он справедлив для использования других контейнеров, а не модалов. Я не беру ничего от вышеупомянутого решения, потому что он довольно прочный; однако причина, по которой я публикую это, заключается в том, что более новая версия обеспечит поддержку кросс-браузера и изменение размера окна.

Первое, что вам нужно сделать, это вызвать форма-горизонтальный класс, а затем создать группу форм для каждого элемента формы. Звучит более сложно, чем есть:

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

Смотрите... Не так уж плохо.

Как только вы это сделаете, настройте свои col длины для групп форм, и вы должны быть в очень хорошей форме. При изменении размера окна это обеспечит правильный размер. Лучшая часть состоит в том, что, если вы не захотите вникать в собственную настройку внешнего вида формы, не требуется никаких модификаций 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>