<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>响应式导航</title> <link rel="stylesheet" href="./css/bootstrap.min.css" /> <style> * { margin: 0; padding: 0; } .nav-title { font-family: "Abril Fatface", cursive; } .navbar-header .nav-title:hover, .navbar-header .nav-title:focus { background: #fff; color: #000; } .cative { font-family: "Comfortaa", cursive; } .navbar-collapse .navbar-nav li a:hover, .navbar-collapse .navbar-nav li a:focus { color: #000; background: #fff; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu" > <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand nav-title">YinyouPoet</a> </div> <div class="collapse navbar-collapse" id="navbar-menu"> <ul class="nav navbar-nav navbar-right"> <li class="cative"><a href="#">Home</a></li> <li class="cative"><a href="#">About</a></li> <li class="cative"><a href="#">Portfolio</a></li> <li class="cative"><a href="#">Contact</a></li> </ul> </div> </div> </nav> <script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>