导航

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. Android拓展系列(12)--使用Gradle发布aar项目到JCenter仓库

    目的 发布自己的android library(也就是aar)到公共的jcenter仓库,所有的人都能用gradle最简单的方式引用. 为什么选择jcenter,它兼容maven,而且支持更多形式仓库 ...

  2. DOM--5 动态修改样式和层叠样式表

    W3C DOM2 样式规范 CSSStyleSheet对象 表示所有css样式表,包括外部link和嵌入style的;通过document.styleSheets属性可以获得文档中CSSStyleSh ...

  3. Bestcoder round #65 && hdu 5593 ZYB's Tree 树形dp

    Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Submissio ...

  4. 字体和壁纸合并后再更改壁纸--《用delphi开发共享软件》-15.2桌面提示器

    procedure TFrmPlay.mnDeskPicClick(Sender: TObject); Var s:String; i:Integer; begin //s:=Path+'SetPic ...

  5. 得到UIView中某个非子视图在UIView中的位置

    使用 convertRect: fromView: 或者 convertRect: toView:例如一个视图控制器的view中有一个UITableView,UITableView的某个cell中有个 ...

  6. jquery.easing.js的使用

    jquery.easing.js是个好东西,各种动画效果扩展,加强和丰富了jquery自带的各种动画函数 box点击就会像移动出弹簧效果,$(obj).animate(目前状态,时间,效果,回调函数) ...

  7. 不同java 版本的新功能

    Java 5 泛型 自动装箱/拆箱 增强的for 类型安全的枚举 可变参数 静态导入 Annotation Concurrent Package Java 6 Web Service 支持Annota ...

  8. Codeforces Round #343 (Div. 2)

    居然补完了 组合 A - Far Relative’s Birthday Cake import java.util.*; import java.io.*; public class Main { ...

  9. MVC Autofac 注入点

    关键句: ** DependencyResolver.SetResolver(new AutofacDependencyResolver(container));** protected overri ...

  10. while的使用

    我在用while的时候, while(当这个对象的首个字是汉字){ 执行语句 } 我发现出现死循环的现象 其实我要再添加一个条件,就是不管是不是上述条件都成立,最终还是要结束的.