bootstrap.addtabs 标签页

QiYuAdmin-bootstrap.addtabs美化(SpringBoot实战)

简介

之前发现了一个插件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>
  • 1
  • 2

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

也可以是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;}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

修改样式的过程中,遇到了一个问题: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事件,让其右上角的叉叉,只有鼠标放上去的时候才出现,多了我感觉有点影响美观呢。 
这里写图片描述

这里写图片描述

结语

代码还需梳理。

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值