SBS: Personal Web Site (Java) 02

It is very straightforward, so there is no extra explanations needed, I'll just list all the necessary steps in this article, in stead of explaining too much. Just like before, let's take it easy and enjoy a few beautiful photos first.

1. To download and install Bootstrap, visit getbootstrap.com, click on the "Download" button, find the "Compiled CSS and JS" section, and follow the instructions for downloading it to the computer.

In my case, I got this file: bootstrap-4.0.0-dist.zip.

2. Unzip the file "bootstrap-4.0.0-dist.zip", you will see 2 folders: "js" and "css". Copy or merge these 2 folders into the "WebContent" directory in our web application.

3. Now we have to make a few changes to our Index.jsp file, so that it can use Bootstrap functions.

a. Visit getbootstrap.com, click on the "Get Started" button, you'll find the instructions for starter.

b. In our web application, open the file "WebContent\WEB-INF\jsp\Index.jsp".

c. Copy-paste the following stylesheet <link> into the <head> section before all other stylesheets to load the Bootstrap CSS.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

d. Many of Bootstrap components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and Bootstrap JavaScript plugins. Place the following <script>s near the end of the page, right before the closing </body> tag, to enable them. jQuery must come first, then Popper.js, and then Bootstrap JavaScript plugins.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

e. Use the powerful mobile-first flexbox grid to build layouts. Check this link for the details of the Bootstrap grid system.

  <div class="container">
    <div class="row bg-info p-3">
      <div class="col-3">
        <img class="img-fluid rounded" alt="" src="${pageContext.request.contextPath}/Images/${IMAGE}">
      </div>
      <div class="col-9 text-right align-self-center">
        ${OWNER}
      </div>
    </div>
    <div class="row bg-warning p-3">
      <div class="col-12">
        ${MOTTO}
      </div>
    </div>
  </div>

4. The full content of Index.jsp is listed below:

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  <title>Casper's Blog</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <div class="row bg-info p-3">
      <div class="col-3">
        <img class="img-fluid rounded" alt="" src="${pageContext.request.contextPath}/Images/${IMAGE}">
      </div>
      <div class="col-9 text-right align-self-center">
        ${OWNER}
      </div>
    </div>
    <div class="row bg-warning p-3">
      <div class="col-12">
        ${MOTTO}
      </div>
    </div>
  </div>
    
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

5. Yeah! It works!