在本文中，您将学习如何使用 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. u_boot启动过程中的具体分析（1）

    闭上眼睛,细致的回顾一下从NAND FLASH 启动的整个流程,首先,当我们打开板子的时候,先执行的就是嵌入在芯片上的iROM,它的作用就是为了把.NAND Flash 中的bootloader的一部 ...

  2. 阐述linux IPC（两）：基于socket进程间通信（下一个）

    [版权声明:尊重原创.转载请保留源:blog.csdn.net/shallnet 要么 .../gentleliu,文章学习交流.请勿用于商业用途]     其中两个进程通信,有两个过程,以彼此的过程 ...

  3. Android4.4 Framework分析——startService创建过程

    我们经常使用context.startService()要启动service.下面就来分析这service启动过程,下图是service启动序列图: watermark/2/text/aHR0cDov ...

  4. ArcPad 10 的安装和部署

    ArcPad它被安装在一个手持装置或业内外的移动终端ArcGIS产品,那ArcPad这是Esri软件产品,哦,不是硬件. 虽然优于ArcGIS Desktop功能复杂的乐趣,是对于野外作业.数据採集等 ...

  5. NEFUOJ 500 二分法+最大流量

    http://acm.nefu.edu.cn/JudgeOnline/problemshow.php?problem_id=500 description 在这个信息化的时代.网购成为了最流行的购物方 ...

  6. java编程接口(5) ------ button和button组

    这篇文章是由自己的学习笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 了解了布局管理器和Swing事件模型,那么剩下的就是Swing 的各个组件了 ...

  7. .net mvc ajax list post

    http://stackoverflow.com/questions/13242414/passing-a-list-of-objects-into-an-mvc-controller-method- ...

  8. 详解linux vi命令用法

    vi是所有UNIX系统都会提供的屏幕编辑器,它提供了一个视窗设备,通过它可以编辑文件.当然,对UNIX系统略有所知的人,或多或少都觉得vi超级难用,但vi是最基本的编辑器,所以希望读者能好好把它学起来 ...

  9. VS2010类模板修改——添加版权、说明

    VS2010类模板修改——添加版权.说明 最近在学习使用Memcache,就想着用C#代码写一个实现Cache与Memcache以及将来若是能融入Redis切换使用的程序集...不过刚开始写代码,强迫 ...

  10. 转载：Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图]

    转载:Eclipse+Spket插件+ExtJs4修改版提供代码提示功能[图] ExtJs是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架.功能丰富,无人能出其右.无论是界面 ...