在本文中，您将学习如何使用 Bootstrap 工具包来创建基于导航、标签、胶囊式标签的导航。

基于标签的导航

nav nav-tabs

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 基本的基于标签的导航实例</title>

<meta name="description" content="Bootstrap 基本的基于标签的导航实例">

<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="span6">

            <ul class="nav nav-tabs">

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

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

                <li><a href="#">Practice Editor </a></li>

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

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

            </ul>

        </div>

    </div>

</div>

</body>

</html>

效果如图:

胶囊式标签导航

nav nav-pills
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 基本的基于胶囊式标签的导航实例</title>

<meta name="description" content="Bootstrap 基本的基于胶囊式标签的导航实例">

<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="span8">

            <ul class="nav nav-pills">

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

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

                <li><a href="#">Practice Editor </a></li>

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

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

            </ul>

        </div>

    </div>

</div>

</body>

</html>

效果如图:

堆叠的或垂直的标签

nav nav-tabs nav-stacked
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 堆叠的或垂直的基于标签的导航实例</title>

<meta name="description" content="Bootstrap 堆叠的或垂直的基于标签的导航实例">

<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="span8">

            <ul class="nav nav-tabs nav-stacked">

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

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

                <li><a href="#">Practice Editor </a></li>

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

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

            </ul>

        </div>

    </div>

</div>

</body>

</html>

效果如图:

Bootstrap 堆叠的或垂直的基于胶囊式标签的导航实例

nav nav-pills nav-stacked

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 堆叠的或垂直的基于胶囊式标签的导航实例</title>

<meta name="description" content="Bootstrap 堆叠的或垂直的基于胶囊式标签的导航实例">

<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">

</head>

<body>

<div class="container">

    <div class="row">

        <div class="span2">

            <ul class="nav nav-pills nav-stacked">

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

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

                <li><a href="#">Practice Editor </a></li>

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

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

            </ul>

        </div>

    </div>

</div>

</body>

</html>

效果如图:

Bootstrap 基于标签的下拉菜单的导航实例

dropdown-menu bottom-up pull-right

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 基于标签的下拉菜单的导航实例</title>

<meta name="description" content="Bootstrap 基于标签的下拉菜单的导航实例">

<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">

<style type="text/css">

.container {

    margin-top: 200px;

}

</style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="span6">

            <ul class="nav nav-tabs">

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

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

                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>

                    <ul class="dropdown-menu">

                        <li><a href="#">Twitter Bootstrap</a></li>

                        <li><a href="#">Google Plus API</a></li>

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

                        <li class="divider"></li>

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

                    </ul>

                </li>

                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>

                    <ul class="dropdown-menu bottom-up pull-right">

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

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

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

                        <li class="divider"></li>

                        <li><a href="#">Live Demos</a></li>

                    </ul>

                </li>

            </ul>

        </div>

    </div>

</div>

<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>

<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>

<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>

</body>

</html>

效果如图:

Bootstrap 导航的更多相关文章

  1. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  2. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  3. Bootstrap 导航 标题栏

    Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  5. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  6. Bootstrap导航

    前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...

  7. Bootstrap 导航元素（标签页）

    [Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...

  8. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  9. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  10. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

随机推荐

  1. mac在查看jre通路

    于Finder于command+shift+G 选/Library/Java/JavaVirtualMachines/jdk1.8.0_20.jdk/Contents/Home 版权声明:本文博主原创 ...

  2. SharePoint 2010 中创建超链接到Pop-Up对话框

    SharePoint 2010 中创建超链接到Pop-Up对话框         SharePoint 2010 推出了新式的带有阴影的弹出对话框,你感觉怎么样?我感觉倒是挺酷的.这样少打开了一个页面 ...

  3. net网站运行在自定义的Web服务器上

    ASP.NET 开发必备知识点(1):如何让Asp.net网站运行在自定义的Web服务器上   一.前言 大家都知道,在之前,我们Asp.net 的网站都只能部署在IIS上,并且IIS也只存在于Win ...

  4. Extjs 4.2 右键菜单树节点（，选择逆，废除)

    写自己的最新版本号extjs4.2树节点的操作,记录它,可能在将来被用于. var tree = new Ext.tree.TreePanel({ flex: 1, animate: true, au ...

  5. Delegate成员变量和Event的区别

    上周五有同事问了我一个问题:Delegate和Event有什么区别?具体来说在设计一个类的时候,声明一个事件(Event)和声明一个Delegate类型的成员变量有啥区别.   我的第一反应是没啥区别 ...

  6. int有符号和无符号类型内存 -- C

    /* int 有符号 0xffffffff == -1 0xfffffffe == -2 最小 0x80000000 == -21 4748 3648 最大 0x7fffffff == 21 4748 ...

  7. cocos2d-x-3.1 经常使用宏 (coco2d-x 学习笔记五)

    在代码中使用这些宏,能够降低敲键盘的次数,从而提高编写效率. 与节点属性(property)相关的 CC_PROPERTY_READONLY CC_PROPERTY_READONLY_PASS_BY_ ...

  8. Tiptop二二次开发系列

    易拓GP 4gl二二次开发系列.使用文档工具的深度开发,包装分享. 包含文件: Genero BDL HB 2.0 .pdf Genero Studio 4GL官方开发手冊.pdf 下载地址:http ...

  9. P31RestKit.dll 2.0 Unity3d json

    using System.Collections.Generic; using UnityEngine; using System.Collections; using Prime31; public ...

  10. NOIP 2012 解决问题的方法

    [D1T1vigenerepassword] P1778vigenerepassword Accepted 标签:[显示标签] 描写叙述 16世纪法国外交家Blaise de Vigenère设计了一 ...