Fatal编程技术网
  • css/
  • Css 引导选项卡-自定义样式

Css 引导选项卡-自定义样式

css twitter-bootstrap

Css 引导选项卡-自定义样式,css,twitter-bootstrap,Css,Twitter Bootstrap,我试图在引导选项卡上实现与下面的屏幕截图类似的“箭头”样式。我怎样才能实现类似的目标 我在JSFIDLE中有我的示例代码，在那里我使用了引导选项卡。 家 办公室 证实 使用breadcrumb类可以实现 .breadcrumb{ 背景：ddd； 显示：内联块； 填充：1px； 右边填充：18px； } 李面包屑{ 显示：内联块； 背景：白色； 填充：0； 位置：相对位置； 最小宽度：50px； 文字装饰：无； -webkit剪辑路径：多边形（0 0，计算（100%-15p

我试图在引导选项卡上实现与下面的屏幕截图类似的“箭头”样式。我怎样才能实现类似的目标

我在JSFIDLE中有我的示例代码，在那里我使用了引导选项卡。 



    

  • 

    • 

  • 

    • 

  • 

    • 


家
办公室
证实
使用breadcrumb类可以实现

.breadcrumb{
背景：ddd；
显示：内联块；
填充：1px；
右边填充：18px；
}
李面包屑{
显示：内联块；
背景：白色；
填充：0；
位置：相对位置；
最小宽度：50px；
文字装饰：无；
-webkit剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
右边距：-13px；
}
.面包屑李#最后{
-webkit剪辑路径：多边形（0 0，计算（100%-0px）0，100%50%，计算（100%-0px）100%，0 100%，15px 50%）；
剪辑路径：多边形（0 0，计算（100%-0px）0，100%50%，计算（100%-0px）100%，0 100%，15px 50%）；
}
.面包屑李：悬停{
颜色：白色；
背景：#fff；
}
/*第一个链接不应该有任何剪辑在左侧*/
.面包屑李：第一个孩子{
-webkit剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%）；
剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%）；
}
.标签{
身高：100%；
宽度：100%；
}


.nav选项卡>li.active>a、.nav选项卡>li.active>a:焦点、.nav选项卡>li.active>a:悬停{
边界：0；
背景色：#fff；
}
.nav tabs>li>a{padding:10px 30px}
.nav选项卡>li.active{
边框底部：3倍纯青色；
}

    

  • 

    • 

  • 

    • 

  • 

    • 


家
办公室
证实




    

  • 

    • 

  • 

    • 

  • 

    • 


家
办公室
证实
参考此

我已经修改了上面的解决方案，以适应我的情况。我只是做了一些努力，以便在Bootstrap 4+中实现这一点。在下面的代码中，我没有包含Bootstrap4框架的外部CSS或js文件，只需复制和粘贴即可

<style>
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        border:0;
        background-color:#0000FF;
    }
    .nav-tabs > li > a{padding:10px 30px}
    .nav-tabs > li.active {
        border-bottom:3px solid blue;
    }


    .c_breadcrumb {
        padding: 1px;
        background: #ddd;
        padding-right: 15px;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        /*
        display: inline-block;

        */
    }

    .c_breadcrumb li {
        display: inline-block;
        min-width:50px;
        background: white;
        text-decoration: none;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        padding: 0;
        position: relative;
        margin-right: -13px;
    }

    .c_breadcrumb li#last {
        -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    }

    .c_breadcrumb li:hover {
        color: white;
        background: #fff;
    }

    /* first link should not have anything cliped on the left side */
    .c_breadcrumb li:first-child {
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }


</style>


.nav选项卡>li.active>a、.nav选项卡>li.active>a:焦点、.nav选项卡>li.active>a:悬停{
边界：0；
背景色：#0000FF；
}
.nav tabs>li>a{padding:10px 30px}
.nav选项卡>li.active{
底部边框：3倍纯蓝；
}
.c_面包屑{
填充：1px；
背景：ddd；
右侧填充：15px；
-webkit剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
/*
显示：内联块；
*/
}
.c_面包屑李{
显示：内联块；
最小宽度：50px；
背景：白色；
文字装饰：无；
-webkit剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%，15px 50%）；
填充：0；
位置：相对位置；
右边距：-13px；
}
.c#u面包屑李#最后{
-webkit剪辑路径：多边形（0 0，计算（100%-0px）0，100%50%，计算（100%-0px）100%，0 100%，15px 50%）；
剪辑路径：多边形（0 0，计算（100%-0px）0，100%50%，计算（100%-0px）100%，0 100%，15px 50%）；
}
c_面包屑李：悬停{
颜色：白色；
背景：#fff；
}
/*第一个链接不应该有任何剪辑在左侧*/
c_面包屑李：第一个孩子{
-webkit剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%）；
剪辑路径：多边形（0 0，计算（100%-15px）0，100%50%，计算（100%-15px）100%，0 100%）；
}
我使用了导航填充类使选项卡填充空间

