<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
body
{
padding-top: 70px;
}
/* Set the fixed height of the footer here */
#footer
{
height: auto;
background-color: #f5f5f5;
}
#header
{
margin-top: -20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<p class="navbar-text">
Welcome,Lily.</p>
</li>
<li><a href="#">Link</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<div id="header" class="jumbotron hidden-xs">
<div class="container">
<h1>
Hello, world!</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<p>
<a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class=" hidden-print " role="complementary">
<ul class="nav ">
<li class="active"><a href="#download">下载Bootstrap</a>
<ul class="nav">
<li class=""><a href="#download-compiled">编译后的CSS、JS和字体文件</a></li>
<li class=""><a href="#download-additional">额外的下载渠道</a></li>
<li class=""><a href="#download-cdn">Bootstrap CDN</a></li>
</ul>
</li>
<li class=""><a href="#whats-included">包含了哪些文件</a>
<ul class="nav">
<li class=""><a href="#whats-included-precompiled">编译版</a></li>
<li class=""><a href="#whats-included-source">源码</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-9" role="main">
<!-- Getting started
================================================== -->
<div>
<h1>
h1. Bootstrap heading</h1>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh
ultricies vehicula. Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis
mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem
nec elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam
eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida
at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit.
</p>
<p class="text-muted">
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">
Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">
Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">
Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">
Donec ullamcorper nulla non metus auctor fringilla.</p>
<table class="table table-hover">
<thead>
<tr>
<th>
#
</th>
<th>
First Name
</th>
<th>
Last Name
</th>
<th>
Username
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
Mark
</td>
<td>
Otto
</td>
<td>
@@mdo
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Jacob
</td>
<td>
Thornton
</td>
<td>
@@fat
</td>
</tr>
<tr>
<td>
3
</td>
<td colspan="2">
Larry the Bird
</td>
<td>
@@twitter
</td>
</tr>
</tbody>
</table>
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">
Email address</label>
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">
Password</label>
<input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
</div>
<div class="form-group">
<label for="exampleInputFile">
File input</label>
<input id="exampleInputFile" type="file">
<p class="help-block">
Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Check me out
</label>
</div>
<button type="submit" class="btn btn-default">
Submit</button>
</form>
@RenderBody()
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">
Designed and built with all the love in the world by <a href="http://twitter.com/mdo"
target="_blank">@@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@@fat</a>.</p>
<p>
Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">
Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">
CC BY 3.0</a>.</p>
<p>
Bootstrap中文文档版权归<a href="http://www.bootcss.com/">Bootstrap中文网</a>及<a href="mailto:wangsai@bootcss.com">译者</a>所有。</p>
<p>
</p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
</body>
</html>
@model dynamic
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
@* <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">*@
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
body
{
padding-top: 70px;
}
/* Set the fixed height of the footer here */
#footer
{
height: auto;
background-color: #f5f5f5;
}
#header
{
margin-top: -20px;
}
label.valid
{
24px;
height: 24px;
background: url(/Content/img/valid.png) center center no-repeat;
display: inline-block;
text-indent: -9999px;
}
label.error
{
font-weight: bold;
color: red;
padding: 2px 8px;
margin-top: 2px;
}
</style>
</head>
<body>
<div class="container">
<div class="row-fluid">
<div class="span12">
<h1>
Twitter Bootstrap jQuery Validate Registration form</h1>
</div>
</div>
<div class="row-fluid">
<div class="span6 offset6">
<div id="maincontent" class="span8">
<form novalidate="novalidate" id="registration-form" class="form-horizontal">
<h1>
Sample Registration form <small>(Fill up the forms to get register)</small></h1>
<br>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="name">
Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="input name">
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="username">
User Name</label>
<div class="col-sm-10">
<input class="form-control" name="username" id="username" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="password">
Password</label>
<div class="col-sm-10">
<input class="form-control" name="password" id="password" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="confirm_password">
Retype Password</label>
<div class="col-sm-10">
<input class="form-control" name="confirm_password" id="confirm_password" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="email">
Email Address</label>
<div class="col-sm-10">
<input class="form-control" name="email" id="email" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="address">
Your Address</label>
<div class="col-sm-10">
<textarea class="form-control" name="address" id="address" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="agree">
Please agree to our policy</label>
<div class="col-sm-10">
<input id="agree" class="checkbox" name="agree" type="checkbox">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success btn-group-lg">
Register</button>
<button type="reset" class="btn">
Cancel</button>
</div>
</div>
</form>
</div>
<!-- .span -->
</div>
<!-- .row -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<!-- .container -->
<script src="@Url.Content("~/Scripts/register.js")" type="text/javascript"></script>
@* <script>
addEventListener('load', prettyPrint, false);
$(document).ready(function () {
$('pre').addClass('prettyprint linenums');
});
</script>*@
</body>
</html>
$(document).ready(function () {
$('#registration-form').validate({
rules: {
name: {
required: true,
required: true
},
username: {
minlength: 6,
required: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
email: {
required: true,
email: true
},
address: {
minlength: 10,
required: true
},
agree: "required"
},
highlight: function (element) {
$(element).closest('.form-group').removeClass('has-success').removeClass('has-feedback').addClass('has-error');
$(element).parent().find('.help-block').removeClass('glyphicon').removeClass('glyphicon-ok').removeClass('form-control-feedback');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success').addClass('has-feedback');
},
//errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
error.insertAfter(element);
}
,
success: function(element) {
element.addClass('glyphicon').addClass('glyphicon-ok').addClass('form-control-feedback');
}
});
}); // end document.ready