![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
bootstrap
文章平均质量分 58
鲸鱼姐
这个作者很懒,什么都没留下…
展开
-
移动端字体失效问题
1. 问题:开发的网页是华文行楷,在电脑端显示正确,在移动端显示失效。2.原因我们在一起看看三大主流系统他们字体到底支持哪些呢?ios 系统默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体android 系统默认中文字体是Droidsansfallback默认英文和数字字体是Droid Sans无微软雅黑字体winphone 系统默认中文字体是De...原创 2021-03-10 16:54:55 · 1962 阅读 · 2 评论 -
springboot+vue+bootstrap实现用户增删改查
1.数据库准备和js准备(1)引入vue和axios,下载vue.js和axios.min.js,添加到工程里(2)application.ymlspring: datasource: username: root password: 111 url: jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2B8 driver-class-name: com.mysql.cj.jdbc.Driver原创 2020-12-09 23:43:49 · 1658 阅读 · 0 评论 -
bootstraptable固定前几列
1.引入js和css<link href="/asserts/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="/asserts/lib/bootstrap/css/bootstrap-table.min.css" rel="stylesheet"><link href="/asserts/lib/bootstrap/css/bootstrap-table-fixed-columns.mi.原创 2020-12-07 16:28:13 · 2471 阅读 · 0 评论 -
2020-11-19 解决bootstraptable 跳转返回后到原页问题
参考连接:https://blog.csdn.net/qq_39628595/article/details/89257223?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog接下来上代码(主要部分的代码)注意红色部分<body clas转载 2020-11-19 14:37:46 · 1077 阅读 · 0 评论 -
bootstrap-select的使用(动态加载select,多选,全选,全不选,设置全选, 设置部分选中)
1. 引入bootstrap-select的css,js 进入https://www.bootstrapselect.cn官网,下载bootstrap-select.min.css和bootstrap-select.min.js.同时引入bootstrap和juery <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> <..原创 2020-06-26 20:51:38 · 9406 阅读 · 2 评论 -
bootstrap-table样式修改
bootstrap-table修改后的效果如下1.删除边线<style> .table>tbody>tr>td{ border-top: 1px solid transparent !important; border-right: 1px solid transparent !important; border-left: 1px solid transparent !important; } .table>原创 2020-05-12 23:38:59 · 3219 阅读 · 0 评论 -
bootstrapValidator前台验证及remote后台验证
在实际项目中需要验证前台数据输入的正确性,因此引入bootstrapvalidator插件,效果如下1.引入<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script><link href="https://c...原创 2020-02-26 10:51:33 · 1622 阅读 · 1 评论 -
bootstrap前端校验,先验证,输入通过才能提交,否则无法提交——附加mac地址校验
简介:项目需要在前端进行校验,特写了本篇内容1. 校验联系方式正确性和出生日期不能为空,先验证,输入通过才能提交,否则无法提交。<!DOCTYPE html><html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"><head> <meta charset="UTF-8">...原创 2020-02-01 15:22:21 · 1142 阅读 · 0 评论 -
springboot开发指南(六)——上传excel并将更新mySql数据库,提示有问题的数据
项目简介:上传excel,并更新数据库,对于excel中有问题的数据进行提示。目录1.项目效果2.使用的技术和项目依赖3. 前端excelLoad.html页面4. 后端页面5.application.yml需要源码,请加微信号,进技术交流群,发送springboot108,免费获取此文章源码1.项目效果(1)网页页面(2)excel数据(3)上...原创 2020-01-31 21:12:05 · 400 阅读 · 0 评论 -
SpringBoot-日期格式数据传输(前台展示和后台互传)
前台:后台:1.mysql数据库格式:表字段类型为datetime类型2. Java中有两个Date类,一个是java.util.Date通常情况下用它获取当前时间或构造时间,另一个是java.sql.Date是针对SQL语句使用的,它只包含日期而没有时间部分。本文使用的是util.Date: import java.util.Date;3.bean类中使用JSONF...原创 2020-05-12 23:28:58 · 5071 阅读 · 0 评论 -
bootstrap实战(五)- 按钮动画和图片并列居中显示
技术要点:1. 按钮变化由圆角变成直角border-radius:0px; 边框加粗 {border:1pxsolid#3cbfb8}; 背景透明 background:transparent;按钮内文字颜色:color:#40d2b1;2.按钮动画transition: all 0.3s;变换后的效果:.course3 .btn:hover...原创 2019-11-19 14:37:53 · 705 阅读 · 0 评论 -
bootstrap实战(四)- 图标显示及样式改变
技术要点:1. 图标的增加<spanclass="glyphiconglyphicon-grain">,同时需要bootstrap的fonts文件2.图标样式的改变,增加圆形边框,绿色背景,图标内容居中.tubiao-icon{ background:rgb(64,210,177); color:#fff; border-radius: 50%;...原创 2019-11-16 16:43:56 · 1649 阅读 · 0 评论 -
bootstrap实战(三)- 并列显示三图,图片随浏览器缩放
技术要点:1. 并列使用col-md-4,例如<divclass="col-md-4">2.图片缩放使用class="img-responsive",例如 <imgsrc="image/bbs2.png"class="img-responsive"alt="">3.取消链接下划线#bbsa{text-decoration:none;}4...原创 2019-11-15 16:57:07 · 3650 阅读 · 0 评论 -
bootstrap实战(二)-响应式图片显示(随着浏览器大小变化,图片大小变化)
1.给导航栏下放置页面,如下效果,图片随着屏幕变小,也会变小:技术要点:1. img添加img-responsive属性后,会自动随屏幕大小而变化<imgsrc="image/2.png"class="img-responsive"style="display:inline-block"alt="php">2. img是行内元素,通过style="display...原创 2019-11-14 14:24:13 · 3654 阅读 · 0 评论 -
bootstrap实战(一)-导航栏(电脑端+手机端)
一导航栏效果电脑端效果:手机端效果:参考网址:https://v3.bootcss.com/components/#nav二 html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi...原创 2019-11-11 19:57:52 · 3462 阅读 · 1 评论 -
bootstrap之三个不一样大小图片并列+滑动效果
效果:将三个不一样大小的图片并列显示,当鼠标滑动到图片的时候,出现边框技术要点:1. 图片大小变为一样大小.queyeicon{width:200px;height:200px;}2.滑动出现边框 hover{border:2px solid #d9edf7;}3.背景图片拉伸显示 background-size:cover;需要源码,请加微信号,发送bootstrap1...原创 2019-11-11 14:47:15 · 2208 阅读 · 0 评论 -
bootstrap之按钮大小+图片大小调整
一 效果如下技术要点:1. 按钮通过font-size调整大小,2. img通过width调整大小 img{ width:200px;height:200px;}二 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...原创 2019-11-03 11:31:10 · 10440 阅读 · 0 评论 -
bootstrap之背景图片+文字2
一 .效果如下技术要点:1.背景图片拉伸 background-repeat: no-repeat; background-size: cover;2.文字居中text-align: center;二 html代码<!DOCTYPE html><html lang="en"><head> <meta charse...原创 2019-11-03 11:23:30 · 3725 阅读 · 0 评论 -
bootstrap之鼠标滑动显示文字+三个图并列
一.效果正常显示如下:当鼠标滑动到图片,显示如下:二 html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...原创 2019-11-03 10:55:04 · 1547 阅读 · 0 评论 -
bootstrap之背景图+文字
本例采用VScode开发前端页面,主要使用bootstrap技术技术点:1. 背景图拉伸使用background-size: cover;页面效果如下:1.html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta...原创 2019-11-01 11:16:14 · 9557 阅读 · 0 评论 -
springboot+shiro+md5 用户密码加密登录
一.对密码进行 md5 加密String md5Password = DigestUtils.md5DigestAsHex(user.getPassword().getBytes());就这么简单!!!!二.springboot+shiro请参照springboot 与shiro整合——(二)mybatis用户登录认证三.在以上基础上增加md5加密,修改代码如下1.引入依...原创 2019-10-27 13:30:03 · 3017 阅读 · 1 评论 -
springboot—结合echart绘制折线图(带最大值/最小值气泡显示,修改折线颜色)
1. 引入echart.js 和echar.min.js <script src="/assets/echart/echarts.js"></script> <script src="/assets/echart/echarts.min.js"></script>2. html页面添加 <div id ="li...原创 2019-08-09 09:34:41 · 4200 阅读 · 0 评论 -
bootstrap-table前台查询—巧用filterBy(全字匹配)
注意:filterBy只能用全字匹配,不能模糊匹配。两个条件都必须有输入才可以1.html<form id="searchForm"> 用户名<input name="username" value="a" id="name"> 工号<input name="employeeNum" value="1" id="num">...原创 2019-07-04 08:11:30 · 5128 阅读 · 0 评论 -
springboot-前台和后台互相传值
前台和后台互相传值,主要分为ajax方式和thymleaf跳转页面两种方式。常用的是ajax异步刷新页面方式。需要源码,请加微信号,进技术交流群,发送springboot105,免费获取源码。一ajax异步刷新前后台传值方式1. 案例:前台ajax表单post方式提交id,从数据库获取数据显示到前台(1)memberSearch.html页面及ajax提交,并解析json数据显...原创 2019-10-04 02:31:52 · 17185 阅读 · 1 评论 -
bootstrp左侧菜单授权显示—两种方法
1. 采用shiro进行授权显示, 详细开发可以看我之前关于shiro的权限文章 <div class="container-fluid"> <div class="row"> <div class="col-sm-2" id="menulist"> <a href="#" ...原创 2019-07-16 11:48:07 · 245 阅读 · 0 评论 -
Bootstrap-table 给数据行添加事件,注意events要加到head里,否则无效
一、给数据增加formmater和events<tr> <th data-field="state" data-checkbox="true"></th> <th data-field="id" data-sortable="true">ID</th> <th data-field="rolename" ...原创 2019-07-11 11:12:02 · 1843 阅读 · 0 评论 -
bootstrap布局(三)—后台布局实例(根据权限显示不同菜单)
一效果如下,不同用户登陆看到的菜单不同。本文是在bootstrap布局(二)的基础上增加的功能。管理员用户id是4,地址栏输入:localhost:8090/sysmenu/4普通用户id是6,地址栏输入:localhost:8090/sysmenu/6平台搭建如下:二 数据库设计1. t_menu设计如下:2.t_role_menu设计如下:3...原创 2019-06-30 18:33:50 · 5944 阅读 · 0 评论 -
springboot开发指南(四)——ajax+mybatis+mysql实现bootstrap-table 增删改查(附源码)
目录一、项目介绍二、具体实现步骤如下:1. 新建工程,引入依赖 pom.xml2.编写User 实体用户类3.编写UserMapper.java 直接和数据库进行交互4.编写UserService.java 调用mapper层,并将结果返回给controller5.编写userFront.html前台页面6.编写Controller层7.applicati...原创 2019-07-03 16:57:38 · 4641 阅读 · 6 评论 -
bootstrap遇到的坑—解决办法
1.去除调用模态对话框后,背景变成黑色的办法添加data-backdrop="false"<input type="button" value="新增菜单" id="addBtn" data-toggle="modal" data-target="#addMenuModal" class="btn btn-primary" data-backdrop="false">...原创 2019-07-07 22:11:58 · 502 阅读 · 0 评论 -
boostrap布局( 二)—后台布局实例(左侧菜单激活、右边页面切换)
实际项目效果如下:选中左侧菜单,右边自动变换页面。默认选中Page1页面产品信息。index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 布局实例</title> <link ...原创 2019-06-18 14:56:17 · 7124 阅读 · 4 评论 -
springboot之 pagehelper+bootstrap-table插件
效果1.加入pagehelper和json依赖 <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.1.8</version&...原创 2019-06-22 17:09:33 · 1793 阅读 · 1 评论 -
$(...).bootstrapTable is not a function
通过控制台看到报错:$(...).bootstrapTable is not a function解决办法:将jQuery.js在bootstrap框架的js之前引入就可以了<script src="/asserts/js/jquery-3.4.0.min.js"></script><script src="/asserts/js/bootstra...原创 2019-08-03 12:50:17 · 2907 阅读 · 0 评论 -
springboot- 在后台设置cookies,前台读取cookie
此方法存在问题,对于中文无法转换,哪位高手有办法,请回复下1. 在controller设置cookie在登录成功处添加如下:函数参数加上HttpServletResponse response Cookie cookie=new Cookie("name",name); response.addCookie(cookie);具体登录内容如...原创 2019-08-03 15:38:48 · 8504 阅读 · 0 评论 -
springboot- 使用session存储用户信息,注销登录logout
技术路线:使用session存储用户信息,退出时删除用户信息1.index. html设置退出按钮 <div class="navbar-btn navbar-btn-right"> <a class="btn btn-success update-pro" href="#" title="Upgrade to Pro" data-...原创 2019-08-04 00:28:04 · 13116 阅读 · 4 评论 -
boostrap模态框+iframe实现复杂页面弹出窗口
之前使用模态框,只能实现表单的显示,一直想实现复杂页面显示,现提供代码给各位1. 调用菜单<a id="roleMenu" class="btn btn-default" href="#" onclick="editMenuTree()">分配权限</a>2.模态框显示,内置iframe<div class="modal fade" id="us...原创 2019-09-24 21:45:28 · 990 阅读 · 0 评论 -
boostrap- 解决<li><a>电脑端菜单中单击一次,手机端单击两次响应(oclick和touchstart)
现象:电脑端单击一次,手机端单击两次响应原因:电脑端oclick事件 手机端用touchstart事件,两种触发方式不一样解决办法:添加oclick和touchstart事件,并使用e.preventDefault()阻止其他点击;$(document).ready(function() { $('a').on('click', function(e) { ...原创 2019-08-14 16:55:06 · 436 阅读 · 0 评论 -
springboot —jar包部署运行bat 、 终止bat脚本
(1)运行场景:springboot开发生成的jar包,每次部署的时候,都需要先打开cmd窗口,切换到jar的文件夹下,运行java -jar XX.jar命令。共计三步,操作比较繁琐。解决方案:编写一个bat文件,每次使用直接双击,打开方式比较简单。步骤:新建一个txt文件,编写内容如下,然后保存为start.bat文件,双击运行即可。@echo offE:cd E\webj...原创 2019-08-07 13:14:23 · 5474 阅读 · 0 评论 -
boostrap —后台设置Cookie值,前台进行获取,解决中文乱码(转)
1.后台设置cookie注意事项:1.中文的存在,需要进行utf-8的编码,之后再进行解码即可,避免乱码。设置好cookie的保存时间cookie.setMaxAge(60 * 60 * 24);@RequestMapping("login") public String goto_login(HttpServletResponse response, HttpSession s...转载 2019-08-06 23:27:13 · 491 阅读 · 0 评论 -
bootstrp 垂直居中——div居中+模拟表格法display:table
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS 网页布局 - 菜鸟教程(runoob.com)</title><meta name="viewport" content="width=device-width, initial-scale...原创 2019-08-04 21:26:41 · 439 阅读 · 0 评论 -
bootstrap-出现模态对话框,不出现遮罩层
问题:出现模态对话框,不出现遮罩层,源代码如下:<input shiro:hasPermission="user:add" type="button" value="新增用户" id="addBtn" data-toggle="modal" data-target="#addUserModal" class="btn btn-primary" data-backdrop="false"&g...原创 2019-08-04 15:57:10 · 821 阅读 · 0 评论