bootstrap中的Navigational tabs, pills,和lists标签

最新推荐文章于 2024-08-20 11:50:43 发布

依然那么楞

最新推荐文章于 2024-08-20 11:50:43 发布

阅读量1.3k

点赞数

文章标签： bootstrap tab 标签 pills lists

本文链接：https://blog.csdn.net/ling811/article/details/16828085

版权

1、Navigational tabs（nav-tabs）标签用法，简单的实验：

<div class="container">
	<div class="container-fluid">
    		<div class="tabbable">
            	<ul class="nav nav-tabs">
                	<li class="active"><a href="#1" data-toggle="tab">1</a></li>
                    <li><a href="#2" data-toggle="tab">2</a></li>
                </ul>
                <div class="tab-content">
                	<div class="tab-pane active" id="1">
                    	<table class="table">
                        	1111
                        </table>
                    </div>
                    <div class="tab-pane" id="2">
                    	<table class="table">
                        	2222
                        </table>
                    </div>
                </div>
            </div>
    </div>
</div>

2、pills的用法，用nav-pills替换掉上个的nav-tabs，（我自己觉得nav-pills其实美化了选项卡）

<div class="container">
	<div class="container-fluid">
    		<div class="tabbable">
            	<ul class="nav nav-pills">
                	<li class="active"><a href="#1" data-toggle="tab">1</a></li>
                    <li><a href="#2" data-toggle="tab">2</a></li>
                </ul>
                <div class="tab-content">
                	<div class="tab-pane active" id="1">
                    	<table class="table">
                        	1111
                        </table>
                    </div>
                    <div class="tab-pane" id="2">
                    	<table class="table">
                        	2222
                        </table>
                    </div>
                </div>
            </div>
    </div>
</div>

3、lists（nav-lists）的用法：

<div class="container">
	<div class="container-fluid">
    		<div class="tabbable">
            <!--<ul class="nav nav-tabs">-->
            	<!--<ul class="nav nav-pills">-->
            	<ul class="nav nav-lists">
                	<li class="active"><a href="#1" data-toggle="tab"><i class="icon-book"></i>1</a></li>
                    <li><a href="#2" data-toggle="tab"><i class="icon-arrow-up"></i>2</a></li>
                </ul>
                <div class="tab-content">
                	<div class="tab-pane active" id="1">
                    	<table class="table">
                        	1111
                        </table>
                    </div>
                    <div class="tab-pane" id="2">
                    	<table class="table">
                        	2222
                        </table>
                    </div>
                </div>
            </div>
    </div>
</div>

4、三个标签功能大致相同，可根据你做的网站来具体选择