Example sharing of Bootstrap responsive navigation-JS Tutorial-php.cn

Example sharing of Bootstrap responsive navigation

PHPz

Release： 2018-10-15 16:46:36

Original

1728 people have browsed it

This article mainly introduces the change of Bootstrap responsive navigation from 768px to 992px. Friends who need it can refer to it

Without further ado, I will post the code directly for everyone. The specific code is as follows:

【Related video recommendation: Bootstrap tutorial】

<!--响应式导航部分--> 
<header role="banner"> 
  <nav role="navigation" class="navbar navbar-static-top navbar-default"> 
    <p class="container "> 
      <p class="navbar-header"> 
        <!--设置手风琴式的navbar，然后类navbar-toggle包装在屏幕大于992px，隐藏--> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
          <!--这里的span.icon-bar 是用来在按钮中画三条线--> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="index.html" rel="external nofollow" rel="external nofollow" ><img src="img/logo.png" alt="Bootstrappin&#39;" width="120"></a> 
        <!--这里的商标图一定要设置宽度--> 
      </p> 
      <!--这里的类collapse保证默认包裹的菜单是隐藏的，如果 替换为 in 则显示--> 
      <p class="navbar-collapse collapse" id="navbar-collapse"> 
        <ul class="nav navbar-nav"> 
          <li class="active"><a href="index.html" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-home "></span> Home</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-desktop"></span> Portfolio</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-group "></span> Team</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-envelope "></span> Contact</a></li> 
        </ul> 
      </p><!--/.nav-collapse --> 
    </p><!--/.container --> 
  </nav> 
</header>

Copy after login

This is an example I followed, see the first comment above, button Class navbar-toggle is defined. One of the styles of navbar-toggle is Media Query.

//bootstrap.css 
@media (min-width: 992px) { 
 .navbar-toggle { 
  display: none; 
 } 
}

Copy after login

Then I checked the navbar.less file again. Found

//navbar.less  
.navbar-toggle { 
 position: relative; 
 float: right; 
 margin-right: @navbar-padding-horizontal; 
 padding: 9px 10px; 
 .navbar-vertical-align(34px); 
 background-color: transparent; 
 border: 1px solid transparent; 
 border-radius: @border-radius-base; 
 // Bars 
 .icon-bar { 
  display: block; 
  width: 22px; 
  height: 2px; 
  border-radius: 1px; 
 } 
 .icon-bar + .icon-bar { 
  margin-top: 4px; 
 } 
 @media (min-width: @grid-float-breakpoint) { //@grid-float-breakpoint 
  display: none; 
 } 
} 
//variables.less 
@grid-float-breakpoint:   @screen-sm-min;  //想要改成992px这里就要用这个 @grid-float-breakpoint:   @screen-md-min; 
//-------- 
@screen-sm:         768px; 
@screen-sm-min:       @screen-sm; 
@screen-md:         992px; 
@screen-md-min:       @screen-md; 
@screen-desktop:       @screen-md-min; 
// Large screen / wide desktop 
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 
@screen-lg:         1200px; 
@screen-lg-min:       @screen-lg; 
@screen-lg-desktop:     @screen-lg-min;

Copy after login

So, if you want to modify the default folding breakpoint, change the above media query variable @grid-float-breakpoint: @screen-sm-min;

Modify to other breakpoints defined by Bootstrap. Of course, you can also customize a breakpoint variable. Then recompile it into a css file.

Note: It is best to copy variables.less to _variables.lss. navbar.less makes a copy of _navbar.less. Then make modifications on the copied file. Finally, copy bootstrap.less, modify the import

//bootstrap.less 
//@import "navbar.less";  
@import "_navbar.less"; 
//@import "variables.less"; 
@import "_variables.less";

Copy after login

, and compile the customized bootstrap.less.

The above is the detailed content of Example sharing of Bootstrap responsive navigation. For more information, please follow other related articles on the PHP Chinese website!