Элементы управления Checkbox и Radio используются соответственно для множественного или одиночного выбора.

Пример checkbox-кнопок

                <h2>Вертикальные чекбоксы</h2>
                <form role="form">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="cb1" />Обычный чекбокс 1
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="cb2" />Обычный чекбокс 2
                        </label>
                    </div>
                    <div class="checkbox disabled">
                        <label>
                            <input type="checkbox" name="cb3" disabled />Заблокированный чекбокс 3
                        </label>
                    </div>
                </form>

 

Пример radio-кнопок

               <h2>Вертикальные радиокнопки</h2>
                <form role="form">
                    <div class="radio">
                        <label>
                            <input type="radio" name="rb" value="radio1" />Радиокнопка обычная 1
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio" name="rb" value="radio2" />Радиокнопка обычная 1
                        </label>
                    </div>
                    <div class="radio disabled">
                        <label>
                            <input type="radio" name="rb" value="radio3" disabled />Радиокнопка заблокированная 3
                        </label>
                    </div>
                </form>

 

Чтобы заблокировать кнопку Checkbox или Radio, нужно добавить класс .disabled в контейнер с кнопкой, а также добавить атрибут disabled для кнопки.

 

Радиокнопки и чекбоксы в строку

        <div class="row">
            <div class="col-sm-offset-1 col-sm-5">
                <h1>Радиокнопки в строку</h1>
                <form role="form">
                    <label class="radio-inline">
                        <input type="radio" name="rb" value="rb1" /> Значение 1
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="rb" value="rb2" /> Значение 2
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="rb" value="rb3" disabled /> Значение 3
                    </label>
                </form>
            </div>
            <div class="col-sm-offset-1 col-sm-5">
                <h1>Чекбоксы в строку</h1>
                <form role="form">
                    <label class="checkbox-inline" >
                        <input type="checkbox" name="cb1" value="cb1" /> Значение 1
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="cb2" value="cb2" /> Значение 2
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" name="cb3" value="cb3" disabled /> Значение 3
                    </label>
                </form>
            </div>

 

 

Использование тэга Select в Bootstrap

Тэг <select> оказался наименее описанным в Bootstrap. Единственное, что нужно указать при использовании <select> - это класс .form-control.

        <select class="form-control" >
           <option value="1">Значение 1</option>
           <option value="2">Значение 2</option>
           <option value="3">Значение 3</option>
           <option value="4">Значение 4</option>
           <option value="5">Значение 5</option>
        </select>

 

Чтобы у <select> была возможность выбора нескольких значений, нужно добавить атрибут multiple:

         <select class="form-control" multiple>
             <option value="1">Значение 1</option>
             <option value="2">Значение 2</option>
             <option value="3">Значение 3</option>
             <option value="4">Значение 4</option>
             <option value="5">Значение 5</option>
         </select>

 

Нередактируемые поля в Bootstrap

Вместо полей формы для отображения и передачи данных можно использовать текстовый элемент <p>. Для этого ему нужно указать класс .form-control-static.

                <h1>Демо-вход</h1>
                <form role="form" class="form-horizontal">
                    <div class="form-group">
                        <label for="login" class="col-sm-2 control-label">Логин</label>
                        <div class="col-sm-9">
                            <p class="form-control-static">demologin</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pass" class="col-sm-2 control-label">Пароль</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" id="pass" placeholder="Пароль">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-5">
                            <button type="submit" class="btn btn-success">Войти</button>
                        </div>
                    </div>
                </form>