Bootstrap——导航条（navbar）

Posted 2022-12-15 linwenquan

导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。 

导航条(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">