目录
1.简介
Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
Bootstrap在线学习文档:http://www.bootcss.com/
2.Bootstrap版HelloWorld
首先下载Bootstrap:下载地址
下载解压之后有三个文件夹:
我们新建一个动态网页项目,并且将这三个文件复制进去:
由于Bootstrap是基于jquery的,所以必须引入jquery库文件!
然后要引入必须的bootstrap库文件:
<%@ 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>
<!-- 这里采用绝对路径引入 -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.11.2.min.js"></script>
<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>
这里可以选多种按钮:
运行结果: