导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多。 导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航)、表单以及表单和导航一起结合
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多。
导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航)、表单以及表单和导航一起结合等多种形式。
在制作一个基础导航条时,主要分以下几步:
- 首先在制作导航的列表(<ul class=‘nav‘>)上添加类名 navbar-nav;
- 在列表外部添加一个容器(nav),并且使用类名 navbar 和 navbar-default。
-
<nav class="navbar navbar-default"> <ul class="nav navbar-nav"> <li><a href="#">首页</a></li> ... </ul> </nav>
如果我们希望将导航条固定在浏览器顶部或底部,Bootstrap 框架提供了两种固定导航条的方式:
- 将导航固定在顶部,下面的内容会自动上移
<nav class="navbar navbar-default navbar-fixed-top">
- 将导航补丁在底部
<nav class="navbar navbar-default navbar-fixed-bottom">