bootstrap和jquery区别

最新推荐文章于 2024-02-04 17:44:02 发布

MatrixAaron

最新推荐文章于 2024-02-04 17:44:02 发布

阅读量593

点赞数 2

分类专栏：前端文章标签： bootstrap jquery

前端专栏收录该内容

1 篇文章

订阅专栏

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>