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"  
            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"  
            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>