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. js 获取n天前的时间

    <script type="text/javascript"> var strdate = new Date(); var begindate = strdate.ge ...

  2. mysql 索引对于select速度提升作用实验

    说明:News2在News的基础上把is_active加上索引. mysql> select count(*) from News2 where is_active=1; +---------- ...

  3. linux下用script和scriptreplay对命令行操作录像

    以前查看自己的历史操作,都是history里来查看的,只有命令,有时候系统返回的什么也没有,看了script可以对自己的操作进行录像,于是自己也做个. 要记录操作之前输入命令: [root@wulao ...

  4. Android里merge和include标签的使用

    1.使用<include /> 标签来重用layout代码 如果在一个项目中需要用到相同的布局设计,可以通过<include /> 标签来重用layout代码,该标签在andr ...

  5. 再探CRC(转)

    源:http://hi.baidu.com/skystalker/item/228a263147f74e87f5e4ad8d 之前写了CRC16的程序,虽说能用,却不知其所心然,现在要用CRC32,重 ...

  6. 计算机学院大学生程序设计竞赛（2015’12） 1009 The Magic Tower

    #include<cmath> #include<cstdio> #include<cstring> #include<algorithm> using ...

  7. iOS开发——获取当前屏幕显示的viewcontroller

    获取当前屏幕显示的viewcontroller,然后想怎么跳就怎么跳. - (UIViewController *)getCurrentVC { UIViewController *result = ...

  8. (简单) POJ 2502 Subway，Dijkstra。

    Description You have just moved from a quiet Waterloo neighbourhood to a big, noisy city. Instead of ...

  9. AOP：代理实现方式①通过继承②通过接口

    文件结构: 添加日志: package com.wangcf.manager; public class LogManager { public void add(){ System.out.prin ...

  10. Spring学习---JPA配置和使用

      理论的东西如果不实践,永远不会变成自己的东西.本文将介绍用maven管理,用Hibernate作为JPA供应商,使用MYSQL数据库,配置和使用JPA.   以下代码已经上传至GITHUB.   ...