bootstrap
关注
分享
扫一扫
文章平均质量分 58
鲸鱼姐
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
移动端字体失效问题
1. 问题：开发的网页是华文行楷，在电脑端显示正确，在移动端显示失效。2.原因我们在一起看看三大主流系统他们字体到底支持哪些呢？ios 系统默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体android 系统默认中文字体是Droidsansfallback默认英文和数字字体是Droid Sans无微软雅黑字体winphone 系统默认中文字体是De...原创 2021-03-10 16:54:55 · 2316 阅读 · 2 评论 -
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 · 2549 阅读 · 0 评论 -
2020-11-19 解决bootstraptable 跳转返回后到原页问题
参考连接：https://blog.youkuaiyun.com/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 · 1155 阅读 · 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 · 10495 阅读 · 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 · 3400 阅读 · 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 · 1711 阅读 · 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 · 1243 阅读 · 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 · 5412 阅读 · 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 · 823 阅读 · 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 · 1786 阅读 · 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 · 3911 阅读 · 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 · 3890 阅读 · 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 · 3723 阅读 · 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 · 2328 阅读 · 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 · 10699 阅读 · 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 · 3882 阅读 · 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 · 1635 阅读 · 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 · 9912 阅读 · 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 · 5281 阅读 · 0 评论 -
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 · 301 阅读 · 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 · 2010 阅读 · 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 · 6224 阅读 · 0 评论 -
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 · 568 阅读 · 0 评论 -
boostrap布局( 二）—后台布局实例（左侧菜单激活、右边页面切换）
实际项目效果如下：选中左侧菜单，右边自动变换页面。默认选中Page1页面产品信息。index.html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 布局实例</title> <link ...原创 2019-06-18 14:56:17 · 7715 阅读 · 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 · 1856 阅读 · 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 · 3109 阅读 · 0 评论 -
springboot- 在后台设置cookies，前台读取cookie
此方法存在问题，对于中文无法转换，哪位高手有办法，请回复下1. 在controller设置cookie在登录成功处添加如下：函数参数加上HttpServletResponse response Cookie cookie=new Cookie("name",name); response.addCookie(cookie);具体登录内容如...原创 2019-08-03 15:38:48 · 8783 阅读 · 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 · 13393 阅读 · 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 · 1107 阅读 · 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 · 485 阅读 · 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 · 553 阅读 · 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 · 497 阅读 · 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 · 911 阅读 · 0 评论 -
springboot ——解决shiro加载首页内容中出现登录页面的问题
技术路线：使用window.onload和document.readyState=="complete"判断加载完成后，显示首页内容。这样就不会出现想加载首页内容而加载出来登录页面了步骤：javascript加载首页内容window.onload=function(){ if (document.readyState=="complete") { ...原创 2019-08-04 01:12:57 · 1196 阅读 · 0 评论 -
bootstrap布局（一）
boostrap布局先介绍下bootstrap简单的结构Container-》row-》column<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head>...原创 2019-05-15 21:55:11 · 620 阅读 · 0 评论