zoukankan      html  css  js  c++  java
  • .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- 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/

  • 相关阅读:
    FFT学习笔记
    FWT(Fast Walsh Transformation)快速沃尔什变换学习笔记
    GMS2游戏开发学习历程
    [BZOJ3238][AHOI2013]差异 [后缀数组+单调栈]
    Trie树简单讲解
    自己的题
    小技巧
    编程注意事项
    构造方法
    递归
  • 原文地址:https://www.cnblogs.com/xuxzx/p/4039734.html
Copyright © 2011-2022 走看看