导航

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. SpringMyBatis解析4-MapperScannerConfigurer

    如果有成百上千个dao接口呢,那我们岂不是要配置添加成百上千个bean,当然不是这样,spring还为MyBatis添加了拓展的功能,可以通过扫描包目录的方式,添加dao,让我看看具体使用和实现. & ...

  2. wpf,ListBox,ScrollViewer内容向左向右偏移指定位置

    public partial class Example : UserControl { private ScrollViewer myScrollViewer; public Example() { ...

  3. 【bzoj4513】储能表【数位DP】

    本来是想去学数位DP,作死挑了这道题,爆炸... 听说正确姿势应该是去做bzoj4521[手机],听说迪克们当场都A了,Orz 然后对于4513,我只想说,一.脸.懵.逼 首先,我是无论如何都无法想到 ...

  4. PHP如何实现文件上传

    PHP如何实现文件上传 1.表单部分  允许用户上传文件,在HTML表单的声明中要加上一个上传的属性:  enctype = 'multipart/form-data'  表单的method必须是PO ...

  5. sprint3冲刺第一天

    1.计划了sprint3要做的内容: 整合前台和后台,然后发布让用户使用,然后给我们反馈再进行改进 2.backlog表格: ID 任务 Est 做了什么 1 实现用户登录与权限判定 4 进行用户分类 ...

  6. WPF DataGrid – Dynamically updating DataGridComboBoxColumn

    The Scenario I want to do a master detail like scenario where the selection in one ComboBox cell wil ...

  7. python安装setuptools

    http://wenku.baidu.com/link?url=I-FCVFpHbP2oyCt1Gjb1X5xHk4P475dVU3j8rWd4b4VSuD-Wd86LdbC7bdYskZdtDfGK ...

  8. BZOJ 3223 & 区间翻转

    题意: 就是贴个代码,这是我入门题的弱化版..然而一共还是写了40分钟,不专注(一边看比赛一边打)是一个问题,splay每个操作的细节确实有点多(什么时候updata啊..什么时候pushdown啊. ...

  9. Python for Informatics 第11章 正则表达式一（译）

    注:文章原文为Dr. Charles Severance 的 <Python for Informatics>.文中代码用3.4版改写,并在本机测试通过. 目前为止,我们一直在通读文件,查 ...

  10. 【BZOJ】3916: [Baltic2014]friends

    http://www.lydsy.com/JudgeOnline/problem.php?id=3916 #include <bits/stdc++.h> using namespace ...