mirror of
https://github.com/spring-projects/spring-boot.git
synced 2026-09-24 10:19:03 +00:00
Merge pull request #10653 from Kim Rudolph
* gh-10653: Migrate spring-boot-sample-web-ui to Bootstrap v4
This commit is contained in:
Andy Wilkinson
Vendored
+6
-10
File diff suppressed because one or more lines are too long
-9404
File diff suppressed because it is too large
Load Diff
Vendored
-1250
File diff suppressed because it is too large
Load Diff
+6
-8
@@ -7,14 +7,12 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div th:fragment="navbar" class="navbar">
|
||||
<div class="navbar-inner">
|
||||
<a class="brand" href="http://thymeleaf.org">Thymeleaf</a>
|
||||
<ul class="nav">
|
||||
<li><a th:href="@{/}" href="messages.html"> Messages </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<nav th:fragment="navbar" class="navbar navbar-dark bg-primary">
|
||||
<a class="navbar-brand" href="http://thymeleaf.org">Thymeleaf</a>
|
||||
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
|
||||
<li class="nav-item"><a class="nav-link" th:href="@{/}" href="messages.html">Messages</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+16
-18
@@ -6,27 +6,25 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<div th:replace="fragments :: navbar"></div>
|
||||
<h1>Messages : Create</h1>
|
||||
<form id="messageForm" th:action="@{/(form)}" th:object="${message}"
|
||||
action="#" method="post">
|
||||
<div th:if="${#fields.hasErrors('*')}" class="alert alert-error">
|
||||
<p th:each="error : ${#fields.errors('*')}" th:text="${error}">
|
||||
Validation error</p>
|
||||
<div class="float-right mt-2">
|
||||
<a class="btn btn-primary btn-sm" th:href="@{/}" href="messages.html"> Messages </a>
|
||||
</div>
|
||||
<h4 class="float-left mt-2">Messages : Create</h4>
|
||||
<div class="clearfix"></div>
|
||||
<form id="messageForm" th:action="@{/(form)}" th:object="${message}" action="#" method="post">
|
||||
<div th:if="${#fields.hasErrors('*')}" class="alert alert-danger" role="alert">
|
||||
<p th:each="error : ${#fields.errors('*')}" class="m-0" th:text="${error}">Validation error</p>
|
||||
</div>
|
||||
<div class="pull-right">
|
||||
<a th:href="@{/}" href="messages.html"> Messages </a>
|
||||
<input type="hidden" th:field="*{id}" th:class="${'form-control' + (#fields.hasErrors('id') ? ' is-invalid' : '')}"/>
|
||||
<div class="form-group">
|
||||
<label for="summary">Summary</label>
|
||||
<input type="text" th:field="*{summary}" th:class="${'form-control' + (#fields.hasErrors('summary') ? ' is-invalid' : '')}">
|
||||
</div>
|
||||
<input type="hidden" th:field="*{id}"
|
||||
th:class="${#fields.hasErrors('id')} ? 'field-error'" /> <label
|
||||
for="summary">Summary</label> <input type="text"
|
||||
th:field="*{summary}"
|
||||
th:class="${#fields.hasErrors('summary')} ? 'field-error'" /> <label
|
||||
for="text">Message</label>
|
||||
<textarea th:field="*{text}"
|
||||
th:class="${#fields.hasErrors('text')} ? 'field-error'"></textarea>
|
||||
<div class="form-actions">
|
||||
<input type="submit" value="Save" />
|
||||
<div class="form-group">
|
||||
<label for="text">Message</label>
|
||||
<textarea th:field="*{text}" th:class="${'form-control' + (#fields.hasErrors('text') ? ' is-invalid' : '')}"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
+24
-26
@@ -6,33 +6,31 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<div th:replace="fragments :: navbar"></div>
|
||||
<h1>Messages : View all</h1>
|
||||
<div class="container">
|
||||
<div class="pull-right">
|
||||
<a href="form.html" th:href="@{/(form)}">Create Message</a>
|
||||
</div>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>Created</td>
|
||||
<td>Summary</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:if="${messages.empty}">
|
||||
<td colspan="3">No messages</td>
|
||||
</tr>
|
||||
<tr th:each="message : ${messages}">
|
||||
<td th:text="${message.id}">1</td>
|
||||
<td th:text="${#calendars.format(message.created)}">July 11,
|
||||
2012 2:17:16 PM CDT</td>
|
||||
<td><a href="view.html" th:href="@{'/' + ${message.id}}"
|
||||
th:text="${message.summary}"> The summary </a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="float-right mt-2">
|
||||
<a class="btn btn-primary btn-sm" href="form.html" th:href="@{/(form)}">Create Message</a>
|
||||
</div>
|
||||
<h4 class="float-left mt-2">Messages : View all</h4>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Created</th>
|
||||
<th>Summary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr th:if="${messages.empty}">
|
||||
<td colspan="3">No messages</td>
|
||||
</tr>
|
||||
<tr th:each="message : ${messages}">
|
||||
<td th:text="${message.id}">1</td>
|
||||
<td th:text="${#calendars.format(message.created)}">July 11,
|
||||
2012 2:17:16 PM CDT</td>
|
||||
<td><a href="view.html" th:href="@{'/' + ${message.id}}"
|
||||
th:text="${message.summary}"> The summary </a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+14
-20
@@ -6,27 +6,21 @@
|
||||
<body>
|
||||
<div class="container">
|
||||
<div th:replace="fragments :: navbar"></div>
|
||||
<h1>Messages : View</h1>
|
||||
<div class="alert alert-success" th:if="${globalMessage}"
|
||||
th:text="${globalMessage}">Some Success message</div>
|
||||
<div class="pull-right">
|
||||
<a th:href="@{/}" href="list.html"> Messages </a>
|
||||
<div class="float-right mt-2">
|
||||
<a class="btn btn-primary btn-sm" href="list.html" th:href="@{/}">Messages</a>
|
||||
</div>
|
||||
<dl>
|
||||
<dt>ID</dt>
|
||||
<dd id="id" th:text="${message.id}">123</dd>
|
||||
<dt>Date</dt>
|
||||
<dd id="created" th:text="${#calendars.format(message.created)}">
|
||||
July 11, 2012 2:17:16 PM CDT</dd>
|
||||
<dt>Summary</dt>
|
||||
<dd id="summary" th:text="${message.summary}">A short summary...</dd>
|
||||
<dt>Message</dt>
|
||||
<dd id="text" th:text="${message.text}">A detailed message that
|
||||
is longer than the summary.</dd>
|
||||
</dl>
|
||||
<div class="pull-left">
|
||||
<a href="messages" th:href="@{'/delete/' + ${message.id}}">delete </a> |
|
||||
<a href="form.html" th:href="@{'/modify/' + ${message.id}}"> modify </a>
|
||||
<h4 class="float-left mt-2">Messages : View</h4>
|
||||
<div class="clearfix"></div>
|
||||
<div class="alert alert-success" th:if="${globalMessage}" th:text="${globalMessage}">Some Success message
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="card-title" th:text="${message.id + ': ' + message.summary}">123 - A short summary...</h4>
|
||||
<h6 class="card-subtitle mb-2 text-muted" th:text="${#calendars.format(message.created)}">July 11, 2012 2:17:16 PM CDT</h6>
|
||||
<p class="card-text" th:text="${message.text}">A detailed message that is longer than the summary.</p>
|
||||
<a class="card-link" href="messages" th:href="@{'/delete/' + ${message.id}}">delete</a>
|
||||
<a class="card-link" href="form.html" th:href="@{'/modify/' + ${message.id}}"> modify</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user