Bootstrap(一)——概述

目录​​​​​​​

1.简介

2.Bootstrap版HelloWorld


1.简介

Bootstrap是基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。

Bootstrap

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>

这里可以选多种按钮: 

 

运行结果:

 

猜你喜欢

转载自blog.csdn.net/qq_37084904/article/details/89371321