zoukankan      html  css  js  c++  java
  • bootstrap : 响应式导航

    <!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>
  • 相关阅读:
    java链接linux服务器,命令操作
    linux中php项目无法发送邮件:PEAR mail package is not installed
    linux下部署php项目-Apache、php、mysql关联
    MyEclipse黑色主题
    MyEclipse优化-六步攻略
    致产品
    万物归宗
    【产品渗透:移动端平台与纯应用APP产品的相互嵌入】
    【异类--一万小时定律】
    【活法】
  • 原文地址:https://www.cnblogs.com/500m/p/13377092.html
Copyright © 2011-2022 走看看