当前位置 : 主页 > 网页制作 > Bootstarp >

Bootstrap——导航条(navbar)

来源:互联网 收集:自由互联 发布时间:2021-06-12
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多。 导航条(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">
网友评论