bootstrap-选项卡头部及内容

原创 2017年11月14日 19:49:02
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签页</title>
    <link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css">
    <script src="../JS/jquery-3.2.1.min.js"></script>
    <script src="../JS/bootstrap.js"></script>

    <style type="text/css">
        .tab-content{border: 1px solid #ddd;border-top: none;padding: 20px;border-radius: 0 0 5px 5px;}
        img{width: 350px;height:350px;}
    </style>
</head>
</head>
<body style="height: 2000px;">
    <div id="container">
    <br><br>
    <!-- 标签页头部 -->
    <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>

    <br><br>
    <ul class="nav nav-tabs" style="width: 500px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br><br>
    <ul class="nav nav-tabs nav-justified" style="width: 500px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br><br>
    <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>

    <br><br>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
    </ul>

    <br><br>
    <ul class="nav 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>


    <!-- 标签航加下拉菜单 -->
    <br><br>
    <ul class="nav nav-tabs" style="width: 500px;">
        <li class="active"><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle='dropdown'>three<span class="caret"></span></a><!-- data-toggle='dropdown'交互 -->
            <ul class="dropdown-menu">
                <li><a href="#">a</a></li>
                <li><a href="#">b</a></li>
                <li><a href="#">c</a></li>
            </ul>
        </li>
    </ul>


<!-- 标签主体 -->
    <br><br><br><br>
    <div style="width:400px;position: relative;left: 400px;">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#a" data-toggle="tab">字懿</a></li>
            <li><a href="#b" data-toggle="tab">桑茜雅</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">刘冠群
                <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#a" data-toggle="tab">字懿</a></li><!-- data-toggle="tab":使能与tab的主体内容链接-->
                        <li><a href="#b" data-toggle="tab">桑茜雅</a></li>
                    </ul>
            </li>
        </ul>

        <ul class="tab-content">
            <li id="a" class="tab-pane fade in active"><img src="../../img/猫1.jpg"></li>
            <li id="b" class="tab-pane fade"><img src="../../img/猫2.jpg"></li>
            <li id="c" class="tab-pane fade"><img src="../../img/猫3.jpg"></li>
        </ul>
    </div>

    </div>
</body>
</html>
<!-- 
标签页 

 头部:class="nav nav-tabs"
nav-tabs:一种标签样式

nav-pills:标签的另一种样式,药丸型,类型同nav-tabs

nav-justified:自适应宽度,均匀分配,若屏幕变小,则自动变成竖列

nav-tabs-justified:下划线和标签的宽度相同

 nav-stacked:竖状的样式,一般都是横状的  class="nav nav-pills nav-stacked"一般这样搭配



 内容(与下拉菜单不同的是,它是直接显示的):class="tab-content"

 class="tab-pane":tab-pane作为tab-content的内元素才可以进行显示隐藏,class="tab-pane"元素要和标签的data-toggle互相对应,如果data-toggle设置为data-toggle="#demo"则内容元素上要设置id="demo"

fade:如果需要为选项卡设置淡入淡出效果, 需要添加 .fade 到每个 .tab-pane后面。第一个选项卡必须添加 .in 类,表示刷新后就直接显示,下面的项设置fade

data-toggle="tab":使选项卡的头部和内容交互
 -->
版权声明:本文为博主原创文章,未经博主允许不得转载。

dcloud------mui 点击底部选项卡,获取文本内容

dcloud------mui 点击底部选项卡,获取文本内容 1.点击选项卡,触发的事件,我们用mui('.mui-bar-tab').on('tap', 'a', function(e) {  ...
  • u010978381
  • u010978381
  • 2017年06月15日 16:12
  • 1514

android RadioButton实现选项卡的效果

RadioButton通常和RadioGroup配合使用,即同一个group中的
  • u014399495
  • u014399495
  • 2014年06月17日 22:36
  • 617

Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡

 《Android ViewPager实现Tabhost选项卡底部滑块动态滑动过渡》 之前基于github上的第三方开源控件ViewPagerIndicator的UnderlinePageIn...
  • zhangphil
  • zhangphil
  • 2015年03月31日 11:21
  • 2570

ionic tab选项卡置于顶部

等额本息内容 等额本金内容 .mortgagetab .tabs{...
  • chenhua4088
  • chenhua4088
  • 2015年11月09日 21:15
  • 3177

flex 使用SuperTabNavigator设置选项卡字体大小

原始时候的字体大小 设置为12号字 代码: fontSize="12"                closePolicy="{SuperTab.CLOSE_ALWAYS}}"    ...
  • saxgood
  • saxgood
  • 2013年06月07日 11:40
  • 689

js- 常见网页选项卡下的滚动条(控制选项卡内的内容高度)

网页常见的选项卡,为了在选项卡这么小的空间放进比较多的内容,那么可以运用滚动条来控制内容区域的高度,使当前选项卡放下足够的文字。可能我说的有点抽像,下面用一张图表示一下: 这两张图片是我从网上截图...
  • u011546421
  • u011546421
  • 2016年10月15日 11:35
  • 607

WPF窗体中选项卡与各个选项卡页面的分离

XAML代码:// DemoViewer.xaml    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xm...
  • johnsuna
  • johnsuna
  • 2007年10月19日 17:32
  • 6658

选项卡切换图片

选项卡切换图片 *{margin:0;padding:0;} #tab{margin:20px auto;width:500px;height:auto;} ul{width:500...
  • lusizhifei
  • lusizhifei
  • 2017年02月20日 20:01
  • 191

Android ViewPager+Fragment滑动选项卡,tab点击选项卡

有一段时间一直再研究这个,自Android 3.0以后,很少开发者再用以前的TabWidget控件了。那种效果不是很好,也不能滑动。后来陆续出现了各种各样滑动选项卡,每种的出现都各有优势吧。但我还是推...
  • qq_16064871
  • qq_16064871
  • 2015年05月23日 08:29
  • 8369

基于ViewPagerIndicator的UnderlinePageIndicator,ViewPager选项卡底部滑块衬线滑动控件

《基于ViewPagerIndicator的UnderlinePageIndicator,ViewPager选项卡底部滑块衬线滑动控件》  基于github上的第三方开源的ViewPagerIndi...
  • zhangphil
  • zhangphil
  • 2015年03月30日 15:57
  • 3512
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:bootstrap-选项卡头部及内容
举报原因:
原因补充:

(最多只允许输入30个字)