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>