在V2.3.2版本中一个标准的导航栏模版如下：

<div class="navbar">

  <div class="navbar-inner">

    <a class="brand" href="#">Title</a>

    <ul class="nav">

      <li class="active"><a href="#">首页</a></li>

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

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

    </ul>

  </div>

</div>

在V3.0等同功能

（1） navbar

被移出

其等同功能为：<nav class="navbar"></nav>
    （2） navbar-innver

被移出

被移除的class

以下列出的页面元素已经在v3.0版本中被去除或修改。

页面元素 从2.x版本中去除 3.0版本中对应的元素
Form actions .form-actions N/A
Search form .form-search N/A
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right.tabs-below N/A
Nav lists .nav-list .nav-header No direct equivalent, but List groups and .panel-groups are similar.

其等同功能为：.collapse .navbar-collapse

（3） brand

.brand已经更名为.navbar-brand

（4） nav

.nav已经更名为.navbar-nav

2.x实现的导航菜单

代码：

<!DOCTYPE html>

<html>

  <head>

    <title>控制面板</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  </head> 

<body>

	<div class="navbar navbar-static-top navbar-inverse">

	  	<div class="navbar-inner">

		    <a class="brand" href="#">首页</a>

		    <ul class="nav">

		      <li class="active"><a href="#">控制面板</a></li>

		      <li><a href="#">用户管理</a></li>

		      <li><a href="#">链接</a></li>

		    </ul>

	  	</div>

	</div>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

3.x实现的导航菜单

代码：

<!DOCTYPE html>

<html>

  <head>

    <title>控制面板</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

  </head> 

<body>

	<nav class="navbar navbar-default navbar-inverse" role="navigation">

		<div class="collapse navbar-collapse">

			<a class="navbar-brand" href="#">首页</a>

			<ul class="nav navbar-nav">

				<li class="active"><a href="#">控制面板</a></li>

				<li><a href="#">用户管理</a></li>

				<li><a href="#">链接</a></li>

			</ul>

		</div>

	</nav>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>

Bootstrap迁移系列 - Navbar的更多相关文章

  1. Bootstrap迁移系列 - Modal

    原来项目是使用2.x完成的,现在需要使用3.x进行升级. 对jQuery的依赖 请注意,所有JavaScript插件都依赖jQuery,在页面中的引入顺序可以参考基本模版. bower.json中列出 ...

  2. Bootstrap 组件之 Navbar

    一.简介 Navbar 指导航条,它在移动设备上显示为折叠状态,在宽屏幕上水平展开.这里 是一个线上例子. 响应式导航条依赖 collapse 插件,定制 Bootstrap 时务必要包含. {设备的 ...

  3. Bootstrap导航栏navbar源码分析

    1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...

  4. Bootstrap插件系列——Bootstrap-table初始化、分页、客户端搜索、服务端搜索

    又好久不写博客,最近项目都是用的bootstrap的样式,不出意外,应该是要在bootstrap的道路上越走越远了,所以下定决心,把bootstrap的插件都好好学学. 昨天写了boostrap-ta ...

  5. Bootstrap组件系列之福利篇几款好用的组件(推荐)

    引用 :http://www.jb51.net/article/87189.htm 一.时间组件 bootstrap风格的时间组件非常多,你可以在github上面随便搜索“datepicker”关键字 ...

  6. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  8. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  9. [转]JS组件系列——表格组件神器：bootstrap table

    原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...

随机推荐

  1. 在Windows下通过命令行或者.bat文件统计一个目录中文件数量

    在Windows下面怎样通过命令行统计一个目录中文件的数量,或者说,如果在一个.bat文件中,统计一个目录中的文件数量? 我原来以为是不可能的,要编一个vbs程序什么的,后来到网上找了下,发现还真是可 ...

  2. SQL全文搜索

    ( select dd.*,t.RANK from crm_CustomerAnalyzeDetails dd ) as t on dd.ID = t.[key] ) union all ( sele ...

  3. bzoj2482

    还是像以前那样维护下次出现位置,计算影响 其实不难,思维盲点,受到做最大子段和的影响 其实这里可以直接维护当前每个位置的子段和,再记录一个历史最大和 当然tag也需要记录当前tag和历史(距离上次pu ...

  4. ubuntun安装ssh,并远程链接服务器操作

    SSH是一种以安全.加密方式连接远程主机或服务器的方法.SSH服务器接受从有SSH的客户机的连接,允许操作者象在本地一样地登录系统.你可以用SSH从远程运行shell和X程序. (1)安装SSH服务器 ...

  5. 【转】使用autolayout常见错误

    原文网址:http://www.cnblogs.com/xiaokanfengyu/p/4175091.html 使用autolayout常见错误 1:The view hierarchy is no ...

  6. MySQL auto_increment的坑

    背景: Innodb引擎使用B_tree结构保存表数据,这样就需要一个唯一键表示每一行记录(比如二级索引记录引用). Innodb表定义中处理主键的逻辑是: 1.如果表定义了主键,就使用主键唯一定位一 ...

  7. JS触发ASP.NET服务器端控件的方法

    <asp:Button ID="Button_regId" runat="server" Font-Bold="False" OnCl ...

  8. hdu 3068(最长回文)

    题意:容易理解... 思路:可以用扩展kmp来做,但是我还没怎么弄懂,时间复杂度O(n*logn),而manacher算法,第一次听说,代码比较短,不难理解,和扩展kmp有点类似,时间复杂度为:O(n ...

  9. Storm实战常见问题及解决方案

    该文档为实实在在的原创文档,转载请注明: http://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html 类型 详细 备注 该文档是群里几个朋友在storm实 ...

  10. 转载：fstream和ifstream详细用法

    文件 I/O 在C++中比烤蛋糕简单多了.在这篇文章里,我会详细解释ASCII和二进制文件的输入输出的每个细节,值得注意的是,所有这些都是用C++完成的. 一.ASCII 输出 为了使用下面的方法, ...