码迷,mamicode.com
首页 > 编程语言 > 详细

Bootstrap——导航条(navbar)

时间:2019-10-03 00:54:34      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:pre   color   首页   bootstra   两种   基础   class   浏览器   str   

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

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

标签:pre   color   首页   bootstra   两种   基础   class   浏览器   str   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!