在本文中，您将学习如何使用 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. SqlServer发送邮件，定时作业

    今天偶然研究了一下sqlserver发送邮件的功能,之前听说过可以发,但是一直没尝试过,只是用C#写后台程序的方式来发邮件. 现在又多了一种发送邮件的途径. 大致的步骤如下: 1.配置sqlserve ...

  2. keyboard splitting bug on ipad with ios 5 and 6 (Cocos2d-x)

    Had the same issue - the solution is to stop the opengl layer from rendering while this is happening ...

  3. robot framework-databaselibaray库使用(python)（转）

    公司做项目用到了databaselibaray,刚开始使用时碰到了很多问题,网上也查阅了很多资料终于是可以用了,现在整理记录下来,有需要的同学可随意使用: 另,本文主要是databaselibaray ...

  4. 用java字节码解释i++和++i(转)

    这几天抽着一些时间,把Java的class文件结构研究了一下,再后来就想起了这个令人厌烦的问题,想从字节码指令的角度看看,java到底是怎么处理这个的 先看一段java代码 package bishi ...

  5. android在单身的对象和一些数据的问题被释放

    正式接触android我们一直在开发了一段时间,该项目的第一个版本最终会很快结束. 当有它自己的测试.拥有android后台.同一时候打开了几个应用之后又一次切回到自己的app.发现报错了.经过排查, ...

  6. oracle_powerdesinger逆向工程 ， PDM 文件 注释到name的完美解决方案 comment2name

    1. 从oracle 到 PDM文件  逆向工程中 ,需要注意 去掉“” ,这个百度下很多帖子,用于去掉引号 2. 从注释copy到name运行脚本会有个问题就是 ,有些注释太长,不美观 解决方案, ...

  7. 多维算法思考（三）：AB组合问题

    多维算法思考(三):AB组合问题 题目:x个A,y个B可以组合成多少个不同排列的问题. 首先,我们用数学的方式思考,这个问题属于<组合数学>的问题,我们的第一种方法可以用组合思路来求解. ...

  8. linux_apt-get 使用详解

    安装应用从互联网上下载查询时 用到,今天安装个 mysql 简化流程如下: apt-cache search mysql-server sudo apt-get install mysql-serve ...

  9. HTML解析利器-HtmlAgility学习

    原文:HTML解析利器-HtmlAgility学习 HtmlAgility是一个开源的Html解析库,据说是C#版的JQuery,功能非常强大. 该篇学习它的解析功能,还可以模拟用户请求,创建html ...

  10. 记录近期小改Apriori至MapReduce上的心得

    ·背景 前一阵,一直在研究一些ML的东东,后来工作关系暂停了一阵.现在继续把剩下一些热门的算法再吃吃透,"无聊+逗比"地把他们搞到MapReduce上.这次选择的入手对象为Apri ...