zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    HDU
    HDU
    西电OJ
    西电OJ
    西电OJ
    USACO 2.1-Healthy Holsteins
    USACO 2.1-Sorting a Three-Valued Sequence
    HDU
    UVA
    codeforces 811A Vladik and Courtesy
  • 原文地址:https://www.cnblogs.com/-walker/p/5022568.html
Copyright © 2011-2022 走看看