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>
Bootstrap 垂直(默认)表单的更多相关文章
- bootstrap上传表单的时候上传的数据默认是0 一定要小心
bootstrap上传表单的时候上传的数据默认是0 一定要小心
- Bootstrap<基础六> 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单. 表单布局 Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 垂直或基本表单 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- SpringSecurity 默认表单登录页展示流程源码
SpringSecurity 默认表单登录页展示流程源码 本篇主要讲解 SpringSecurity提供的默认表单登录页 它是如何展示的的流程, 涉及 1.FilterSecurityIntercep ...
- 【从零开始学BPM,Day2】默认表单开发
[课程主题]主题:5天,一起从零开始学习BPM[课程形式]1.为期5天的短任务学习2.每天观看一个视频,视频学习时间自由安排. [第二天课程] Step 1 软件下载:H3 BPM10.0全开放免费下 ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- Bootstrap学习-排版-表单
1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...
- Bootstrap学习(2)--表单
Bootstrap里的role属性,增强标签的语义化,提高识别力, 如:<form role="form"> input.select.textarea等元素,在Bo ...
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- Bootstrap系列 -- 21. 表单提示信息
平常在制作表单验证时,要提供不同的提示信息.在Bootstrap框架中也提供了这样的效果.使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部. < ...
随机推荐
- 【HDOJ6312】Game(博弈)
题意: 有一个1到n的序列,两个人轮流取数,取走一个数同时会取走它所有的因子,不能取者为输,两个人都按最优策略取数,问先手是否必胜 思路: #include<cstdio> #includ ...
- ArrayList去除重复元素
去除一个ArrayList的重复元素有两种方法:(ArrayList与Vector的存储结构是Object[],LinkedList是双向列表) 第一种是不需要借助临时list,用equals方法比较 ...
- hdu 1496 hash
hash?判重,是否一样?相等?等式!没有想到,这次题做玩后,学到了HASH这一功能!当数据量在数组允许大小范围内时候即可!判断等式俩边是否相等,从而获得解的个数!从复杂度,n*m*k****,降到 ...
- HDU3549 最大流 裸题
EK算法 时间复杂度o(n*m*m) 因为有反向边每次bfs时间为 n*m 每次删一条边 最多m次 代码 #include<iostream> #include<string.h& ...
- Eclipse注释模板配置
不过感觉作用不大,因为@date这些不是标准的Java注释.
- Go---Redis连接池
之前一篇文章介绍过使用redigo连接redis数据库处理,在使用中发现如果初始化一条链接连接redis做相关操作,使用中发现当两个程序交替使用redis时,先前建立的链接会断掉,只能每次操作的时候重 ...
- linux的shell的until循环举例说明
执行脚本: sh login.sh user,其中user为第一个参数 如下所示,如果用户‘user’登录,'who | grep "$1"'为true,until循环结束,程序继 ...
- 【转】PHP实现系统编程(四)--- 本地套接字(Unix Domain Socket)
原文:http://blog.csdn.net/zhang197093/article/details/78143687?locationNum=6&fps=1 --------------- ...
- Java编程50题
[程序1] 题目:古典问题:有一对兔子.从出生后第3个月起每一个月都生一对兔子,小兔子长到第三个月后每一个月又生一对兔子,假如兔子都不死.问每一个月的兔子总数为多少? //这是一个菲波拉契 ...
- Echarts 的样例
jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...