zoukankan      html  css  js  c++  java
  • Bootstrap之选项卡

    <div class="container">
            <!-- nav-tabs作为选项卡头部样式 -->
            <ul class="nav nav-tabs">
                
                <li class="active"><a href="">one</a></li>
                <li><a href="">two</a></li>
                <li><a href="">three</a></li>
    
            </ul>
    
            <!-- nav-justified端点对齐 按钮宽度总和等于父级宽度 -->
            <ul class="nav nav-tabs nav-justified">
                
                <li class="active"><a href="">one</a></li>
                <li><a href="">two</a></li>
                <li><a href="">three</a></li>
    
            </ul>
    
            <!-- nav-tabs-justified 底线端点对齐(自适应) -->
            <ul class="nav nav-tabs nav-tabs-justified">
                
                <li class="active"><a href="">one</a></li>
                <li><a href="">two</a></li>
                <li><a href="">three</a></li>
    
            </ul>
    
            <!-- nav-pills按钮选项卡 加上nav-justified可端点对齐(自适应宽度) -->
            <ul class="nav nav-tabs nav-pills nav-justified">
                
                <li class="active"><a href="">one</a></li>
                <li><a href="">two</a></li>
                <li><a href="">three</a></li>
    
            </ul>
    
            <!-- nav-stacked竖向选项卡 配合nav-pills使用 -->
            <ul class="nav nav-tabs nav-pills nav-stacked">
                
                <li class="active"><a href="">one</a></li>
                <li><a href="">two</a></li>
                <li><a href="">three</a></li>
    
            </ul>
    
            <ul class="nav nav-tabs">
                <!-- data-toggle='tab'切换属性 然后可通过锚点进行切换-->
                <li class="active"><a href="#a" data-toggle='tab'>one</a></li>
                <li><a href="#b" data-toggle='tab'>two</a></li>
                <li><a href="#c" data-toggle='tab'>three</a></li>
    
            </ul>
            <!-- tab-content内容部分 -->
            <ul class="tab-content">
            <!-- fade淡入淡出 in为一开始为显示 -->
                <li id="a" class="tab-pane fade in active">aaaaa</li>
                <li id="b" class="tab-pane fade">bbbbb</li>
                <li id="c" class="tab-pane fade">ccccc</li>
            </ul>    
    
        </div>
  • 相关阅读:
    java后台svg转成png
    Itext2.0.8 和freemarker导出pdf
    使用freemarker生成word、html时图片显示问题
    ITEXT5 Font 'd:SIMSUN.TTC' with 'Identity-H' is not recognized.
    IntelliJ Idea 2017 免费激活方法
    MySQL 索引
    怎样使用nat和桥接方式解决虚拟机联网问题
    【Linux】NAT模式下关于主机ping不通虚拟机的问题
    同一台服务器(电脑)运行多个Tomcat
    [shell基础]——cut命令
  • 原文地址:https://www.cnblogs.com/dreamerC/p/6208117.html
Copyright © 2011-2022 走看看