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. Linux的iptables常用配置范例（3）

    编辑/etc/rc.local,加入iptables -t nat -A POSTROUTING -s 192.168.0.0/24 -o eth1 -j MASQUERADE,外网口eth1为dhc ...

  2. CSS-学习笔记六

    1. 自适应,响应式布局 2. pure 3. Animate

  3. JBPM4.4 基本使用

    JBPM工作流环境搭建: 1.先下载JBPM框架 2.安装JBPM图形编辑插件 注:插件在jbpm-4.4\install\src\gpd 目录下 创建工程导入JBPM依赖jar包 注:jar包目录j ...

  4. PHP安装插件方式

    PHP安装插件方法主要有两种: 1.先安装相关的库,zlib.curl.xml等,然后在安装 php 时的 ./configure 中设置 --with-xxx(你需要的插件),三部曲安装即可. 2. ...

  5. iOS开发——离线缓存

    先搭好架子,有时间了再填充.

  6. PS基础学习

    1.文件新建 (1).菜单栏新建,快捷键(Ctrl+N) (2).预设的使用--->一般用于网页制作,就选择Web,宽度,高度的单位,网页是像素 (3).分辨率的设置--->电脑网页屏幕分 ...

  7. STM32-USB详细使用说明（转）

    源:STM32-USB详细使用说明 附件HID的双向通信 亮点STM32开发板充实了USBHID数据发送和接收例程(STM32固件库3.5 USB库3.4)

  8. java实现FFT变换（转）

    源:java实现FFT变换 /************************************************************************* * Compilati ...

  9. UWP_小说在线阅读器：功能要求与技术要求

    学了WP开发也有一年了,也没做过什么软件的.17年进发UWP,锻炼自己一下.做一个开源的小说阅读器吧. 既然开发一个软件.所以要设计一下吧. 功能要求: 可能要用到的技术,这个吗,这就是遇到问题在解决 ...

  10. 使用spol导出exce

    sqlplus 能生产xls的excel文件 connect / as sysdba; SET NEWPAGE 0 SET SPACE 0 SET LINESIZE 80 SET PAGESIZE 0 ...