廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!--響應式導航部分--> <header role="banner"> <nav role="navigation" class="navbar navbar-static-top navbar-default"> <div class="container "> <div 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'" width="120"></a> <!--這里的商標圖一定要設置寬度--> </div> <!--這里的類collapse保證默認包裹的菜單是隱藏的，如果 替換為 in 則顯示--> <div 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> </div><!--/.nav-collapse --> </div><!--/.container --> </nav> </header>
這是我跟著做的一個實例，看上面第一個注釋，button定義了類navbar-toggle。navbar-toggle其中的一個樣式是媒體查詢。
//bootstrap.css @media (min-width: 992px) { .navbar-toggle { display: none; } } 然后我又查看了下navbar.less文件。發現
//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; 所以，如果你想修改默認的折疊斷點，就將上面的媒體查詢變量 @grid-float-breakpoint: @screen-sm-min;
修改為其他Bootstrap定義的斷點，當然也可以自定義一個斷點變量。然后重新編譯為css文件即可。
注：最好把 variables.less 復制一份為 _variables.lss。navbar.less 復制一份 _navbar.less。然后在復制的文件上修改。最后將 bootstrap.less 復制一份 __bootstrap 將其中的導入
//__bootstrap.less //@import "navbar.less"; @import "_navbar.less"; //@import "variables.less"; @import "_variables.less";
修改完，編譯自定義的 __bootstrap.less 即可。
以上所述是小編給大家介紹的Bootstrap響應式導航由768px變成992px的實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
