bootstrap响应式导航栏

2019独角兽企业重金招聘Python工程师标准>>>

参见：http://www.w3cschool.cc/bootstrap/bootstrap-navbar.html

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的

中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为.nav-collapse 

中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

   
   
   
   




   
      
         切换导航
         
         
         
      
      W3Cschool
   

                    iOS          

SVN

                                      Java                                           

jmeter

               

EJB

               

Jasper Report

                               

分离的链接

                               

另一个分离的链接

                                 

重点分析其与默认导航栏的不同之处：

1、在

中添加了一个按钮：

         切换导航
         
         
         
      

如上所述，data-toggle用于告诉 JavaScript 需要对按钮做什么， data-target指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。

.navbar-toggle {

  position: relative;

  float: right;

  padding: 9px 10px;

  margin-top: 8px;

  margin-right: 15px;

  margin-bottom: 8px;

  background-color: transparent;

  background-image: none;

  border: 1px solid transparent;

  border-radius: 4px;

}

.navbar-toggle:focus {

  outline: 0;

}

.navbar-toggle .icon-bar {

  display: block;

  width: 22px;

  height: 2px;

  border-radius: 1px;

}

.navbar-toggle .icon-bar + .icon-bar {

  margin-top: 4px;

}

@media (min-width: 768px) {

  .navbar-toggle {

    display: none;

  }

}

.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}

.sr-only-focusable:active,

.sr-only-focusable:focus {

  position: static;

  width: auto;

  height: auto;

  margin: 0;

  overflow: visible;

  clip: auto;

}

.navbar-toggle .icon-bar {

  display: block;

  width: 22px;

  height: 2px;

  border-radius: 1px;

}

.navbar-toggle .icon-bar + .icon-bar {

  margin-top: 4px;

}

.navbar-default .navbar-toggle .icon-bar {

  background-color: #888;

}

.navbar-inverse .navbar-toggle .icon-bar {

  background-color: #fff;

}

2、项目列表被包裹在了一个另外增加的

中

.collapse {

  display: none;

}

.navbar-collapse {

  padding-right: 15px;

  padding-left: 15px;

  overflow-x: visible;

  -webkit-overflow-scrolling: touch;

  border-top: 1px solid transparent;

  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);

          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);

}

@media (min-width: 768px) {

  .navbar-collapse {

    width: auto;

    border-top: 0;

    -webkit-box-shadow: none;

            box-shadow: none;

  }

  .navbar-collapse.collapse {

    display: block !important;

    height: auto !important;

    padding-bottom: 0;

    overflow: visible !important;

  }

@media (max-width: 480px) and (orientation: landscape) {

  .navbar-fixed-top .navbar-collapse,

  .navbar-fixed-bottom .navbar-collapse {

    max-height: 200px;

  }

}

转载于:https://my.oschina.net/u/2255071/blog/372620