修改boostrap中tab样式

待我称王封你为后i 2022-06-01 01:12 205阅读 0赞

/*tab样式*/
            .nav-tabs{
                background: #FFFFFF;
                border-bottom: 3px #3498db solid;
            }
    
    
            .nav-tabs li a{
                /*line-height:2;*/
                border:1px #ddd solid;
                margin-right: -1px;
                color: #999;
                border-radius: 0;
                width: 90px;
            }
            .nav-tabs li a .glyphicon-remove-sign:hover{
                color:red;
                cursor: pointer;
            }
            .nav-tabs li a i:first-child{
                margin-right: 3px;
            }
            .nav-tabs .active a{
                border-top: solid 2px #3498db !important;
                background: #3498db !important;
                color:#fff !important;
            }
            .nav>li>a {  //设置长高
                position: relative;
                display: block;
                 padding: 5px 10px;
            }如图：

参考文献https://www.cnblogs.com/landeanfen/p/7601880.html#_label0  点击打开链接 JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关遍历，点击修改样式类似tab（前端）

1.先设置一个样式 .selected \{ background-color: \46546D; \} 2.html代码 <div style="width: 100%

心已赠人/ 2023年06月26日 05:51/ 0 赞/ 15 阅读

相关 elementui Tabs组件修改样式自定义样式去掉底部横线等

默认： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

冷不防/ 2023年01月17日 02:26/ 0 赞/ 879 阅读

相关 jQuery修改CSS样式、jQuery修改CSS样式类，简单案例-tab栏切换

jQuery修改css样式参数只写属性名，则是返回属性值 $(this).css("color"); 参数是属性名，属性值，中间用逗号分隔，则表示设置一组样

秒速五厘米/ 2023年01月02日 11:28/ 0 赞/ 234 阅读

相关 Boostrap技能点整理之【按钮样式】

![format_png][] ![format_png 1][] 昨天我们看了看bootstrap的网（栅）格系统，想必都对bootstrap网格系统有个大致的了解，今天

末蓝、/ 2022年12月25日 01:56/ 0 赞/ 165 阅读

相关 ElementUI修改el-tabs标签页组件样式

官方示例：[https://element.eleme.cn/\/zh-CN/component/tabs][https_element.eleme.cn_zh-CN_comp

╰+哭是因爲堅強的太久メ/ 2022年09月04日 00:51/ 0 赞/ 1332 阅读

相关 tab 切换样式

![20210722193233170.png][] <ul> <li v-for="(item, index) in titleList0" :

秒速五厘米/ 2022年08月31日 04:42/ 0 赞/ 214 阅读

相关 boostrap里面的表格样式

<html> <head> <title>Bootstrap 实例</title> <meta name="viewport"

我不是女神ヾ/ 2022年07月15日 12:17/ 0 赞/ 166 阅读

相关基于boostrap icon 动态显示导航栏样式

![Center][] \--------------------------------------------------------------------------

本是古典何须时尚/ 2022年07月10日 04:23/ 0 赞/ 164 阅读

相关 Boostrap中fieldset 重写了样式，需要注意

用了boostrap后fieldset就不能围起来了，如果需要还原，需要重写css。 fieldset{padding:.35em .625em .75em;marg

悠悠/ 2022年06月12日 10:29/ 0 赞/ 147 阅读

相关修改boostrap中tab样式

/tab样式/ .nav-tabs{ background: FFFFFF;

待我称王封你为后i/ 2022年06月01日 01:12/ 0 赞/ 206 阅读