Работа с формами в Bootstrap

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Кроме отдельных компонентов Bootstrap поддерживает также работу с формами как с единым целым. Если мы возьмем стандартное представление для регистрации Register.cshtml, то мы увидим, что к элементам формы уже применяют классы Bootstrap:

@{
    ViewBag.Title = "Register";
}

<h2>@ViewBag.Title.</h2>

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary()
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" class="btn btn-default" value="Register" />
        </div>
    </div>
}

К форме по умолчанию добавляется класс form-horizontal, который устанавливает выравнивание меток label по правой стороне связанных элементов ввода:

Кроме того, элементы визуально отличаются от стандартных, так как к ним применяются стили из Bootstrap. Для стилизации элементов форм служит класс form-control. Здесь также используется класс form-group, который задает расстояние между элементами форм.

Кроме form-horizontal мы можем применить к форме другой класс: form-inline, который выстраивает все элементы в линию. Например:

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @class = "form-inline", role = "form" }))
{
    @Html.AntiForgeryToken()
    <h4>Use a local account to log in.</h4>
    <hr />
    @Html.ValidationSummary(true)
    <div class="form-group">
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @placeholder = "Логин" })
            @Html.ValidationMessageFor(m => m.UserName)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder="Пароль" })
            @Html.ValidationMessageFor(m => m.Password)
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <div class="checkbox">
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe)
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Log in" class="btn btn-default" />
        </div>
    </div>
}

И в заключение разговора о формах следует сказать, что при использовании шаблонов формирования, когда Visual Studio автоматически генерирует вам разметку для представлений для создания и редактирования моделей, а создаваемые автоматически формы уже применяют классы Bootstrap, поэтому вам не придется вручную добавлять к ним вышеописанные классы.