Bootstrap入门（十二）组件6：导航标签页
 
1.标签页
2.胶囊式标签页
3.垂直展示
4.两端对齐的标签页
5.禁用的链接
6.添加下拉菜单
 
先引入本地的CSS文件和JS文件（注：1.bootstrap是需要jQuery支持的。2.需要在<body>当中添加）

<link href="css/bootstrap.min.css" rel="stylesheet">

<script src="jquery-3.1.0.min.js" type="text/javascript"></script>

<script src="bootstrap.min.js" type="text/javascript"></script>
 
1.标签页
要展示一个导航，基本的类就是nav
一个标签页会有很多选项，这就要用到<ul>标签
先展示一个基本的标签页
（class='active'用于使处于“被选择的状态”）

　　　　 <div class="container">

            <ul id="mytab" class="nav nav-tabs" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>
效果：

鼠标移动到其他标签上面，会有效果

但是点击是没有反应的，这是因为是依赖于JS的一个插件的，来使用一下

（mytab是之前设置的的一个id，因为是id，所以要在前面使用#来索引，a指里面的<a>标签，“.click”式说当鼠标点击时，有一个事件，执行show）

　　　　　<script>

            $("#mytab a").click(function (e) {

                e.preventDefault();

                $(this).tab("show");

            })

        </script>

刷新，点击另一个标签，切换了

2.胶囊式标签页
胶囊式其实指得就是颜色不一样，只需要把class中的nav-tab改为nav-pills就可以了
　　　　 <div class="container">

            <ul id="mytab" class="nav nav-pills" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>

执行，

点击其他标签，有同样的效果

3.垂直展示

除了水平展示，我们也可以垂直展示

只需要在class中添加一个nav-stacked属性就可以了

　　　　 <div class="container">

            <ul id="mytab" class="nav nav-pills nav-stacked" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>

效果：

4.两端对齐的标签页
也就是全屏的效果，只需要向class中添加nav-justified属性就可以了
        <div class="container">

            <ul id="mytab" class="nav nav-pills nav-justified" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation'><a href="">SDF</a></li>

            </ul>

        </div>

效果：

5.禁用的链接
有时候不想某些标签被使用，只需要在相应的<li>标签上添加一个disabled的class就可以了
 
6.添加下拉菜单
比如在最后一个标签那里添加一个下拉菜单
需要的操作是，在相应的<li>标签添加一个class="dropdown"，然后在里面嵌套一个<ul><li>的组合就可以
　　　　<div class="container">

            <ul id="mytab" class="nav nav-pills nav-justified" role='tablist'>

                <li role='presentation' class='active'><a href="">HOME</a></li>

                <li role='presentation'><a href="">ASD</a></li>

                <li role='presentation' class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">

                        SDF

                        <span class="caret"></span>

                    </a>

                    <ul class="dropdown-menu" role="menu">

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">1</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">2</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">3</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">4</a></li>

                        <li role="presentation"><a href="" role="menuitem" tabindex="-1">5</a></li>

                    </ul>

                </li>

            </ul>

        </div>

效果:

同样也可以运用到胶囊式当中，修改一些class即可

 
 
 
 
 
 

Bootstrap入门（十二）组件6：导航标签页的更多相关文章

  1. Bootstrap入门（二十二）组件16：列表组

    Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

  2. Bootstrap入门（二十）组件14：警告框

    Bootstrap入门(二十)组件14:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息,提示.通知或者警示,可以迅速吸引注意力. 1.情景警告框 2.可关闭的警告框 3. ...

  3. Bootstrap入门（二十八）JS插件5：工具提醒

    Bootstrap入门(二十八)JS插件5:工具提醒 工具提示在使用过程中比较常见,但是实现起来有些麻烦,而bootstrap则很好地解决了这个问题. 我们来写一个简单的实例 先引入CSS文件和JS文 ...

  4. Bootstrap入门（二十九）JS插件6：弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

  5. Bootstrap入门（二十七）JS插件4：标签页

    Bootstrap入门(二十七)JS插件4:标签页 标签页的切换可以带动内容的变化 首先我们引入CSS文件 <link href="bootstrap.min.css" re ...

  6. Bootstrap入门（二十五）JS插件2：过渡效果

    Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js  ...

  7. Bootstrap入门（二十四）data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  8. Bootstrap入门（二十一）组件15：警告框

    Bootstrap入门(二十一)组件15:警告框 通过这些简单.灵活的进度条,为当前工作流程或动作提供实时反馈. 进度条组件使用了 CSS3 的 transition 和 animation 属性来完 ...

  9. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

随机推荐

  1. [iOS]C语言技术视频-14-指针变量高级用法(函数指针)

    下载地址: 链接: http://pan.baidu.com/s/1ykyg2 密码: fg5t

  2. rsa or dsa?

    http://www.linuxquestions.org/questions/linux-security-4/which-is-better-rsa-or-dsa-public-key-12593 ...

  3. mariadb cache1

    http://www.percona.com/blog/2006/07/27/mysql-query-cache/ MySQL Query Cache July 27, 2006 by Peter Z ...

  4. IFeatureWorkspace OpenFeatureClass Example（转）

    网络来源:http://changqingnew.blog.163.com/blog/static/1075233820103383633639/ //IFeatureWorkspace OpenFe ...

  5. php命名空间如何引入一个变量类名？

    例子如下: $className = 'Test'; 正常 new \Require\allClass\Test(); 当然OK,但是 new \Require\allClass\$className ...

  6. (简单) HUST 1017 Exact cover , DLX+精确覆盖。

    Description There is an N*M matrix with only 0s and 1s, (1 <= N,M <= 1000). An exact cover is ...

  7. LPC1768IAP(详解,有上位机)

    之前说了stm32的iap编程,今天天气真好,顺手就来说说lpc1788的iap编程(没看前面的请查看stm笔记下的内容) 首先是flash的算法,lpc1768并没有寄存器来让我们操作flash,他 ...

  8. ftp_get_file_and_directory

    class DirectoryItem { public Uri BaseUri; public string AbsolutePath { get { return string.Format(&q ...

  9. 查找 SqlServer死锁

    use master if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[sp_who_lock]') ) dr ...

  10. Oracle安装卸载

    http://study.163.com/course/courseLearn.htm?courseId=932016#/learn/video?lessonId=1115367&course ...