7.5.11 设置导航条的位置
在Web页面中,需要将导航条固定在浏览器的顶部或底部,在移动App中更是如此。Bootstrap提供了以下3种方式来设置导航条的位置。
| 方法 |
描述 |
.navbar-fixed-top |
将导航条固定在顶部。即使页面内容发生滚动,导航条也始终固定在顶部。 |
.navbar-fixed-bottom |
将导航条固定在页面底部,即使页面内容发生滚动,导航条也始终固定在页面底部。 |
.navbar-static-top |
使导航条静止于页面的顶部,当向下滚动页面时,导航条将会被隐藏。 |
如何避免导航条挡住页面内容
当为导航条设置了.navbar-fixed-top 或.navbar-fixed-bottom 这两种样式时,导航条其实是”浮”在页面内容之上的,因此该导航条可能会遮住页面内容,故而当为导航条设置了.navbar-fixed-top样式时,可能需要为页面body设置padding-top:70px;,让页面内容下移70px;当为导航条设置了.navbar-fixed-bttom样式时,可能需要为页面body设置padding-bottom:70px;,让页面内容上移70px,这样可以避免导航条挡住页面内容。
程序示例
下面的代码示范了设置页面导航条位置的方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 设置导航条的位置 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<nav id="nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" style="padding-top:0" href="#">
<img alt="疯狂软件" src="../fklogo.gif" style="width:52px;height:52px">
</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<label for="keyword" class="sr-only">关键字</label>
<input type="text" id="keyword" class="form-control" placeholder="输入关键字">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<p class="navbar-text navbar-right" style="padding-right:10px">
以游客身份<a href="#" class="navbar-link">访问</a></p>
<ul class="nav navbar-nav">
<li role="presentation"><a href="#">主页</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="true">
改变导航条位置 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:narbarPosition.setFixedTop();">固定在顶部</a></li>
<li><a href="javascript:narbarPosition.setFixedBottom();">固定在底部</a></li>
<li><a href="javascript:narbarPosition.setStaticTop();">静止在顶部</a></li>
</ul>
</li>
<li role="presentation" class="active"><a href="#">师资介绍</a></li>
<li role="presentation"><a href="#">教育理念</a></li>
<li role="presentation" class="disabled"><a href="#">退出系统</a></li>
</ul>
</div>
</nav>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<script type="text/javascript" src="../jquery-3.1.1.js">
</script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js">
</script>
<script type="text/javascript">
var narbarPosition = {
setFixedTop: function () {
$('#nav').removeClass('navbar-fixed-bottom');
$('#nav').removeClass('navbar-static-top');
$('#nav').addClass('navbar-fixed-top');
},
setFixedBottom: function () {
$('#nav').removeClass('navbar-fixed-top');
$('#nav').removeClass('navbar-static-top');
$('#nav').addClass('navbar-fixed-bottom');
},
setStaticTop: function () {
$('#nav').removeClass('navbar-fixed-top');
$('#nav').removeClass('navbar-fixed-bottom');
$('#nav').addClass('navbar-static-top');
}
}
</script>
</body>
</html>
|
在该代码中定义了一个下拉菜单,并通过下拉菜单的3个菜单项来动态设置导航条的位置。第二段粗体字代码使用jQuery的addClass()、removeClass()两个方法动态添加、删除CSS样式。从第二段粗体字代码可以看出,将导航条固定在页面顶部的样式是.navbar-fixed-top,将导航条固定在页面底部的样式是.navbar-fixed-bottom,将导航条静止在页面顶部的样式是.navbar-static-top。