Why use Bootstrap?
Mobile-first: As of Bootstrap 3, the framework includes mobile-first styles throughout the library.
Browser Support: Bootstrap is supported by all major browsers. Internet Explorer Firefox Opera Google Chrome Safari
Easy to get started: As long as you have a basic knowledge of HTML and CSS, you can start learning Bootstrap.
Responsive Design: Bootstrap's responsive CSS is adaptable to desktop, tablet, and mobile. Read more about responsive design in Bootstrap Responsive Design.
Responsive Design:
It provides a clean and unified solution for developers to create interfaces.
It contains powerful built-in components and is easy to customize.
It also provides web-based customization.
It is open source.
Contents of Bootstrap package
Basic structure: Bootstrap provides a basic structure with grid system, link styles, background. This will be explained in detail in the Bootstrap basic structure section.
CSS: Bootstrap comes with the following features: global CSS settings, defining basic HTML element styles, extensible classes, and an advanced grid system. This will be explained in detail in the Bootstrap CSS section.
Components: Bootstrap includes over a dozen reusable components for creating images, dropdowns, navigation, alerts, popovers, and more. This will be explained in detail in the Layout Components section.
JavaScript plugins: Bootstrap includes a dozen custom jQuery plugins. You can include all plugins directly or individually. This will be explained in detail in the Bootstrap plugin section.
Customization: You can customize Bootstrap's components, LESS variables and jQuery plugins to get your own version.
helloWorld.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- minified css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<!-- theme css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<!-- Compressed jquery, BootStrap is a js framework based on jquery, so you need to refer to jquery -->
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<!-- Compressed js for bootstrap -->
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
</head>
<body style="padding: 20px">
<button type="button" class="btn btn-danger">Bootstrap你好呀！</button>
</body>
</html>