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

bootstrap : 响应式导航的更多相关文章

  1. bootstrap 响应式导航条模板（含下拉菜单，弹出框）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bootstrap响应式导航

    <nav class="navbar navbar-default" role="navigation"> <div class=" ...

  3. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  4. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  5. bootstrap固定响应式导航

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...

  6. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  7. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  8. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  9. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  10. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

随机推荐

  1. HP LoadRunner 11.00安装+破解+汉化

    里面包含多个破解码,最高支持6.5w个并发: https://blog.csdn.net/xianjie0318/article/details/78625980

  2. 解密Prompt系列22. LLM Agent之RAG的反思：放弃了压缩还是智能么？

    已经唠了三章的RAG,是时候回头反思一下,当前的RAG是解决幻觉的终点么?我给不出直接的答案,不过感觉当前把RAG当作传统搜索框架在大模型时代下的改良,这个思路的天花板高度有限~ 反思来源于对RAG下 ...

  3. 为什么Java中“1000==1000”为false，而”100==100“为true？

    在日常编程中,我们经常遇到一些看似简单却隐藏着复杂逻辑的问题. 比如,你是否想过为什么在 Java 中表达式1000==1000会返回 false,而 100==100 却返回 true 呢? Int ...

  4. 5分钟就能实现的API监控，有什么理由不做呢？基调听云

    API深度影响着你的应用 今天的数字应用世界其实是一个以API为中心的世界,我们只是没有意识到这些API的重要性.比如在电子商务交易.社交媒体等对交互高度依赖的领域,可以说API决定了应用的质量一点也 ...

  5. MoE：LLM终身学习的可能性

    本文分享自华为云社区<DTSE Tech Talk | 第47期:MoE:LLM终身学习的可能性>,作者:华为云社区精选. 在DTSE Tech Talk的第47期直播<MoE:LL ...

  6. 带你掌握数仓的作业级监控TopSQL

    摘要:目前TopSQL功能被用户广泛使用,是性能定位.劣化分析.审计回溯等重要的基石,为用户提供覆盖内存.耗时.IO.网络.空间等多方面的监控能力. 本文分享自华为云社区<GaussDB(DWS ...

  7. 什么是全场景AI计算框架MindSpore？

    摘要:MindSpore是华为公司推出的新一代深度学习框架,是源于全产业的最佳实践,最佳匹配昇腾处理器算力,支持终端.边缘.云全场景灵活部署,开创全新的AI编程范式,降低AI开发门槛. MindSpo ...

  8. APP违法使用个人信息？不用怕，华为云VSS为你保驾护航

    摘要:华为云VSS漏洞扫描服务移动应用安全检测,为华为云客户提供移动应用的合规检测能力,遵循工信部164号文要求,针对安卓(apk)和鸿蒙(hap)应用进行安全和隐私合规问题检测. 本文分享自华为云社 ...

  9. Scrum Master需要具备哪些能力和经验

    摘要:ScrumMaster对于产品负责人和开发团队来说,履行的是教练的职责,帮助团队和组织其他成员发展具有组织特色的.高效的Scrum方法,贯彻执行敏捷思想,激励团队持续提升,并不懈追求卓越的表现. ...

  10. 字节跳动基于ClickHouse优化实践之Upsert

    更多技术交流.求职机会.试用福利,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 相信大家都对大名鼎鼎的ClickHouse有一定的了解,它强大的数据分析性能让人印象深刻.但在字节大量生 ...