bootstrap和jquery区别
- Bootstrap以及jQuery主要以Web Site场景为主 也就是网站的页面展示层 能够提供很多艳丽的效果。
- Bootstrap是一个前台框架包含css和一些jquery插件,依赖与jquery,所以必须一起使用。bootstrap是依赖jquery写的扩展,你要使用bootstrap,必须要先引入juqery你不引入jquery,bootstrap的功能你还不能用
- bootstrap定义了布局、间距等,还提供了less进行管理,可以看作是css规范、框架。利用他提供的样式随意组合,基本上能满足了一些页面的样式需求。用Jquery 的话, 如果要做一个网站,PC 端用jQuery-ui 手机端用jQuery mobile【需要做两套网站】如果用bootstrap的话,【只需要一套就够了】。
- 因为bootstrap 是响应式布局,根据你的浏览设备不同,给你显示页面的效果也不同。当然如果你需要 支持IE 6—IE7 最好还是用 jQuery 低版本吧。
- 现在比较流行的前端框架有bootstrap + angularJS
- jQuery是JavaScript的工具集,说白了jQuery就是JavaScript。而Bootstrap是一个开发框架,集成了很多现成的网页格式和网页布局,封装了很多CSS样式和JS代码,可以拿来直接用,只需要把里面想换成自己的内容替换掉。
- jquery是js脚本库,主要是通过简化js操作html元素及前端数据的。
- bootstrap是前端页面设计数据显示框架,主要是它的UI部分,显示效果很不错。
- bootstrap = 样式库 + 一堆jQuery插件
引自: https://blog.youkuaiyun.com/detergent/article/details/79061557
在springboot中集成bootstrap:
首先导入依赖bootstrap与jquery:
<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<!-- bootstrap -->
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.5</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.1</version>
</dependency>
然后在html文件中加入相应版本:
<!DOCTYPE html>
<html>
<head>
<script src="webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>hello zhangyan</h2>
<div class="container">
<h2>Button</h2>
<p>.btn 类是按钮的基本样式:</p>
<button type="button" class="btn-warning">基本按钮</button>
</div>
</body>
</html>
关键的三句:
引自:https://blog.youkuaiyun.com/sinat_24048051/article/details/77531834
实例:
1.创建controller:
package com.paic.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
/**
* Created by Aaron on 2019/1/14.
*/
@Controller
public class testController {
@RequestMapping("/index")
public String index(){
return "test";
}
}
2.创建前端页面:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
#sendTxt{
margin-top:100px;
margin-left:45%;
border:solid;
padding:10px;
width:160px
}
#recvTxt{
margin-top:10px;
margin-left: 45%;
border: solid;
padding:10px;
width:160px
}
</style>
<div>
<div id="sendTxt">
<p style="font-size: medium;font-weight: bold;font-family: 微软雅黑;margin-top: 0px;margin-bottom:5px">发送文本:</p>
<input style="border: solid;">
</div>
<div id="recvTxt">
<p style="font-size: medium;font-weight: bold;font-family: 微软雅黑;margin-top: 0px;margin-bottom:5px">接收文本:</p>
<input style="border: solid;">
</div>
</div>
<script type="text/javascript">
// 关闭提示框的插件功能
$(document).off('.alert.data-api');
</script>
</body>
</html>