首页 > 编程语言 > 详细

Bootstrap——导航条(navbar)

时间:2019-10-02 23:18:57      阅读:122      评论:0      收藏:0      [点我收藏+]

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

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

     

Bootstrap——导航条(navbar)

原文:https://www.cnblogs.com/LinWenQuan/p/11618696.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!