#35 tab,message换成BootStrap

examples/mini-web/src/main/webapp/WEB-INF/layouts/default.jsp

@@ -13,7 +13,7 @@
 <meta http-equiv="Pragma" content="no-cache" />
 <meta http-equiv="Expires" content="0" />
 
-<link href="${ctx}/static/bootstrap/2.0.3/bootstrap.min.css" type="text/css" rel="stylesheet" />
+<link href="${ctx}/static/bootstrap/2.0.3/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
 <link href="${ctx}/static/mini-web.css" type="text/css" rel="stylesheet" />
 <script src="${ctx}/static/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script src="${ctx}/static/jquery-validation/1.9.0/jquery.validate.min.js" type="text/javascript"></script>
@@ -31,5 +31,6 @@
 		</div>
 		<%@ include file="/WEB-INF/layouts/footer.jsp"%>
 	</div>
+	<script src="${ctx}/static/bootstrap/2.0.3/js/bootstrap.min.js" type="text/javascript"></script>
 </body>
 </html>

examples/mini-web/src/main/webapp/WEB-INF/layouts/header.jsp

@@ -4,27 +4,25 @@
 <c:set var="ctx" value="${pageContext.request.contextPath}"/>
 <div id="header" class="span12">
 	<div id="title">
-		<div class="title">Mini-Web示例</div>
-		<div>
-		<span class="subtitle">--CRUD管理界面演示</span>
-		<shiro:user>
+	    	<h1>Mini-Web示例<small>--CRUD管理界面演示</small></h1>
+	    	<shiro:user>
 			<span class="pull-right">Hello, <shiro:principal property="name"/>!!</span>
 		</shiro:user>
-		</div>
 	</div>
+		
 	<div id="menu">
-		<ul>
+		<ul class="nav nav-tabs">
 			<shiro:user>
 			<shiro:hasPermission name="user:view">
-				<li><a href="${ctx}/account/user/">帐号列表</a></li>
+				<li id="user-tab"><a href="${ctx}/account/user/" >帐号列表</a></li>
 			</shiro:hasPermission>
 			<shiro:hasPermission name="group:view">
-				<li><a href="${ctx}/account/group/">权限组列表</a></li>
+				<li id="group-tab"><a href="${ctx}/account/group/">权限组列表</a></li>
 			</shiro:hasPermission>
 			<li><a href="${ctx}/logout">退出登录</a></li>
 			</shiro:user>
 			<shiro:guest>
-				<li><a href="${ctx}/login">登录</a></li>
+				<li class="active"><a href="${ctx}/login">登录</a></li>
 			</shiro:guest>
 		</ul>
 		

examples/mini-web/src/main/webapp/WEB-INF/views/account/groupForm.jsp

@@ -8,6 +8,7 @@
 	<title>帐号管理</title>
 	<script>
 		$(document).ready(function() {
+			$("#group-tab").addClass("active");
 			$("#inputForm").validate();
 		});
 	</script>

examples/mini-web/src/main/webapp/WEB-INF/views/account/groupList.jsp

@@ -6,16 +6,17 @@
 <head>
 	<title>帐号管理</title>
 	<script>
-	 $(document).ready(function() {
-		 $("#message").fadeOut(3000);
-	});
+		$(document).ready(function() {
+			//聚焦第一个输入框
+			$("#group-tab").addClass("active");
+		});
 	</script>
 </head>
 
 <body>
 	<h4>权限组列表</h4>
 	<c:if test="${not empty message}">
-		<div id="message" class="success">${message}</div>	
+		<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>	
 	</c:if>
 	
 	<table id="contentTable" class="table table-striped table-bordered table-condensed">

examples/mini-web/src/main/webapp/WEB-INF/views/account/userForm.jsp

@@ -11,6 +11,7 @@
 		$(document).ready(function() {
 			//聚焦第一个输入框
 			$("#loginName").focus();
+			$("#user-tab").addClass("active");
 			//为inputForm注册validate函数
 			$("#inputForm").validate({
 				rules: {
@@ -44,7 +45,7 @@
 		<input type="hidden" name="id" value="${user.id}"/>
 		<fieldset>
 			<legend><small>管理用户</small></legend>
-			<div id="messageBox" class="error" style="display:none">输入有误，请先更正。</div>
+			<div id="messageBox" class="alert alert-error" style="display:none">输入有误，请先更正。</div>
 	
 			<div class="control-group">
 				<label for="loginName" class="control-label">登录名:</label>

examples/mini-web/src/main/webapp/WEB-INF/views/account/userList.jsp

@@ -6,16 +6,17 @@
 <head>
 	<title>帐号管理</title>
 	<script>
-	 $(document).ready(function() {
-		$("#message").fadeOut(3000);
-	});
+		$(document).ready(function() {
+			//聚焦第一个输入框
+			$("#user-tab").addClass("active");
+		});
 	</script>
 </head>
 
 <body>
 	<h4>用户列表</h4>
 	<c:if test="${not empty message}">
-		<div id="message" class="success">${message}</div>	
+		<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
 	</c:if>
 	
 	<table id="contentTable" class="table table-striped table-bordered table-condensed">

examples/mini-web/src/main/webapp/WEB-INF/views/login.jsp

@@ -17,17 +17,23 @@
 </head>
 
 <body>
+	<form:form id="loginForm" action="${ctx}/login" method="post" class="form-horizontal">
 	<%
 	String error = (String) request.getAttribute(FormAuthenticationFilter.DEFAULT_ERROR_KEY_ATTRIBUTE_NAME);
 	if(error != null){
 	%>
-		<div class="error">登录失败，请重试.</div>
+		<div class="control-group">
+		<div class="controls ">
+		<div class="alert alert-error">
+		<button class="close" data-dismiss="alert">×</button>
+		登录失败，请重试.</div>
+		</div>
+		</div>
+		
 	<%
 	}
 	%>
-	<form:form id="loginForm" action="${ctx}/login" method="post" class="form-horizontal">
-		<fieldset>
-			<legend><small>登录</small></legend>
+
 			<div class="control-group">
 				<label for="username" class="control-label">名称:</label>
 				<div class="controls">
@@ -40,7 +46,6 @@
 					<input type="password" id="password" name="password" size="25"  class="required"/>
 				</div>
 			</div>
-		</fieldset>
 		<div class="control-group">
 			<div class="controls">
 				<div class="input-append">

examples/mini-web/src/main/webapp/static/mini-web.css

@@ -1,40 +1,3 @@
-/* general */
-
-/* header */
-#title div.title {
-	font-size:2em;
-	color:#111;
-	letter-spacing: .1em;
-	
-}
-
-#title span.subtitle {
-	font-size:1.5em;
-	color: #999;
-	letter-spacing: .1em;
-	margin-bottom:0.75em;
-
-}
-
-#menu ul {
-	margin:0 0 0 0;
-	padding: 0.5em;
-	font-weight: bold;
-	background: #BACE87;
-	border-top: 2px solid #658A16;
-	border-bottom: 2px solid #658A16;
-}
-
-#menu li {display: inline;}
-
-#menu ul a {
-	padding: 0.5em;
-	text-decoration: none;
-	color: #fff;
-}
-
-#menu a:hover {background: #658A16;}
-
 /* footer */
 #footer {
 	margin-top: 15px;