导航

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. J2EE中使用jstl报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or the jar错

    一.发现问题 运行引用了jstl的jsp页面 报http://java.sun.com/jsp/jstl/core cannot be resolved in either web.xml or th ...

  2. 8611 大牛之路I

    时间限制:500MS  内存限制:1000K 提交次数:157 通过次数:62 题型: 编程题   语言: C++;C Description 要成为ACM大牛,要掌握很多必需的知识点.某些知识点可以 ...

  3. 后缀数组 POJ 1743 Musical Theme

    题目链接 题意:给定n个数字,求超过5个数字的,最长的,变化相同的,不相交的重复子串 分析:男人8题中的一题!数列相邻两项做差,形成新数列,即求数列中的最长重复子串(不可相交). 后缀数组+二分答案. ...

  4. JNDI 配置：JBoss + MySQL

    一.JNDI 名词解释 JNDI 是Java 命名和目录接口(Java Naming and Directory Interface,JNDI)的简称.从一开始就一直是 Java 2 平台企业版(JE ...

  5. font 和 text 字和文本操作

  6. 51Nod 1001 数组中和等于K的数对 Label:Water

    给出一个整数K和一个无序数组A,A的元素为N个互不相同的整数,找出数组A中所有和等于K的数对.例如K = 8,数组A:{-1,6,5,3,4,2,9,0,8},所有和等于8的数对包括(-1,9),(0 ...

  7. NOIp 2014 #3 寻找道路 Label:图论

    题目描述 在有向图G 中,每条边的长度均为1 ,现给定起点和终点,请你在图中找一条从起点到终点的路径,该路径满足以下条件: 1 ．路径上的所有点的出边所指向的点都直接或间接与终点连通. 2 ．在满足条 ...

  8. CDOJ 1437 谭松松的旅游计划 Label:倍增LCA && 最短路

    谭松松的旅游计划 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submit  ...

  9. HDU-I Hate It

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写 ...

  10. 【BZOJ2456】mode 神奇的卡内存题

    以后把题解放在前面,估计没人看题解先看题... 内存1M,4个int(其实对内存的概念十分模糊),众数即为出现次数最多的数,可以用抵消的思想(但是众数不是可以是一大坨么...) #include &l ...