diff --git a/pom.xml b/pom.xml
index a60fcf2ce034248bf97bf77df2812e040ae69dc9..a5606ea939b1b8cb948e03c408e1dcdd1146607a 100644
--- a/pom.xml
+++ b/pom.xml
@@ -131,7 +131,14 @@
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
-
+
+ <!-- Webjars (static dependencies distributed as JAR files) -->
+ <dependency>
+ <groupId>org.webjars</groupId>
+ <artifactId>bootstrap</artifactId>
+ <version>2.2.1</version>
+ </dependency>
+
<!-- Rome RSS -->
<dependency>
<groupId>rome</groupId>
diff --git a/src/main/webapp/WEB-INF/jsp/header.jsp b/src/main/webapp/WEB-INF/jsp/header.jsp
index 1cdc67061990b68d38ea1959e73813ead9f4f852..7ca657876cd3f3a28db5baa8b081d13bfaa01a96 100644
--- a/src/main/webapp/WEB-INF/jsp/header.jsp
+++ b/src/main/webapp/WEB-INF/jsp/header.jsp
@@ -5,9 +5,15 @@
-->
<head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
- <link rel="stylesheet" href="<spring:url value="/static/styles/petclinic.css" htmlEscape="true" />" type="text/css"/>
- <title>PetClinic :: a Spring Framework demonstration</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <title>PetClinic :: a Spring Framework demonstration</title>
+
+ <spring:url value="/resources/css/petclinic.css" var="petclinicCss" />
+ <link href="${petclinicCss}" rel="stylesheet"/>
+
+ <spring:url value="/webjars/bootstrap/2.2.1/css/bootstrap.min.css" var="bootstrapCss" />
+ <link href="${bootstrapCss}" rel="stylesheet"/>
+
</head>
diff --git a/src/main/webapp/WEB-INF/jsp/owners/form.jsp b/src/main/webapp/WEB-INF/jsp/owners/form.jsp
index 6ebdf2853f32e40b2c9e60dba3dde825dc0b9090..f051703a1636a228b09335f807a35351c6dde83a 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/form.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/form.jsp
@@ -10,69 +10,66 @@
<jsp:include page="../header.jsp"/>
<body>
- <div id="header">
+ <div id="header well">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" />
</div>
- <div id="main">
+ <div class="container" style="padding-top: 50px;">
<c:choose>
<c:when test="${owner['new']}"><c:set var="method" value="post"/></c:when>
<c:otherwise><c:set var="method" value="put"/></c:otherwise>
</c:choose>
- <h2><c:if test="${owner['new']}">New </c:if>Owner:</h2>
- <form:form modelAttribute="owner" method="${method}">
- <table>
- <tr>
- <th>
- First Name: <form:errors path="firstName" cssClass="errors"/>
- <br/>
- <form:input path="firstName" size="30" maxlength="80"/>
- </th>
- </tr>
- <tr>
- <th>
- Last Name: <form:errors path="lastName" cssClass="errors"/>
- <br/>
- <form:input path="lastName" size="30" maxlength="80"/>
- </th>
- </tr>
- <tr>
- <th>
- Address: <form:errors path="address" cssClass="errors"/>
- <br/>
- <form:input path="address" size="30" maxlength="80"/>
- </th>
- </tr>
- <tr>
- <th>
- City: <form:errors path="city" cssClass="errors"/>
- <br/>
- <form:input path="city" size="30" maxlength="80"/>
- </th>
- </tr>
- <tr>
- <th>
- Telephone: <form:errors path="telephone" cssClass="errors"/>
- <br/>
- <form:input path="telephone" size="20" maxlength="20"/>
- </th>
- </tr>
- <tr>
- <td>
- <c:choose>
- <c:when test="${owner['new']}">
- <p class="submit"><input type="submit" value="Add Owner"/></p>
- </c:when>
- <c:otherwise>
- <p class="submit"><input type="submit" value="Update Owner"/></p>
- </c:otherwise>
- </c:choose>
- </td>
- </tr>
- </table>
+ <h2><c:if test="${owner['new']}">New </c:if>Owner</h2>
+ <form:form modelAttribute="owner" method="${method}" class="form-horizontal" id="add-owner-form">
+ <fieldset>
+ <div class="control-group" id="firstName">
+ <label class="control-label">First Name </label>
+ <div class="controls">
+ <form:input path="firstName" />
+ <span class="help-inline"><form:errors path="firstName" /></span>
+ </div>
+ </div>
+ <div class="control-group" id="lastName">
+ <label class="control-label">Last Name </label>
+ <div class="controls">
+ <form:input path="lastName" />
+ <span class="help-inline"><form:errors path="lastName" /></span>
+ </div>
+ </div>
+ <div class="control-group" id="address">
+ <label class="control-label">Address </label>
+ <div class="controls">
+ <form:input path="address" />
+ <span class="help-inline"><form:errors path="address" /></span>
+ </div>
+ </div>
+ <div class="control-group" id="city">
+ <label class="control-label">City </label>
+ <div class="controls">
+ <form:input path="city" />
+ <span class="help-inline"><form:errors path="city" /></span>
+ </div>
+ </div>
+ <div class="control-group" id="telephone">
+ <label class="control-label">Telephone </label>
+ <div class="controls">
+ <form:input path="telephone" />
+ <span class="help-inline"><form:errors path="telephone" /></span>
+ </div>
+ </div>
+ <div class="form-actions">
+ <c:choose>
+ <c:when test="${owner['new']}">
+ <button type="submit">Add Owner</button>
+ </c:when>
+ <c:otherwise>
+ <button type="submit">Update Owner</button>
+ </c:otherwise>
+ </c:choose>
+ </div>
+ </fieldset>
</form:form>
-
</div>
<jsp:include page="../footer.jsp"/>
</body>
diff --git a/src/main/webapp/WEB-INF/jsp/owners/list.jsp b/src/main/webapp/WEB-INF/jsp/owners/list.jsp
index cb679b01907f416c23de494e719e90151c6a2550..5ca9cec0298c96ea1ef405d288df9819f7a5842d 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/list.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/list.jsp
@@ -9,15 +9,14 @@
<jsp:include page="../header.jsp"/>
<body>
- <div id="header">
+
+ <div class="container">
+
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" />
- </div>
- <div id="main">
-
- <h2>Owners:</h2>
+ <h2>Owners</h2>
- <table>
+ <table class="table table-striped">
<thead>
<tr>
<th>Name</th>
diff --git a/src/main/webapp/WEB-INF/jsp/owners/search.jsp b/src/main/webapp/WEB-INF/jsp/owners/search.jsp
index 1a1614f5ee2d508bc4d2b4437f616eb910e5be30..440da975d7c319a0226a347dec6d6fb741b5fa88 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/search.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/search.jsp
@@ -9,23 +9,21 @@
<body>
- <div id="header">
+ <div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" />
- </div>
- <div id="main">
- <h2>Find Owners:</h2>
+ <h2>Find Owners</h2>
<spring:url value="/owners" var="formUrl"/>
- <form:form modelAttribute="owner" action="${fn:escapeXml(formUrl)}" method="get">
+ <form:form modelAttribute="owner" action="${fn:escapeXml(formUrl)}" method="get" class="form-horizontal">
<fieldset>
- <label class="control-label">Last name:</label>
<div class="controls">
+ <label class="control-label">Last name </label>
<form:input path="lastName" size="30" maxlength="80"/>
- <form:errors path="*" cssClass="errors"/>
+ <span class="help-inline"><form:errors path="*" /></span>
</div>
- <div>
+ <div class="form-actions">
<button type="submit">Find Owner</button>
</div>
</fieldset>
@@ -36,7 +34,7 @@
<jsp:include page="../footer.jsp"/>
- </div>
+ </div>
</body>
</html>
diff --git a/src/main/webapp/WEB-INF/jsp/owners/show.jsp b/src/main/webapp/WEB-INF/jsp/owners/show.jsp
index 60c0c031ab210eba513145273623a2ac7380dd61..640d31e86bf85d73ee8740b395664b976caea45c 100644
--- a/src/main/webapp/WEB-INF/jsp/owners/show.jsp
+++ b/src/main/webapp/WEB-INF/jsp/owners/show.jsp
@@ -3,21 +3,19 @@
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<html lang="en">
<jsp:include page="../header.jsp"/>
<body>
- <div id="header">
+ <div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" />
- </div>
- <div id="main">
- <h2>Owner Information</h2>
+ <h2>Owner Information</h2>
- <table>
+ <table class="table table-striped" style="width:600px;">
<tr>
<th>Name</th>
<td><b>${owner.firstName} ${owner.lastName}</b></td>
@@ -55,7 +53,7 @@
<h2>Pets and Visits</h2>
<c:forEach var="pet" items="${owner.pets}">
- <table width="94%">
+ <table class="table" style="width:600px;">
<tr>
<td valign="top">
<table>
@@ -119,10 +117,11 @@
</tr>
</table>
</c:forEach>
+
+ <jsp:include page="../footer.jsp"/>
</div>
- <jsp:include page="../footer.jsp"/>
</body>
</html>
diff --git a/src/main/webapp/WEB-INF/jsp/pets/form.jsp b/src/main/webapp/WEB-INF/jsp/pets/form.jsp
index c3d942715ba1c667c2a4792c008130ed7df8836b..495e7df681e9504c68ccf5a21bef622deee70a18 100644
--- a/src/main/webapp/WEB-INF/jsp/pets/form.jsp
+++ b/src/main/webapp/WEB-INF/jsp/pets/form.jsp
@@ -8,12 +8,10 @@
<jsp:include page="../header.jsp"/>
<body>
- <div id="header">
+
+ <div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" />
- </div>
-
- <div id="main">
<c:choose>
<c:when test="${pet['new']}"><c:set var="method" value="post"/></c:when>
<c:otherwise><c:set var="method" value="put"/></c:otherwise>
diff --git a/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp b/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp
index 0756eedabe69be737f9ea34a6e2b355375aeac6a..871c99a850a695174bd2a68825aec7dfb4372e9d 100644
--- a/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp
+++ b/src/main/webapp/WEB-INF/jsp/pets/visitForm.jsp
@@ -9,13 +9,11 @@
<jsp:include page="../header.jsp"/>
<body>
- <div id="header">
- <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
- <img src="${banner}" />
- </div>
- <div id="main">
+ <div class="container">
+ <spring:url value="/resources/images/banner-graphic.png" var="banner"/>
+ <img src="${banner}" />
<h2><c:if test="${visit['new']}">New </c:if>Visit:</h2>
<form:form modelAttribute="visit">
diff --git a/src/main/webapp/WEB-INF/jsp/vets.jsp b/src/main/webapp/WEB-INF/jsp/vets.jsp
index 8c12018f0b3bb2a771c6a4c840f4e3a9525b7a4b..bb9e0d0a27b1eb7806aa9837eadca7232b0b20e4 100644
--- a/src/main/webapp/WEB-INF/jsp/vets.jsp
+++ b/src/main/webapp/WEB-INF/jsp/vets.jsp
@@ -5,17 +5,15 @@
<html lang="en">
-<jsp:include page="header.jsp"/>
<body>
- <div id="header">
+ <div class="container">
+ <jsp:include page="header.jsp"/>
+
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" />
- </div>
-
- <div id="main">
- <h2>Veterinarians:</h2>
+ <h2>Veterinarians</h2>
<table>
<thead>
diff --git a/src/main/webapp/WEB-INF/jsp/welcome.jsp b/src/main/webapp/WEB-INF/jsp/welcome.jsp
index 95270b8f84247e795c8d81a4181a4cbbff93ddba..f292716c44b1b138495f9eb6811844a3f0daeeb3 100644
--- a/src/main/webapp/WEB-INF/jsp/welcome.jsp
+++ b/src/main/webapp/WEB-INF/jsp/welcome.jsp
@@ -7,27 +7,22 @@
<jsp:include page="header.jsp"/>
<body>
- <div id="header">
+ <div class="container">
<spring:url value="/resources/images/banner-graphic.png" var="banner"/>
<img src="${banner}" />
- </div>
-
- <div id="main">
<img src="<spring:url value="/resources/images/pets.png" htmlEscape="true" />" align="right" style="position:relative;right:30px;"></img>
<h2><fmt:message key="welcome"/></h2>
- <ul>
+ <ul class="unstyled">
<li><a href="<spring:url value="/owners/search" htmlEscape="true" />">Find owner</a></li>
<li><a href="<spring:url value="/vets" htmlEscape="true" />">Display all veterinarians</a></li>
<li><a href="<spring:url value="/resources/html/tutorial.html" htmlEscape="true" />">Tutorial</a></li>
</ul>
- <p> </p>
- <p> </p>
+ <jsp:include page="footer.jsp"/>
</div>
- <jsp:include page="footer.jsp"/>
</body>
</html>
diff --git a/src/main/webapp/WEB-INF/petclinic-servlet.xml b/src/main/webapp/WEB-INF/petclinic-servlet.xml
index 4c56a423635f08ad3cbdf4335b913d995f20c420..095746eb6a8a2325e750a30c61066a04c713fbb1 100644
--- a/src/main/webapp/WEB-INF/petclinic-servlet.xml
+++ b/src/main/webapp/WEB-INF/petclinic-servlet.xml
@@ -64,6 +64,9 @@
<mvc:annotation-driven content-negotiation-manager="contentNegotiationManager" />
<mvc:resources mapping="/resources/**" location="/resources/"/>
+
+ <mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
+
<bean id="contentNegotiationManager" class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
<property name="favorPathExtension" value="false" />
diff --git a/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml b/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml
index a45edac8ec5d48677f871857ad3898cd517162f8..162fab1f27e57303ac95e0c77d75ba7aa42fe033 100644
--- a/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml
+++ b/src/main/webapp/WEB-INF/spring/applicationContext-jdbc.xml
@@ -53,7 +53,7 @@
Exporter that exposes the Clinic DAO and the CallMonitoringAspect via JMX,
based on the @ManagedResource, @ManagedAttribute, and @ManagedOperation annotations.
-->
- <context:mbean-export/>
+ <context:mbean-export/>
<!-- PetClinic's central data access object using Spring's SimpleJdbcTemplate -->
<bean id="clinic" class="org.springframework.samples.petclinic.jdbc.SimpleJdbcClinic"/>
diff --git a/src/main/webapp/resources/css/petclinic.css b/src/main/webapp/resources/css/petclinic.css
new file mode 100644
index 0000000000000000000000000000000000000000..ebf2eb15a5051e546ae5fa0a0bbc864aef702235
--- /dev/null
+++ b/src/main/webapp/resources/css/petclinic.css
@@ -0,0 +1,5 @@
+.container {
+ padding-top: 10px;
+ margin-left: 50px;
+}
+
diff --git a/src/main/webapp/resources/styles/petclinic.css b/src/main/webapp/resources/styles/petclinic.css
deleted file mode 100644
index e12f96af7807f9e1baadbffcaa75a7e1ead6abba..0000000000000000000000000000000000000000
--- a/src/main/webapp/resources/styles/petclinic.css
+++ /dev/null
@@ -1,234 +0,0 @@
-/* main elements */
-
-body,div,td {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 12px;
- color: #666;
-}
-
-body {
- background-color: #fff;
- background-image: url(../images/banner-graphic.png);
- background-position: top center;
- background-repeat: no-repeat;
- text-align: center;
- min-width: 600px;
- margin-top: 60px;
- margin-left: auto;
- margin-right: auto;
-}
-
-div {
- margin: 5px 25px 5px 25px;
- text-align: left;
-}
-
-/* header and footer elements */
-
-#main {
- margin:0 auto;
- position:relative;
- top: 35px;
- left:0px;
- width:560px;
- text-align:left;
-}
-
-.footer {
- background:#fff;
- border:none;
- margin-top:20px;
- border-top:1px solid #999999;
- width:100%;
-}
-
-.footer td {color:#999999;}
-
-.footer a:link {color: #7db223;}
-
-
-/* text styles */
-
-h1,h2,h3 {
- font-family: Helvetica, sans-serif;
- color: #7db223;
-}
-
-h1 {
- font-size: 20px;
- line-height: 26px;
-}
-
-h2 {
- font-size: 18px;
- line-height: 24px;
-}
-
-h3 {
- font-size: 15px;
- line-height: 21px;
- color:#555;
-}
-
-h4 {
- font-size: 14px;
- line-height: 20px;
-}
-
-.errors {
- color: red;
- font-weight: bold;
-}
-
-a {
- text-decoration: underline;
- font-size: 13px;
-}
-
-a:link {
- color: #7db223;
-}
-
-a:hover {
- color: #456314;
-}
-
-a:active {
- color: #7db223;
-}
-
-a:visited {
- color: #7db223;
-}
-
-ul {
- list-style: disc url(../images/bullet-arrow.png);
-}
-
-li {
- padding-top: 5px;
- text-align: left;
-}
-
-li ul {
- list-style: square url(../images/bullet-arrow.png);
-}
-
-li ul li ul {
- list-style: circle none;
-}
-
-/* table elements */
-
-table {
- background: #d6e2c3;
- margin: 3px 0 0 0;
- border: 4px solid #d6e2c3;
- border-collapse: collapse;
-}
-
-table table {
- margin: -5px 0;
- border: 0px solid #e0e7d3;
- width: 100%;
-}
-
-table td,table th {
- padding: 8px;
-}
-
-table th {
- font-size: 12px;
- text-align: left;
- font-weight: bold;
-}
-
-table thead {
- font-weight: bold;
- font-style: italic;
- background-color: #c2ceaf;
-}
-
-table a:link {color: #303030;}
-
-caption {
- caption-side: top;
- width: auto;
- text-align: left;
- font-size: 12px;
- color: #848f73;
- padding-bottom: 4px;
-}
-
-fieldset {
- background: #e0e7d3;
- padding: 8px;
- padding-bottom: 22px;
- border: none;
- width: 560px;
-}
-
-fieldset label {
- width: 70px;
- float: left;
- margin-top: 1.7em;
- margin-left: 20px;
-}
-
-fieldset textfield {
- margin: 3px;
- height: 20px;
- background: #e0e7d3;
-}
-
-fieldset textarea {
- margin: 3px;
- height: 165px;
- background: #e0e7d3;
-}
-
-fieldset input {
- margin: 3px;
- height: 20px;
- background: #e0e7d3;
-}
-
-fieldset table {
- width: 100%;
-}
-
-fieldset th {
- padding-left: 25px;
-}
-
-.table-buttons {
- background-color:#fff;
- border:none;
-}
-
-.table-buttons td {
- border:none;
-}
-
-.submit input {
- background:url(../images/submit-bg.png) repeat-x;
- border: 2px outset #d7b9c9;
- color:#383838;
- padding:2px 10px;
- font-size:11px;
- text-transform:uppercase;
- font-weight:bold;
-}
-
-.updated {
- background:#ecf1e5;
- font-size:11px;
- margin-left:2px;
- border:4px solid #ecf1e5;
-}
-
-.updated td {
- padding:2px 8px;
- font-size:11px;
- color:#888888;
-}