QiYuAdmin-bootstrap.addtabs美化(SpringBoot实战)
来源:互联网 发布:国产电视剧推荐 知乎 编辑:程序博客网 时间:2024/04/20 23:49
简介
之前发现了一个插件bootstrap-addtabs,一直收藏着,之前看的时候是v1版本的,现在更新到了v2.0版本,那就开始用吧,已经有人写出来了,而且更新迭代到了2.0版本,不重复造轮子,重复造轮子还不一定比别人的好,毕竟别人的已经经过了考验:
- 美化页面成果
- bootstrap-addtabs介绍
- bootstrap-addtabs集成
- bootstrap-addtabs样式调整
页面成果
这个插件本身自带了例子,还有用法的介绍
集成到咱们的项目里面
bootstrap-addtabs介绍
该项目的地址:http://git.oschina.net/hbbcs/bootStrap-addTabs
用法比较简单,可以参考它里面的文档,如果去改造它的话需要你去看下他的api,里面写的还是比较清楚的。
简单用法如下:
STEP 1、引入文件
<link rel="stylesheet" href="assets/global/plugins/bootstrap-addtabs/bootstrap.addtabs.css" type="text/css" media="screen" /><script type="text/javascript" src="assets/global/plugins/bootstrap-addtabs/bootstrap.addtabs.js"></script>
STEP 2、设置按钮或链接
<li class="nav-item "> <a href="#" class="nav-link nav-toggle" data-addtab="userManager" data-ajax="true" data-url="user/main"> <i class="icon-diamond"></i> <span class="title">用户管理</span> <span class="arrow open"></span> </a> </li> <li class="nav-item "> <a href="#" class="nav-link nav-toggle" data-addtab="depManager" data-ajax="true" data-url="dep/main"> <i class="icon-puzzle"></i> <span class="title">部门管理</span> <span class="arrow"></span> </a> </li>
也可以是json格式的,它文档里面的截图如下
STEP 3、设置显示内容的地方,由于代码比较多,截图了
这样就ok了,为啥没有初始化,其实它的js文件里面最后一段已经初始化了。
bootstrap-addtabs样式调整
修改了bootstrap.addtabs.css文件里面的样式表,设置了li标签的样式、a标签的样式和a标签hover的样式表,具体代码如下。
.nav-tabs {position: relative;border-bottom:0px;}.nav-tabs li{position: relative;margin-bottom:0px;}.nav-tabs li>a:hover{background-color: white;color: #32c5d2;}.nav-tabs>li.active>a{color: #32c5d2!important;}.nav-tabs li>a{border:0px!important;cursor:pointer!important;color: #888; font-size:13px!important;} .qiyu-addtabas-custom{border:0px;}.qiyu-addtabs-vertical-line{margin-left:-18px;margin-right: 12px;}
修改样式的过程中,遇到了一个问题:nav-tabs li>a:hover,调了半天才发现bootstrap.css本身也有nav-tabs li>a:hover样式表,为了覆盖他的样式在这里设置了.nav-tabs li>a:hover{background-color: white;color: #32c5d2;},不然他的背景颜色是灰色。
除了样式,我在它的js文件里面扩展了mouseover和mouseleaver事件,让其右上角的叉叉,只有鼠标放上去的时候才出现,多了我感觉有点影响美观呢。
结语
代码还需梳理。
- QiYuAdmin-bootstrap.addtabs美化(SpringBoot实战)
- QiYuAdmin-架构搭建一(SpringBoot实战)
- QiYuAdmin-菜单按钮增删改查(SpringBoot实战)
- QiYuAdmin-安装项目出现的问题(SpringBoot实战)
- QiYuAdmin-Quartz定时器动态启停服务(SpringBoot项目实战)
- QiYuAdmin-改造Quartz的Bean由SpringIOC容器管理(SpringBoot项目实战)
- QiYuAdmin-metronic首页的js和css介绍(SpringBoot项目实战)
- QiYuAdmin-BootStrapTable增加通用的搜索功能(Metronic实战)
- QiYuAdmin-结合FastDFS实现bootstrap-fileinput上传
- QiYuAdmin-结合FastDFS实现bootstrap-fileinput上传
- SpringBoot之SSL配置(SpringBoot实战)
- QiYuAdmin-SpringBoot之Shiro在线会话持久化
- QiYuAdmin-SpringBoot之Shiro在线会话持久化
- Bootstrap增删改查,应用treeview,addTabs,table,bootbox,datatimepicker,fileinput
- bootstrap 实战入门教程(一)
- 使用Grails Bootstrap Plugin实现界面美化(作者:NEO)
- thinkphp框架page类与bootstrap分页(美化)
- 《Bootstrap实战》
- Design各控件的搭配使用
- Python-OpenCV人脸检测(代码)
- Design各控件的搭配使用2
- Design各控件的搭配使用3
- Design各控件的搭配使用4
- QiYuAdmin-bootstrap.addtabs美化(SpringBoot实战)
- BZOJ4200: [Noi2015]小园丁与老司机 最小流
- iconify使用文本替换icon测试
- 图的广度优先遍历
- AppBarLayout.OnOffsetChangedListener的使用
- 程序运行时内存分布
- 多线程(十八)AQS(四):CLH同步队列
- Android百分比布局Percent支持库
- Android本地Json配置文件实现笔记