导航

Bootstrap中可用的导航有相似的标记，用基类.nav开头，这是相似的部分。改变修饰类可以改变样式。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <!--        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->

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

        <style>

            .container {

                margin-top: 20px;

            }

        </style>

    </head>

    <body>

        <div class="container">

            <div class="col-md-3">

                <ul class="nav nav-tabs">

                    <li class="active"><a href="#">Home</a></li>

                    <li><a href="#">Profile</a></li>

                    <li><a href="#">Messages</a></li>

                </ul>

            </div>

        </div>

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

        <script type="text/javascript" src="js/bootstrap.min.js"></script>

        <!--<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>-->

        <!--<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>-->

    </body>

</html>

1、标签页

注意.nav-tabs类需要.nav基类。只要加上.nav-stacked,可以竖直堆叠。

                <ul class="nav nav-tabs">

                    <li class="active"><a href="#">Home</a></li>

                    <li><a href="#">Profile</a></li>

                    <li><a href="#">Messages</a></li>

                </ul>

2、胶囊式标签页

nav-tabs用.nav-pills代替。

禁用的链接:
<li class="disabled"><a href="#">Profile</a></li>
没有鼠标悬停效果,链接功能没有受到影响

3、使用下拉菜单

                <ul class="nav nav-pills">

                    <li class="dropdown active">

                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown

                            <span class="caret">

                            </span>

                        </a>

                        <ul class="dropdown-menu">

                            <li><a href="#">Home</a></li>

                            <li><a href="#">Profile</a></li>

                            <li><a href="#">Messages</a></li>

                        </ul>

                    </li>

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Profile</a></li>

                    <li><a href="#">Messages</a></li>

                </ul>

4、可用的变体

                <span class="label label-default">Default</span>

                <span class="label label-primary">Primary</span>

                <span class="label label-success">Success</span>

                <span class="label label-info">Info</span>

                <span class="label label-warning">Warning</span>

                <span class="label label-danger">Danger</span>

5、面包屑导航

                <ol class="breadcrumb">

                    <li><a href="#">Home</a></li>

                    <li><a href="#">Library</a></li>

                    <li class="active">Data</li>

                </ol>

Bootstrap (导航、标签、面包屑导航)的更多相关文章

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

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

  2. Bootstrap——面包屑导航（Breadcrumbs）

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式. Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb 类的无序列表. <o ...

  3. Bootstrap-CL：面包屑导航

    ylbtech-Bootstrap-CL:面包屑导航 1.返回顶部 1. Bootstrap 面包屑导航(Breadcrumbs) 面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式 ...

  4. MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

    上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...

  5. Bootstrap面包屑导航

    Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...

  6. Bootsrtap 面包屑导航(Breadcrums)

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

  7. WordPress 添加面包屑导航

    所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...

  8. 织梦DedeCms去掉栏目页面包屑导航最后的分隔符“>”

    织梦DedeCms的面包屑导航调用标签{dede:field name=’position’ /},在栏目页里调用的面包屑导航,最后会出现分割符号“>”,如:主页 > DedeCms 模板 ...

  9. 夺命雷公狗---DEDECMS----26dedecms面包屑导航的实现

    我们在很多项目里面都会用到面包屑导航,而dedecms里面也是给我们封装好面包屑导航的了,如下图所示: 在dede里面实现面包屑导航主要用到{dede:field.position/}标签,我们首先来 ...

随机推荐

  1. mysql LAST_INSERT_ID 使用与注意事项

    在使用MySQL时,若表中含自增字段(auto_increment类型),则向表中insert一条记录后,可以调用last_insert_id()来获得最近insert的那行记录的自增字段值 $mdb ...

  2. hdu1503 最长公共子序列变形

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1503 题意:给出两个字符串 要求输出包含两个字符串的所有字母的最短序列.注意输出的顺序不能 ...

  3. 使用wget

    下载整个网站 需要下载某个目录下面的所有文件: wget -c -r -np -k -L -p url 有用到外部域名的图片或连接,如果需要同时下载就要用-H参数: wget -np -nH -r - ...

  4. iOS Debug日志 viewhierarchy调试笔记

    Debut - View Debugging - Capture View Hierarchy 当视图没有正常显示时,用view hierarchy进行调试,查看左边的分支里有没有加载对应的视图. 如 ...

  5. Codeforces 620E New Year Tree（DFS序 + 线段树）

    题目大概说给一棵树,树上结点都有颜色(1到60),进行下面两个操作:把某结点为根的子树染成某一颜色.询问某结点为根的子树有多少种颜色. 子树,显然DFS序,把子树结点映射到连续的区间.而注意到颜色60 ...

  6. Gym100685G Gadget Hackwrench（倍增LCA）

    题目大概说一棵边有方向的树,q个询问,每次询问结点u是否能走到v. 倍增LCA搞即可: 除了par[k][u]表示u结点往上走2k步到达的结点, 再加上upp[k][u]表示u结点往上走2k步经过边的 ...

  7. foxmail配置office365邮箱

    公司用的是office365套装,由于一直不习惯outlook点x就退出程序的设置,导致经常出现没能及时响应邮件的情况.一怒之下,把客户端改成foxmail. 邮箱客户端切换的主要问题出现在foxma ...

  8. Oracle存储过程中临时表的使用技巧

    一.Oracle临时表知识 在Oracle中,临时表分为SESSION(会话级).TRANSACTION(事务级)两种,SESSION级的临时表数据在整个SESSION都存在,直到结束此次SESSIO ...

  9. [Cocos2d-x For WP8]Scene场景

         场景(CCScene) 在游戏里,场景就是关卡. CCScene是app工作流程上独立块,一个app可能拥有多个scene,但是在任何时候只能有一个是激活状态的.一个CCScene对象由一个 ...

  10. [Cocos2d-x For WP8]矩形碰撞检测

    在游戏中我们通常会涉及到两个精灵之间的碰撞的计算,那么在Cocos2d-x里面我们通常会用矩形碰撞检测来计算两个精灵在运动的过程中是否碰撞到了.原理很简单,就是当运动的时候通过精灵的矩形坐标进行遍历来 ...