Tip:需要引入js文件 ```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.將[需要折疊的內容,](/0)包裹在一個div內,并為div加入collapse,navbar-collapse兩個類名 2.保證在[窄屏](/0)的時候要顯示的圖片\(固定寫法\) ```html <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來決定。 ```html <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 ```