最近学习了响应式的导航，然后模仿了官网
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--提高ie浏览器的性能和渲染速度--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--让移动端适用该页面--> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <style> .masthed{ padding: 90px 0 110px; } .container{ text-align: center; } .media-button-links{ margin-top: 30px; } .jumbotron{ background: url(http://static.bootcss.com/www/assets/img/bs-docs-masthead-pattern.png); } </style> </head> <body> <div class="navbar navbar-inverse navbar-static-top navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle='collapse' data-target='#col'> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="" class="navbar-brand">Bootstrap中文网</a> </div> <div class="collapse navbar-collapse" id="col"> <ul class="nav navbar-nav navbar-right"> <li><a href="">关于</a></li> </ul> <ul class="nav navbar-nav"> <li><a href="">Bootstrap 3.0</a></li> <li><a href="">Bootstrap 4.0预览</a></li> <li><a href="">less教程</a></li> <li><a href="">JQUERY</a></li> <li><a href="">网站实例</a></li> </ul> </div> </div> </div> <div class="jumbotron masthed"> <div class="container"> <h1>Bootstrap</h1> <h2>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2> <p class='media-button-links'><a href="#" class="btn btn-primary btn-lg">Bootstrap3中文文档(v3.3.7)</a></p> </div> </div> </body> </html>简单写了导航条，按照框架的要求一步步拽写 了解到一些图标转换为字体再应用在页面处 导航条的关键字有navbar
