![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Bootstrap实战
文章平均质量分 66
往前的
这个作者很懒,什么都没留下…
展开
-
boostrap 轮播 carousel(旋转木马)
效果:图片轮播准备工作:用js生成图片这里用的是placeholder.js网址为:https://github.com/hustcc/placeholder.js.git在gist 获取 placeholder.js引入工程中总结:1、class="carousel slide" 表示轮播,有滑动原创 2017-06-28 17:16:10 · 7991 阅读 · 0 评论 -
利用Boostrap Table自动获取最新数据(没有刷新效果)
概述:如何获取最新数据,定时任务自动刷新,但是如果利用Boostrap Table 的refresh或load方法,虽然能完成这个功能,问题是这样刷,整个页面会闪动一下。那么如何没有闪动这个不好效果,就要利用Bootstrap append方法。append就是连接问题,那么问题来了,如何去除重复数据?方法一:可以选中整个表所有数据,然后一个一个剔除。(这是正常常规方法)。方法二:是不是可...原创 2018-03-22 11:24:56 · 5060 阅读 · 2 评论 -
Bootstrap布局自动拉伸改变大小
记录一下学习Bootstrap布局自动拉伸 Bootstrap自动拉伸改变大小 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"> .row { margin-l原创 2018-02-07 12:17:37 · 10486 阅读 · 1 评论 -
bootstrap-select动态组装下拉选项(option)
概述:如果你想要使用bootstrap-select去检索的话,那么需要动态组装下拉框选项(option);原创 2017-10-20 10:44:38 · 38779 阅读 · 3 评论 -
bootstrap-select下拉输入框绑定事件(keydown,click)
概述:需要bootstrap-select绑定按键事件如果绑定一个元素?找到该元素(这是关键)绑定事件1、找到input元素只能用chrome调试查看元素,看看input具体位置 按F12 查询设备 设备一 设备二还有点,必须下拉框展开时候才会生成输入框,所以要在下拉框全部展开之后,再查找input 元素查找思路,以s原创 2017-10-19 17:23:25 · 33873 阅读 · 2 评论 -
selectpicker 获取选中option的属性或者值
1、直接上代码2、JS获取属性的值,例如下面获取选中option的id的值$('#grantrole').find("option:selected").attr('id')这里利用JQuery的查找功能获取选中的文本值$('#grantrole').selectpicker('val')原创 2017-07-19 10:17:50 · 48063 阅读 · 1 评论 -
boostrap 对话框 学习
概述:效果:代码:×用户登录用户名: 密码: 登录总结:1、class="modal-backdrop in" 背景会显示灰色,背景按钮相关都不可用2、class="modal in" 类似一块布,在这块布上画对话框 style="display:block" 表示显示这个块布原创 2017-06-28 14:29:18 · 658 阅读 · 0 评论 -
bootstrap 导航栏的相关设置
概述:部分代码: BootStrap.com 组件 CSS JavaScript 总结:1、搜索栏对于导航栏来说就是表单。2、class="navbar-form" 表示它导航栏表单、navbar-le原创 2017-06-28 11:11:26 · 4698 阅读 · 0 评论 -
boostrap 导航栏--笔记
1、例子:<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/b原创 2017-06-27 21:46:19 · 468 阅读 · 0 评论 -
bootstrap 网格系统(Grid system) 总结与实践
概述:小知识点1、@media 会在网页宽度为大于768、992、1200像素,设置网页container修饰div宽度分别为 750、970、11702、col-xs-*、 col-sm-*、col-md-* 、col-lg-*、 分别代表极小尺寸(一般指手机)、小尺寸(平板电脑)、中等尺寸(普通PC)、大型尺寸3、col-sm-* 小于768会堆显示不会分栏,col-md-*原创 2017-06-27 20:58:16 · 1813 阅读 · 0 评论 -
第三章 Boostrap 框架解析--栅格系统案例 笔记1
概述:Boostrap框架主要是有动态CSS语言LESS编写,简单一句就是Boostrap类似spring 集大成者知识小点:Hack规则 来解决浏览器兼容问题CSS3书写规范遵循浏览器私有写法在前,标准写法在后框架为先,细节次之(先整体布局,而局部调整)CSS重设: 浏览器解析规则不一样导致两种浏览器的效果不一样,这就是一切归零思想,从零开始,boostrap是针对性的重设原创 2017-06-27 15:20:17 · 625 阅读 · 0 评论 -
第二章 使用Bootstrap的准备-tab标签小案例 笔记3
概述:学习tab标签,目标就是写了有效果就行文件结构代码:Tab小案例 Tab1 Tab2 Tab3 Tab4 $('#tab1 a').click(function (e) { e.preventDefault() $(this).tab('sho原创 2017-06-26 20:41:13 · 1808 阅读 · 0 评论 -
第二章 使用Bootstrap的准备-HelloWorld 笔记2
概述:简单了解一下bootstrap如何使用从hello world 开始代码:firstBootstrap HelloWorld !效果:注意:js一般放置到最后,提高用户体验原创 2017-06-26 19:27:35 · 429 阅读 · 0 评论 -
第二章 使用Bootstrap的准备-兵马未动 粮草先行 笔记1
概述:为学习Boostrap做一些准备工作本章涉及内容:下载和定制BoostrapBootstrap的文件结构Boostrap应用解析开发第一个Boostrap示例2.1 下载和定制Boostrap2.1.1 下载Boostrap 有两个版本: 学习使用的完全版, 供应用的编译版1.下载源码BootstrapGitHub--Bootstrap原创 2017-06-26 12:19:04 · 468 阅读 · 0 评论 -
第一章 为什么要学习Bootstrap
概述:Bootstrap很火,来凑凑热闹内容摘要:Bootstrap 概述Bootstrap 功能介绍Bootstrap 应用项目赏析Bootstrap 版本变化Bootstrap 开发工具和参考资源Boostrap是Twitter公司推出集成CSS、HTML和JavaScript框架,占用资源少,兼容浏览器很强。1.1 Bootstrap 概述选择Bootst原创 2017-06-26 10:37:17 · 895 阅读 · 0 评论 -
bootstap 3.x+springMVC 发生图标不出来,样式还有
效果:样式都有,你逗我找不到图标? 只有一种可能它把被DispatchServlet拦截处理解决方法就是 在springmvc.xml 配置过滤文件问题解决了原创 2017-06-28 18:20:14 · 540 阅读 · 0 评论 -
Bootstrap自定义图标
目标: 1、生成图标的方法 2、使用图标1、准备知识bootstrap的图标大小是12*12photoshop cs 6 (修改图标大小)eclipse (可选,方便工具)2、图从哪里来?推荐如下网址图标 1. fontawesome (用的最广泛的) 2. famfamfam (很多颜色丰富图标) 3. f...原创 2018-04-26 22:40:30 · 7226 阅读 · 2 评论