<div>
    <div  class="c_breadcrumb" >
        <ul class="nav nav-pills nav-tabs nav-fill" role="tablist">
            <li class="nav-item " >
                <a class="nav-link active "  data-toggle="tab" href="#submitted">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link"  data-toggle="tab" href="#pendingApproval">Longer nav link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link"  data-toggle="tab" href="#workInProgress">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled"  data-toggle="tab" href="#complete">Disabled</a>
            </li>
        </ul>
    </div>

    <div class="tab-content" style="margin:5%;">
        <div class="tab-pane active" id="submitted">
            Submitted data will be displayed here....
        </div>
        <div class="tab-pane" id="pendingApproval">
            Pending Approvals will be displayed here....
        </div>
        <div class="tab-pane" id="workInProgress">
            In Progress data will be displayed here....
        </div>
        <div class="tab-pane" id="complete">
            Completed data will be displayed here....
        </div>
    </div>
</div>



    

  • 

    • 

  • 

    • 

  • 

    • 

  • 

    • 


提交的数据将显示在此处。。。。
此处将显示待审批的文件。。。。
正在进行的数据将显示在此处。。。。
已完成的数据将显示在此处。。。。
另外，请记住，我已经结合了上述解决方案以适合我的场景，因此请根据您的情况进行更改。
所以这应该行得通

到目前为止，您尝试了什么？看来你只是把BS代码，没有做任何自己的风格。此外，你的小提琴不包括BS js。作为起点，请检查或 
<div class="breadcrumb">
   <!-- Nav tabs -->
   <ul class="nav nav-tabs" role="tablist">
      <li role="presentation">
         <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>     
      </li>
      <li role="presentation" class="active">
         <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
      </li>
      <li id="last" role="presentation">
         <a href="#confirmation" aria-controls="profile" role="tab" data-toggle="tab">Confirm</a>
      </li>
   </ul>
   <!-- Tab panes -->
   <div class="tab-content">
      <div role="tabpanel" class="tab-pane" id="home">Home</div>
      <div role="tabpanel" class="tab-pane active" id="office">Office</div>
      <div role="tabpanel" class="tab-pane" id="confirmation">Confirm</div>
   </div>
</div>

<style>
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        border:0;
        background-color:#0000FF;
    }
    .nav-tabs > li > a{padding:10px 30px}
    .nav-tabs > li.active {
        border-bottom:3px solid blue;
    }


    .c_breadcrumb {
        padding: 1px;
        background: #ddd;
        padding-right: 15px;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        /*
        display: inline-block;

        */
    }

    .c_breadcrumb li {
        display: inline-block;
        min-width:50px;
        background: white;
        text-decoration: none;
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
        padding: 0;
        position: relative;
        margin-right: -13px;
    }

    .c_breadcrumb li#last {
        -webkit-clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
        clip-path: polygon(0 0, calc(100% - 0px) 0, 100% 50%, calc(100% - 0px) 100%, 0 100%, 15px 50%);
    }

    .c_breadcrumb li:hover {
        color: white;
        background: #fff;
    }

    /* first link should not have anything cliped on the left side */
    .c_breadcrumb li:first-child {
        -webkit-clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
        clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
    }


</style>

<div>
    <div  class="c_breadcrumb" >
        <ul class="nav nav-pills nav-tabs nav-fill" role="tablist">
            <li class="nav-item " >
                <a class="nav-link active "  data-toggle="tab" href="#submitted">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link"  data-toggle="tab" href="#pendingApproval">Longer nav link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link"  data-toggle="tab" href="#workInProgress">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled"  data-toggle="tab" href="#complete">Disabled</a>
            </li>
        </ul>
    </div>

    <div class="tab-content" style="margin:5%;">
        <div class="tab-pane active" id="submitted">
            Submitted data will be displayed here....
        </div>
        <div class="tab-pane" id="pendingApproval">
            Pending Approvals will be displayed here....
        </div>
        <div class="tab-pane" id="workInProgress">
            In Progress data will be displayed here....
        </div>
        <div class="tab-pane" id="complete">
            Completed data will be displayed here....
        </div>
    </div>
</div>