| 加入bootstrap |
| webapp>建立static_res>建立css 與 script 資料夾 下載所需的css和js檔，放置於/static_res/css/與/static_res/script/資料夾中 |
| 【SpringConfig.xml】加入：
<!-- enable transaction demarcation with
annotations -->
<mvc:annotation-driven />
<!-- Static resource mapping -->
<mvc:resources mapping="/styles/**" location="/static_res/css/" />
<mvc:resources mapping="/script/**" location="/static_res/script/" />
|
| 【defaultLayout.jsp】 在<!DOCTYPE html>前加入：
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles-extras" prefix="tilesx"%>
<tilesx:useAttribute id="csslist" name="csssList" classname="java.util.List" />
<tilesx:useAttribute id="jslist" name="scriptsList" classname="java.util.List" />
在<head>中加入：
<!-- CSS -->
<c:forEach var="item" items="${csslist}">
<link rel="stylesheet" href="${url}${item}" />
</c:forEach>
<!-- CSS End-->
在<body>的最末段加入：
<!-- Script -->
<c:forEach var="item" items="${jslist}">
<script type="text/javascript" src="${url}${item}"></script>
</c:forEach>
<!-- Script End-->
|
| 【defaultTemplate.xml】加入：
<!-- default CSS -->
<put-list-attribute name="csssList" cascade="true">
</put-list-attribute>
|
| 測試用的hello.jsp修改為： <div class="container"> <div class="jumbotron"> <h1>Hello ${user}!!</h1> <p>meet bootstrap!</p> <br /> <a class="btn btn-primary" href="hello_Tiles">helloTiles.html</a> </div> </div> |
| view>新增testTable.jsp 【testTable.jsp】
<%@ taglib
uri="http://www.springframework.org/tags"
prefix="spring"%>
<%@ taglib
uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<div class="container">
<div class="row">
<div class="col-lg-12">
<button type="button" id="delete"
class="btn btn-primary">delete</button>
<button type="button" id="add"
class="btn btn-primary">create</button>
<table class="table table-striped table-bordered
table-hover"
id="dataTables">
<thead>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>JobTitle</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>JobTitle</th>
<th>E-mail</th>
</tr>
<tr>
<th></th>
<th>ID</th>
<th>Name</th>
<th>JobTitle</th>
<th>E-mail</th>
</tr>
</tbody>
</table>
<form name="myform" method="post">
<input type="hidden" id="userid"
name="id" />
<input type="hidden" id="action" name="action"
/>
</form>
</div>
</div>
</div>
|
2016年5月23日 星期一
加入bootstrap
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言