Bootstrap迁移系列 - Navbar

最新推荐文章于 2023-12-08 18:05:00 发布

原创最新推荐文章于 2023-12-08 18:05:00 发布 · 置顶 · 7.6k 阅读

0 ·

CC 4.0 BY-SA版权

Other 专栏收录该内容

18 篇文章

订阅专栏

在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-group`s 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>