导航

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. python特殊函数 __cmp__

    __cmp__ 对 int.str 等内置数据类型排序时,Python的 sorted() 按照默认的比较函数 cmp 排序,但是,如果对一组 Student 类的实例排序时,就必须提供我们自己的特殊 ...

  2. JQ学习（一）

    通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions). jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些 ...

  3. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  4. JavaScript权威指南读书笔记

    JavaScript 1.变量 变量是一个表示值的符号,是一个名字,他的本质是值: var x; //----声明一个变量: 值通过等号“=”赋给变量,x = 16; 对象是名/值对的集合,或字符串到 ...

  5. Y86模拟器安装

    Y86模拟器安装 这周需要学习Y86下的指令集开发,Y86和x86可以说是孪生兄弟,但是还是存在着一些小的差别.接下来介绍如何进行linux-debian平台下的Y86模拟器安装. 虚拟机VMware ...

  6. Js判断客户端是iphone还是安卓

    <script> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexO ...

  7. 停靠技术 Dock

    C:\Program Files\Borland\Delphi7\Demos\Docking   delphi例子 网上文档 http://www.docin.com/p-95543759.html

  8. Codeforces 687C The Values You Can Make（DP）

    题目大概说给n个各有价值的硬币,要从它们中选出若干个组合成面值k,而要求的是各个方案里这些选出的硬币能组合出来的面值有哪些. 有点绕.. dp[i][j][k]表示前i个硬币中 能否 组合成面值j且选 ...

  9. android项目 在签名打包遇到的问题

    我在签名打包前,build success  ,可以把程序安装在手机上 然后签名打包的时候,build fail  ,原因采用了release 版本,因此这个时候在gradule build 添加下面 ...

  10. ural 2073. Log Files

    2073. Log Files Time limit: 1.0 secondMemory limit: 64 MB Nikolay has decided to become the best pro ...