bootstrap dan spring mvc

supaya lebih waw hiasi dengan bootstrap

Bismillah

q> Melanjutkan tulisan ini :
https://saifiahmada.wordpress.com/2014/12/11/integrasi-apache-tiles-dengan-spring-mvc/

q> buka halaman http://getbootstrap.com/

q> klik getting started

q> find bootstrap CDN

Selection_614

q> copy script ke dalam file classic.jsp dalam tag head

<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"</span><span class="nt">></span>

<span class="c"><!-- Optional theme --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"</span><span class="nt">></span>

<span class="c"><!-- Latest compiled and minified JavaScript --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</span><span class="nt">></script></span></code></pre>
</div>

q> ubah DOCTYPE pada file classic.jsp menjadi <!DOCTYPE html>

q> tambahkan script jquery punya goole cdn:
<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

q> pada halamat getbootstrap.com > cari link example > kemudian cari Navbar in action

q> View Source pada halaman itu, kemudian copy-kan ke file classic.jsp

q> Tambahkan taglib ini

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

q> file classic.jsp sekarang seperti ini :


<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>

<!DOCTYPE html>
<html>
<head>

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:getAsString name="title" /></title>
</head>
<body>

<div class="container">

<!-- Static navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<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="<spring:url value="/" />">Spring
MVC</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="<spring:url value="/" />">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>

<tiles:insertAttribute name="body" />
<br> <br>
<center>
<tiles:insertAttribute name="footer" />
</center>
</div>
</body>
</html>

<span style="line-height: 1.5;">

q> Test jalankan, hasilnya sekarang :

Selection_616

 

Alhamdulillah

 

 

 

 

 

 

Published by

saifiahmada

Begin a big Process with a bit trying

One thought on “bootstrap dan spring mvc”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s