当前位置:主页 > 网页特效 > TAB标签 >

3种基于Bootstrap的超酷Tabs选项卡UI设计

发布时间:2018/07/08 来源:互联网 浏览: 关键词:选项卡 bootstrap UI tab 
3种基于Bootstrap的超酷Tabs选项卡UI设计 3种基于Bootstrap的超酷Tabs选项卡UI设计
阿里云

简要教程

这是3种基于Bootstrap的超酷tabs选项卡UI设计效果。这3款选项卡都是使用原生的Bootstrap网格系统和Tabs组件来制作,通过自定义CSS样式来生成不同的选项卡效果。

使用方法

HTML结构

下面是每一种选项卡的HTML结构和它们对应的效果演示图。

选项卡1:

tabs选项卡效果-1

<divclass="container">
    <divclass="row text-center">
        <h1class="white">Tab选项卡-1</h1>
    </div>
    <divclass="row">
        <divclass="col-md-offset-2 col-md-8 mt30">
            <divclass="tab"role="tabpanel">
                <!-- 选项卡的分页导航 -->
                <ulclass="nav nav-tabs"role="tablist">
                    <lirole="presentation"class="active"><ahref="#Section1"aria-controls="home"role="tab"data-toggle="tab">Section 1</a></li>
                    <lirole="presentation"><ahref="#Section2"aria-controls="profile"role="tab"data-toggle="tab">Section 2</a></li>
                    <lirole="presentation"><ahref="#Section3"aria-controls="messages"role="tab"data-toggle="tab">Section 3</a></li>
                    <lirole="presentation"><ahref="#Section4"aria-controls="settings"role="tab"data-toggle="tab">Section 4</a></li>
                </ul>
                <!-- 选项卡Tab内容 -->
                <divclass="tab-content">
                    <divrole="tabpanel"class="tab-pane active"id="Section1">
                        <h3>Section 1</h3>
                        <p>
                            ......
                        </p>
                    </div>
                    <divrole="tabpanel"class="tab-pane"id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            ......
                        </p>
                    </div>
                    <divrole="tabpanel"class="tab-pane"id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            ......
                        </p>
                    </div>
                    <divrole="tabpanel"class="tab-pane"id="Section4">
                        <h3>Section 4</h3>
                        <p>
                            .......
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

选项卡2:

tabs选项卡效果-2

<divclass="container">
    <divclass="row text-center">
        <h1class="white">Tab选项卡-2</h1>
    </div>
 
    <divclass="row">
        <divclass="col-md-offset-3 col-md-6">
            <divclass="tab"role="tabpanel">
                <!-- Nav tabs -->
                <ulclass="nav nav-tabs"role="tablist">
                    <lirole="presentation"class="active">
                    <ahref="#Section1"aria-controls="home"role="tab"data-toggle="tab"><iclass="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <lirole="presentation">
                    <ahref="#Section2"aria-controls="profile"role="tab"data-toggle="tab"><iclass="fa fa-cubes"></i>Section 2</a>
                    </li>
                    <lirole="presentation">
                    <ahref="#Section3"aria-controls="messages"role="tab"data-toggle="tab"><iclass="fa fa-comments"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <divclass="tab-content">
                    <divrole="tabpanel"class="tab-pane fade in active"id="Section1">
                        <p>......</p>
                    </div>
                    <divrole="tabpanel"class="tab-pane fade"id="Section2">
                        <p>......</p>
                    </div>
                    <divrole="tabpanel"class="tab-pane fade"id="Section3">
                        <p>...... </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>      

选项卡3:

tabs选项卡效果-3

<divclass="container">
    <divclass="row text-center">
        <h1class="white">Tab选项卡-3</h1>
    </div>
 
    <divclass="row">
        <divclass="col-md-offset-2 col-md-8">
            <divclass="tab"role="tabpanel">
                <!-- Nav tabs -->
                <ulclass="nav nav-tabs"role="tablist">
                    <lirole="presentation"class="active">
                    <ahref="#Section1"aria-controls="home"role="tab"data-toggle="tab"><iclass="fa fa-envelope-o"></i>Section 1</a>
                    </li>
                    <lirole="presentation">
                    <ahref="#Section2"aria-controls="profile"role="tab"data-toggle="tab"><iclass="fa fa-cube"></i>Section 2</a>
                    </li>
                    <lirole="presentation">
                    <ahref="#Section3"aria-controls="settings"role="tab"data-toggle="tab"><iclass="fa fa-comment"></i>Section 3</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <divclass="tab-content">
                    <divrole="tabpanel"class="tab-pane fade in active"id="Section1">
                        <h3>Section 1</h3>
                        <p>
                           ......
                        </p>
                    </div>
 
                    <divrole="tabpanel"class="tab-pane fade"id="Section2">
                        <h3>Section 2</h3>
                        <p>
                            ......
                        </p>
                    </div>
 
                    <divrole="tabpanel"class="tab-pane fade"id="Section3">
                        <h3>Section 3</h3>
                        <p>
                            ......
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>     

各种选项卡的CSS样式请参考下载文件。

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top