Tip:需要引入js文件 ~~~ <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> ~~~ 1.將需要折疊的內容,包裹在一個div內,并為div加入collapse,navbar-collapse兩個類名 2.保證在窄屏的時候要顯示的圖片(固定寫法) ~~~ <button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> ~~~ 3.button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的div來決定。 ~~~ <div class="navbar navbar-default"> <div class="navbar-header"> <!-- navbar-brand --> <a href="#" class="navbar-brand">極客營</a> <!-- navbar-toggle --> <button class="navbar-toggle" data-target="#collapse" data-toggle="collapse"> <span class="sr-only">Toggle Navbar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- collapse --> <div class="collapse navbar-collapse" id="collapse"> <ul class="nav navbar-nav"> <li><a href="#">JAVA</a></li> <li><a href="#">PHP</a></li> <li><a href="#">HTML5</a></li> </ul> </div> </div> ~~~ ~~~ .navbar .navbar-default .navbar-header .navbar-brand .navbar-toggle data-toggle="collapse" data-target="" .collpase .navbar-collapse .nav .navbar-nav ~~~