zoukankan      html  css  js  c++  java
  • 基于bootstrap的手机界面tab样式调整

    这是调整后手机页面的样子(pc端的样式还是bootstrap原来的样式,没有改变的):

    html结构为:

            <div class="tab" role="tabpanel">
                <ul id="myTab" class="nav nav-tabs" role="tablist">
                    <li class="active">
                        <a href="#tab1" data-toggle="tab">选项1</a>
                    </li>
                    <li><a href="#tab2" data-toggle="tab">选项2</a></li>
                    <li><a href="#tab3" data-toggle="tab">选项3</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="tab1">
                        这是选项1的内容
                    </div>
                    <div class="tab-pane fade" id="tab2">
                        这是选项2的内容
                    </div>
                    <div class="tab-pane fade" id="tab3">
                        这是选项3的内容
                    </div>
                </div>
            </div>

    css样式为:

        <style>
            @media only screen and (max- 480px) {
            .tab .nav-tabs {
                border-bottom: 0 none;
                background: #eaeaea;
            }
            .tab .nav-tabs li a {
                background: transparent;
                border-radius: 0;
                font-size: 16px;
                border: none;
                color: #333;
                padding: 12px 22px;
            }
            .tab .nav-tabs li.active a{
                border: 0;
                border-left: 1px solid lightgray;
                border-right: 0;
                border-bottom: 0;
                color: orange; 
            }
            .tab .nav-tabs li:first-child.active a{
                border-left: 0;
            }
            .tab .nav-tabs li.active a:after {
                content: "";
                position: absolute;
                left: 45%;
                bottom: -14px;
                border: 7px solid transparent;
                border-top: 7px solid #e67e22;
            }
            .tab .nav-tabs{
                width: 100%;
                background: transparent;
            }
            /* 设置选项卡的宽度,这里要根据选项卡的个数手动设置下*/
            .tab .nav-tabs li {    
                width:33.3%;
                background: transparent;
            }
            .tab .nav-tabs li a {
                text-align: center;
                margin-right: 0;
                border: 1px solid lightgray;
                border-top: 0;
                border-right: 0;
            }
            .tab .nav-tabs li:first-child a {
                border-bottom-left-radius: 0;
                border-left: 0;
            }
            .tab .nav-tabs li.active a:after {
                border: none;
            }
        }
        </style>
  • 相关阅读:
    mysql索引
    数据库修复
    数据库取值 三级分类后台遍历
    创建数据库!
    mysql按条件 导出sql
    nodejs 简单安装环境
    C++ 性能剖析 (一)
    C++ 性能剖析 (二):值语义 (value semantics)
    JavaScript Nested Function 的时空和身份属性
    C++ Reference 的“三位一体”诠释
  • 原文地址:https://www.cnblogs.com/chendc/p/6222373.html
Copyright © 2011-2022 走看看