Данное руководство устарело. Актуальное руководство: Руководство по 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, поэтому вам не придется вручную добавлять к ним вышеописанные классы.