bootstrap和jquery区别

bootstrap和jquery区别

  1. Bootstrap以及jQuery主要以Web Site场景为主 也就是网站的页面展示层 能够提供很多艳丽的效果。
  2. Bootstrap是一个前台框架包含css和一些jquery插件,依赖与jquery,所以必须一起使用。bootstrap是依赖jquery写的扩展,你要使用bootstrap,必须要先引入juqery你不引入jquery,bootstrap的功能你还不能用
  3. bootstrap定义了布局、间距等,还提供了less进行管理,可以看作是css规范、框架。利用他提供的样式随意组合,基本上能满足了一些页面的样式需求。用Jquery 的话, 如果要做一个网站,PC 端用jQuery-ui 手机端用jQuery mobile【需要做两套网站】如果用bootstrap的话,【只需要一套就够了】。
  4. 因为bootstrap 是响应式布局,根据你的浏览设备不同,给你显示页面的效果也不同。当然如果你需要 支持IE 6—IE7 最好还是用 jQuery 低版本吧。
  5. 现在比较流行的前端框架有bootstrap + angularJS
  6. jQuery是JavaScript的工具集,说白了jQuery就是JavaScript。而Bootstrap是一个开发框架,集成了很多现成的网页格式和网页布局,封装了很多CSS样式和JS代码,可以拿来直接用,只需要把里面想换成自己的内容替换掉。
  7. jquery是js脚本库,主要是通过简化js操作html元素及前端数据的。
  8. bootstrap是前端页面设计数据显示框架,主要是它的UI部分,显示效果很不错。
  9. 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值