Bootstrap组件的响应式导航条

响应式导航条:在PC和平板中默认要显得所有的情节;但于手机被导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才亮有的小菜单项。

  基础class: .navbar   

 1、Bootstrap中导航条的依岗位:

  1)顶部导航条

  2)底部导航条

    Bootstrap中导航条的比如颜色:

    1)浅色底深色的许 .navbar-default

    2)深色的浅色的字 .navbar-inverse

    Bootstrap中导航条的本一定:

    1)相对固化position: relative 默认值

    2)固定定位position: fixed      .navbar-fixed-top/bottom

 2、导航条的结构:

  <div class=”navbar  颜色 定位”>  

  <div class=”container”>

    <!–导航条的脑壳:商标+按钮–>

    <div class=”navbar-header”>

      <a class=”navbar-brand”>

      <button class=”navbar-toggle”>

    </div>

    <!–导航条折叠菜单:菜单、按钮、搜索框、链接、文本…–>

    <div class=”navbar-collapse”>

      <ul class=”nav navbar-nav”>

      <form class=”navbar-form”>

      <button class=”navbar-btn”>

      <span class=”navbar-text”>

      <a class=”navbar-link  navbar-text”>

    </div>

  </div>

 </div>

相关文章