.net，mvc使用bootstrap做一个标准后台
今天准备搭一个公用后台，使用bootstrap，方便今后开发，顺便mark一下
后期列表页将使用kendo-ui，增强后台的效果
下面是代码。。。
login页面
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<!-- Bootstrap -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- 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 ]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: ;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: ;
border-bottom-left-radius: ;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: ;
border-top-right-radius: ;
}
</style>
</head>
<body>
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" placeholder="Email address" required autofocus>
<input type="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
layout
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="/css/dashboard.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Help</a></li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Analytics</a></li>
<li><a href="#">Export</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item</a></li>
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
<li><a href="">More navigation</a></li>
</ul>
<ul class="nav nav-sidebar">
<li><a href="">Nav item again</a></li>
<li><a href="">One more nav</a></li>
<li><a href="">Another nav item</a></li>
</ul>
</div>
@RenderBody()
</div>
</div>
</body>
</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>,</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>,</td>
<td>amet</td>
<td>consectetur</td>
<td>adipiscing</td>
<td>elit</td>
</tr>
<tr>
<td>,</td>
<td>Integer</td>
<td>nec</td>
<td>odio</td>
<td>Praesent</td>
</tr>
<tr>
<td>,</td>
<td>libero</td>
<td>Sed</td>
<td>cursus</td>
<td>ante</td>
</tr>
<tr>
<td>,</td>
<td>dapibus</td>
<td>diam</td>
<td>Sed</td>
<td>nisi</td>
</tr>
<tr>
<td>,</td>
<td>Nulla</td>
<td>quis</td>
<td>sem</td>
<td>at</td>
</tr>
<tr>
<td>,</td>
<td>nibh</td>
<td>elementum</td>
<td>imperdiet</td>
<td>Duis</td>
</tr>
<tr>
<td>,</td>
<td>sagittis</td>
<td>ipsum</td>
<td>Praesent</td>
<td>mauris</td>
</tr>
<tr>
<td>,</td>
<td>Fusce</td>
<td>nec</td>
<td>tellus</td>
<td>sed</td>
</tr>
<tr>
<td>,</td>
<td>augue</td>
<td>semper</td>
<td>porta</td>
<td>Mauris</td>
</tr>
<tr>
<td>,</td>
<td>massa</td>
<td>Vestibulum</td>
<td>lacinia</td>
<td>arcu</td>
</tr>
<tr>
<td>,</td>
<td>eget</td>
<td>nulla</td>
<td>Class</td>
<td>aptent</td>
</tr>
<tr>
<td>,</td>
<td>taciti</td>
<td>sociosqu</td>
<td>ad</td>
<td>litora</td>
</tr>
<tr>
<td>,</td>
<td>torquent</td>
<td>per</td>
<td>conubia</td>
<td>nostra</td>
</tr>
<tr>
<td>,</td>
<td>per</td>
<td>inceptos</td>
<td>himenaeos</td>
<td>Curabitur</td>
</tr>
<tr>
<td>,</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="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li class="disabled"><a href="#">»</a></li>
</ul>
</div>
</div>
</div>
内容添加页
@{
ViewBag.Title = "Add";
Layout = "~/Views/Shared/Web_Layout.cshtml";
}
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<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-primary">Submit</button>
</form>
</div>
bootstrap 资源请到官网下载。。地址：http://v3.bootcss.com/getting-started/
.net，mvc使用bootstrap做一个标准后台的更多相关文章
- 用bootstrap做一个背景可轮转的登录界面
用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...
- .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单
我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...
- BootStrap的一个标准框架的内容解释——来源于bootstrap官网
<!DOCTYPE html><!--HTML5的定义--><html lang="zh-cn"> <head> <meta ...
- 用PreferenceActivity做一个标准的设置界面
最后接触到一个任务,做一个工厂设置,在我看来工厂设置不需要多美观,但是一定要方便修改,添加功能,再就是使用方便,我就想到了用PreferenceActivity,android系统的settings就 ...
- ios之申请后台延时执行和做一个假后台的方法(系统进入长时间后台后,再进入前台部分功能不能实现)
转自:http://sis hu ok.com/forum/blogCategory/showByCategory.html?categories_id=138&user_id=10385 ...
- 使用bootstrap做一个响应式的页面
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap 做一个简单的母版页
随便搭的一个母版页,不太好看,只是为了看效果....请勿吐槽. 效果如图: 一.新建母版页,引入Bootstrap相关js文件 <link href="../css/bootstrap ...
- ios之申请后台延时执行和做一个假后台的方法
转自:http://sis hu ok.com/forum/blogCategory/showByCategory.html?categories_id=138&user_id=10385 ...
- 用Bootstrap做一个历史朝代表
引入CDN,算好需要合并的单元格. <!DOCTYPE html> <html> <head> <!-- 移动设备 --> <meta name= ...
随机推荐
- sql的内连接 左外连接 右外连接 全外连接等连接查询的关系图
经常会用到的,下面用图来表示各个连接
- QT 焦点事件（4种方式的解释，还有委托焦点）
1.setFocusPolicy(...)设置获得焦点的方式 Qt::TabFocus 通过Tab键获得焦点 Qt::ClickFocus 通过被单击获得焦点 Qt::StrongFocus 可通过上 ...
- .md文件 Markdown 语法说明
Markdown 语法说明 (简体中文版) / (点击查看快速入门) 概述 宗旨 兼容 HTML 特殊字符自动转换 区块元素 段落和换行 标题 区块引用 列表 代码区块 分隔线 区段元素 链接 强调 ...
- 41. First Missing Positive
题目: Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2 ...
- python脚本实例001 - 通过列表内容判断输入输出信息
要点总结: 输入输出方法,input().print()方法 list列表应用,list是一种有序的集合,可以随时添加和删除其中的元素. 条件语句if-else应用 #! /usr/bin/pytho ...
- Filter设计实现IP地址限制
示例:创建一个IP过滤Filter,当一个用户发出访问请求的时候,首先通过过滤器进行判断, 如果用户的IP地址被限制,就禁止访问,只有合法的IP才可以继续访问.IP过滤Filter代码如下: IPFi ...
- QTP之对测试用例的自动化过程的分解
第一部分:自动化一个测试用例 当你要开始自动化一个测试用例的时候,有一些重要的事情需要完成.当你完成所有这些事情的时候,测试脚本的自动化也随之完成. 在这里,我们将首先在大部分的自动化测试用例里找出所 ...
- java面试和笔试大全 分类： 面试 2015-07-10 22:07 10人阅读 评论(0) 收藏
2.String是最基本的数据类型吗? 基本数据类型包括byte.int.char.long.float.double.boolean和short. java.lang.String类是final类型 ...
- trim合理和谐
今天早上,到公司,噩耗传来.上周的上线的功能出现问题,后台mis中有数据不能保存了. 经过紧张的查找,还是我的问题.有一个查重操作,在查重前,会比对新旧值,新值顺手trim了.旧值直接保存了. 在比较 ...
- 函数lock_rec_set_nth_bit
lock 分配内存 lock = mem_heap_alloc(trx->lock_heap, sizeof(lock_t) + n_bytes); 内存分配图 0xxx 2 xxx 0xxx3 ...