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 ~~~