基础 - Bootstrap选项卡

    

        
        

            

                home
            
            

                profile
            
            

                message
            
            

                setting
            
        
        
        

            
不拉不拉home
            
不拉不拉profile
            
不拉不拉message
            
不拉不拉setting
        
    

　　

#zw-product{
    background-color: #8fccc4;
}
#zw-product > .container > .nav-tabs {
    border-bottom: 1px solid #d3dd62;
    padding-left: 20px;
}
#zw-product > .container > .nav-tabs > li {
}
#zw-product > .container > .nav-tabs > li > a {
    font-size: 18px;
    color: #9e76cc;
}
#zw-product > .container > .nav-tabs > li > a:hover {
    border: 0;
    background-color: #cc8ea5;
}
#zw-product > .container > .nav-tabs > li.active {
}
#zw-product > .container > .nav-tabs > li.active > a {
    background-color: transparent;
    color: #cc449d;
    border: 0;
    border-bottom:3px solid #e92322;
}
#zw-product > .container > .nav-tabs > li.active > a:hover {
    background-color: #cc8ea5;
}

　　

 

bootstrap面板组件

.panel 

    

        
        

            

                home
            
            

                profile
            
            

                message
            
            

                setting
            
        
        
        

            

                    

                        

                            

                                
home
                                
疑是银河落九天
                            
                        
                    
            
            
profile
            
message
            
setting
        
    

　　

#zw-product{
    background-color: #8fccc4;
}
#zw-product > .container > .nav-tabs {
    border-bottom: 1px solid #d3dd62;
    padding-left: 20px;
}
#zw-product > .container > .nav-tabs > li {
}
#zw-product > .container > .nav-tabs > li > a {
    font-size: 18px;
    color: #9e76cc;
}
#zw-product > .container > .nav-tabs > li > a:hover {
    border: 0;
    background-color: #cc8ea5;
}
#zw-product > .container > .nav-tabs > li.active {
}
#zw-product > .container > .nav-tabs > li.active > a {
    background-color: transparent;
    color: #cc449d;
    border: 0;
    border-bottom:3px solid #e92322;
}
#zw-product > .container > .nav-tabs > li.active > a:hover {
    background-color: #cc8ea5;
}
#zw-product > .container > .tab-content > .tab-pane {
    padding: 30px;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default {
    border-radius: 5%;
    box-shadow: 1px 1px 5px #d233dd;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading {
    float: right;
    padding: 0;
    border-left: 1px dashed #38ccc9;
    width: 100px;
    text-align: center;
    height: 150px;
    line-height: 150px;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:before {
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:after {
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-body {
    margin-right: 100px;
    padding: 0;
    text-align: center;
    height: 150px;
    line-height: 150px;
}

　

#zw-product > .container > .tab-content > .tab-pane .panel-default {
    border-radius: 5%;
    box-shadow: 1px 1px 5px #d233dd;
    background-color: #9e76cc;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading {
    float: right;
    padding: 0;
    border-left: 1px dashed #38ccc9;
    width: 100px;
    text-align: center;
    height: 150px;
    line-height: 150px;
    background-color: transparent;
    position: relative;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:before,
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 8px;
    background-color: #69cc81;
    position: absolute;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:before {
    left: -8px;
    top: -8px;
}
#zw-product > .container > .tab-content > .tab-pane .panel-default > .panel-heading:after {
    left: -8px;
    bottom: -8px;
    box-shadow: 0 1px 1px inset;
}

　　

 

　

然而，一般情况下，我们需要复制一份panel-default的样式，并自定义名zw-panel-xx,以保护panel-default

这里我就不给出代码了

 

转载于:https://www.cnblogs.com/WeWeZhang/p/5951017.html