在本文中，您将学习如何使用 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. wordpress常见的问题

    nginx如webserver,wordpress上传主题错误 413 Request Entity Too Large 解决: vim /usr/local/nginx/conf/nginx.con ...

  2. ANDROID定义自己的看法——onMeasure，MeasureSpec源代码 过程 思考具体解释

    一个简短的引论: 在他们的定义view什么时候,其实很easy,只需要知道3: 1.測量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGrou ...

  3. hdu Oulipo(kmp)

    Problem Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, w ...

  4. background-position 具体的使用说明

    语法: background-position : length || length background-position : position || position 值: length  : ...

  5. javascript系列之核心知识点(二)

    变量对象       变量对象是一个与执行上下文相关联的容器.它是一个和上下文密切结合的特殊对象,含有定义在上下文中的变量和函数声明.注意,函数表达式(和函数声明不同的)不包含在变量对象中. 变量对象 ...

  6. Html5 の 微信飞机大战

    (function () { var imageUrl = "images/"; //获取画布对象 var c = $("#game-box").get(0); ...

  7. struts2基本介绍

    前言 文本 Struts2 Apache SoftWare Foundation Tomcat/Struts1/Struts2/Ibaitas/ MVC框架:Struts1/Struts2/JSF/W ...

  8. Qt 如何处理拖放应用程序参数时，中国

    你用 Qt 我们开发的应用程序.用户拖放文件到您的 exe 在.启动应用程序,在这个时候, main() 功能参数可以接收中国.如何正确处理它?非常easy,码如下面: QTextCodec *cod ...

  9. 利用EntityFramework获得双色球数据库

    原文 利用EntityFramework获得双色球数据库 双色球想必大家都很熟悉了,尽管屡买屡不中,但还是会买.以前就想过利用双色球的走势图得到双色球的数据库,至于得到数据库干什么倒没想过,不过对以往 ...

  10. 观察者模式的程序实例C++

    一.什么是观察者模式 Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种.Observer模式是行为模式之中的一个,它的作用是当一个对象的状态发生变化时,可以自己主动通知其它 ...