首页 > 代码库 > .net，mvc使用bootstrap做一个标准后台
.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=http://www.mamicode.com/"/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://www.mamicode.com/"http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>20 <script src=http://www.mamicode.com/"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=http://www.mamicode.com/"remember-me"> Remember me75 </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://www.mamicode.com/"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=http://www.mamicode.com/"/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=http://www.mamicode.com/"../../favicon.ico">15 16 <title>Dashboard Template for Bootstrap</title>17 18 <!-- Bootstrap core CSS -->19 <link href=http://www.mamicode.com/"/bootstrap/css/bootstrap.min.css" rel="stylesheet" />20 <!-- Custom styles for this template -->21 <link href=http://www.mamicode.com/"/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=http://www.mamicode.com/"#">Project name</a>36 </div>37 <div class="navbar-collapse collapse">38 <ul class="nav navbar-nav navbar-right">39 <li><a href=http://www.mamicode.com/"#">Dashboard</a></li>40 <li><a href=http://www.mamicode.com/"#">Settings</a></li>41 <li><a href=http://www.mamicode.com/"#">Profile</a></li>42 <li><a href=http://www.mamicode.com/"#">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=http://www.mamicode.com/"#">Overview</a></li>56 <li><a href=http://www.mamicode.com/"#">Reports</a></li>57 <li><a href=http://www.mamicode.com/"#">Analytics</a></li>58 <li><a href=http://www.mamicode.com/"#">Export</a></li>59 </ul>60 <ul class="nav nav-sidebar">61 <li><a href=http://www.mamicode.com/"">Nav item</a></li>62 <li><a href=http://www.mamicode.com/"">Nav item again</a></li>63 <li><a href=http://www.mamicode.com/"">One more nav</a></li>64 <li><a href=http://www.mamicode.com/"">Another nav item</a></li>65 <li><a href=http://www.mamicode.com/"">More navigation</a></li>66 </ul>67 <ul class="nav nav-sidebar">68 <li><a href=http://www.mamicode.com/"">Nav item again</a></li>69 <li><a href=http://www.mamicode.com/"">One more nav</a></li>70 <li><a href=http://www.mamicode.com/"">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=http://www.mamicode.com/"#">«</a></li> <li class="active"><a href=http://www.mamicode.com/"#">1</a></li> <li><a href=http://www.mamicode.com/"#">2</a></li> <li><a href=http://www.mamicode.com/"#">3</a></li> <li><a href=http://www.mamicode.com/"#">4</a></li> <li><a href=http://www.mamicode.com/"#">5</a></li> <li class="disabled"><a href=http://www.mamicode.com/"#">»</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 out24 </label>25 </div>26 <button type="submit" class="btn btn-primary">Submit</button>27 </form>28 </div>
bootstrap 资源请到官网下载。。地址：http://v3.bootcss.com/getting-started/
.net，mvc使用bootstrap做一个标准后台
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。