今天准备搭一个公用后台，使用bootstrap，方便今后开发，顺便mark一下
后期列表页将使用kendo-ui，增强后台的效果
下面是代码。。。
login页面
1 @{
2 Layout = null;
3 }
4
5 <!DOCTYPE html>
6
7 <html lang="zh-cn">
8 <head>
9 <meta charset="utf-8">
10 <meta http-equiv="X-UA-Compatible" content="IE=edge">
11 <meta name="viewport" content="width=device-width, initial-scale=1">
12 <title>Bootstrap 101 Template</title>
13
14 <!-- Bootstrap -->
15 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
16 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
17 <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
18 <!--[if lt IE 9]>
19 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
20 <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
21 <![endif]-->
22 <style>
23 body {
24 padding-top: 40px;
25 padding-bottom: 40px;
26 background-color: #eee;
27 }
28
29 .form-signin {
30 max-width: 330px;
31 padding: 15px;
32 margin: 0 auto;
33 }
34 .form-signin .form-signin-heading,
35 .form-signin .checkbox {
36 margin-bottom: 10px;
37 }
38 .form-signin .checkbox {
39 font-weight: normal;
40 }
41 .form-signin .form-control {
42 position: relative;
43 height: auto;
44 -webkit-box-sizing: border-box;
45 -moz-box-sizing: border-box;
46 box-sizing: border-box;
47 padding: 10px;
48 font-size: 16px;
49 }
50 .form-signin .form-control:focus {
51 z-index: 2;
52 }
53 .form-signin input[type="email"] {
54 margin-bottom: -1px;
55 border-bottom-right-radius: 0;
56 border-bottom-left-radius: 0;
57 }
58 .form-signin input[type="password"] {
59 margin-bottom: 10px;
60 border-top-left-radius: 0;
61 border-top-right-radius: 0;
62 }
63 </style>
64 </head>
65 <body>
66 <div class="container">
67
68 <form class="form-signin" role="form">
69 <h2 class="form-signin-heading">Please sign in</h2>
70 <input type="email" class="form-control" placeholder="Email address" required autofocus>
71 <input type="password" class="form-control" placeholder="Password" required>
72 <div class="checkbox">
73 <label>
74 <input type="checkbox" value="remember-me"> Remember me
75 </label>
76 </div>
77 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
78 </form>
79
80 </div>
81
82 <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
83 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
84 <!-- Include all compiled plugins (below), or include individual files as needed -->
85 <script src="/bootstrap/js/bootstrap.min.js"></script>
86 </body>
87 </html>
layout
1 @{
2 Layout = null;
3 }
4
5 <!DOCTYPE html>
6
7 <html lang="en">
8 <head>
9 <meta charset="utf-8">
10 <meta http-equiv="X-UA-Compatible" content="IE=edge">
11 <meta name="viewport" content="width=device-width, initial-scale=1">
12 <meta name="description" content="">
13 <meta name="author" content="">
14 <link rel="icon" href="../../favicon.ico">
15
16 <title>Dashboard Template for Bootstrap</title>
17
18 <!-- Bootstrap core CSS -->
19 <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
20 <!-- Custom styles for this template -->
21 <link href="/css/dashboard.css" rel="stylesheet" />
22 </head>
23
24 <body>
25
26 <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
27 <div class="container-fluid">
28 <div class="navbar-header">
29 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
30 <span class="sr-only">Toggle navigation</span>
31 <span class="icon-bar"></span>
32 <span class="icon-bar"></span>
33 <span class="icon-bar"></span>
34 </button>
35 <a class="navbar-brand" href="#">Project name</a>
36 </div>
37 <div class="navbar-collapse collapse">
38 <ul class="nav navbar-nav navbar-right">
39 <li><a href="#">Dashboard</a></li>
40 <li><a href="#">Settings</a></li>
41 <li><a href="#">Profile</a></li>
42 <li><a href="#">Help</a></li>
43 </ul>
44 <form class="navbar-form navbar-right">
45 <input type="text" class="form-control" placeholder="Search...">
46 </form>
47 </div>
48 </div>
49 </div>
50
51 <div class="container-fluid">
52 <div class="row">
53 <div class="col-sm-3 col-md-2 sidebar">
54 <ul class="nav nav-sidebar">
55 <li class="active"><a href="#">Overview</a></li>
56 <li><a href="#">Reports</a></li>
57 <li><a href="#">Analytics</a></li>
58 <li><a href="#">Export</a></li>
59 </ul>
60 <ul class="nav nav-sidebar">
61 <li><a href="">Nav item</a></li>
62 <li><a href="">Nav item again</a></li>
63 <li><a href="">One more nav</a></li>
64 <li><a href="">Another nav item</a></li>
65 <li><a href="">More navigation</a></li>
66 </ul>
67 <ul class="nav nav-sidebar">
68 <li><a href="">Nav item again</a></li>
69 <li><a href="">One more nav</a></li>
70 <li><a href="">Another nav item</a></li>
71 </ul>
72 </div>
73 @RenderBody()
74 </div>
75 </div>
76 </body>
77 </html>
列表页
@{
ViewBag.Title = "主页";
Layout = "~/Views/Shared/Web_Layout.cshtml";
}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,002</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>1,003</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>1,003</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>1,004</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>1,005</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>1,006</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>1,007</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>1,008</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>1,009</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>1,010</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>1,011</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>1,012</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>1,013</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>1,014</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>1,015</td>
<td>sodales</td>
<td>ligula</td>
<td>in</td>
<td>libero</td>
</tr>
</tbody>
</table>
<div class="text-center">
<ul class="pagination">
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="disabled"><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
内容添加页
1 @{
2 ViewBag.Title = "Add";
3 Layout = "~/Views/Shared/Web_Layout.cshtml";
4 }
5 <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
6 <form role="form">
7 <div class="form-group">
8 <label for="exampleInputEmail1">Email address</label>
9 <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
10 </div>
11 <div class="form-group">
12 <label for="exampleInputPassword1">Password</label>
13 <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
14 </div>
15 <div class="form-group">
16 <label for="exampleInputFile">File input</label>
17 <input type="file" id="exampleInputFile">
18 <p class="help-block">Example block-level help text here.</p>
19 </div>
20 <div class="checkbox">
21 <label>
22 <input type="checkbox">
23 Check me out
24 </label>
25 </div>
26 <button type="submit" class="btn btn-primary">Submit</button>
27 </form>
28 </div>
bootstrap 资源请到官网下载。。地址：http://v3.bootcss.com/getting-started/
时间： 2024-07-31 04:11:39