.net，mvc使用bootstrap做一个标准后台

今天准备搭一个公用后台，使用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>
View Code

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>
View Code

列表页

@{
    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="#">&laquo;</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="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
</div>
View Code

内容添加页

 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>
View Code

bootstrap 资源请到官网下载。。地址：http://v3.bootcss.com/getting-started/

posted @ 2014-10-21 10:38  xuxzx  阅读(519)  评论(0)  编辑  收藏  举报