在本文中，您将学习如何使用 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. python2.7和 python3.4但是不要

    很多 Python 刚開始学习的人想知道他们应该从 Python 的哪个版本号開始学习.对于这个问题我的答案是 "你学习你喜欢的教程的版本号.然后检查他们之间的不同. " 可是假设 ...

  2. 设计模式--模板方法 And State模式

    1.模板方法   钩子: 在抽象基类已经有默认的定义,子类选择是否覆盖它 在模板方法模式中,  抽象基类中使用 钩子函数(子类视情况是否覆盖)  来达到控制模板方法中  流程控制的 目的 设计原则: ...

  3. Oracle 数据导出到PowerDesigner

    原文:Oracle 数据导出到PowerDesigner [一]配置ODBC win7 :控制面板(查看方式:小图标)→管理工具→数据源(ODBC) 在[ODBC数据源管理器]面板下,在默认[用户DN ...

  4. QtQuick桌面应用程序开发指导 3)达到UI而功能_B 4)动态管理Note物_A

    3.2 把Page Item和Marker Item绑定 之前我们实现了PagePanel组件, 使用了三个state来切换Page组件的opacity属性; 这一步我们会使用Marker和Marke ...

  5. oracle rac常用的命令

    oracle rac常用的命令 节点层:olsnodes 网络层: oifcfg 集群层:crsctl,ocrcheck,ocrdump,ocrconfig 应用层:srvctl,onsctl,crs ...

  6. User、Role、Permission数据库设计ABP

    ABP 初探 之User.Role.Permission数据库设计 (EntityFramework 继承的另一种使用方法) 最近群里(134710707)的朋友都在讨论ABP源码,我把最近学习的内容 ...

  7. LCS 小结

    转载链接:http://www.cnblogs.com/PJQOOO/p/3897745.html 第一步:先计算最长公共子序列的长度. 实现第一步: 设一个C[i][j]: 保存Xi与Yj的LCS的 ...

  8. Xcode下执行HelloWorld

    准备工作 到Cocos2d-x官方站点下载最新版本号v3.0beta2 创建HelloWorld项目 将刚才下载的压缩包解压到你指定的目录里. 进入到文件夹**cocos2d-x-3.0beta2/t ...

  9. 企业办公即时通信软件TeamTalk

    TeamTalk 一键部署方案:TTAutoDeploy   TeamTalk 整套服务提供模块部署脚本和一键部署方案,主要模块有JDK,NGINX,PHP,PERCONA(MYSQL), REDIS ...

  10. Aspose.Words：如何添加另一个WORD文档中的Node对象

    原文:Aspose.Words:如何添加另一个WORD文档中的Node对象 首先看一段代码,这段代码意图从docSource中获取第一个表格,并插入docTarget的末尾: , true); doc ...