Bootstrap 垂直(默认)表单
在建立asp.net mvc视图中,默认的表单是垂直表单,与vs 自动创建的T4模板是水平表单,相比较,没有了<div class="form-horizontal"> 和 class=control-label ,也没有列布局项 比如col-md-2 <div class="col-md-10">了。但<class="form-control">仍然保留。
如下视图代码表示了一个垂直表单。
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.CategoryID)
@Html.DropDownList("CategoryID", null, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.CategoryID, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Title)
@Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.Content)
@Html.EditorFor(model => model.Content)
</div>
<div class="form-group">
@Html.LabelFor(model => model.AuthorName)
@Html.EditorFor(model => model.AuthorName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AuthorName, "", new { @class = "text-danger" })
</div>
<div class="form-group">
@Html.LabelFor(model => model.PostTime)
@Html.EditorFor(model => model.PostTime, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.PostTime, "", new { @class = "text-danger" })
</div>
<input type="submit" value="新建" class="btn btn-default" />
}
更一般的原始html标记为:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">名字</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="请输入名字">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">姓</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="lastname"
placeholder="请输入姓">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</body>
</html>