<!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. NetCore高级系列文章04---async、await原理揭秘

    async.await本质上是C#提供的语法糖,编译器编译后是状态机的调用. 先看如下的一段代码,要main方法中调用了三个await方法 将此dll进行反编译为4.0的代码如下: 可见到两个Main ...

  2. 文心一言 VS 讯飞星火 VS chatgpt （168）-- 算法导论13.2 1题

    一.用go语言,写出 RIGHT-ROTATE 的伪代码. 文心一言: 在计算机科学中,右旋转(RIGHT-ROTATE)是一种常见的操作,通常用于数组或链表.以下是一个使用Go语言实现右旋转的伪代码 ...

  3. 实战案例丨代码优化：如何去除context中的warning？

    在一个java语言群里面,有人抛了这么一段代码出来,问题是出现了下下图中的warning,问有什么好的方法消除 这种强转都是因为类型链条断掉了,写入的时候擦除了类型,读出来的时候也就只能强转了,那个i ...

  4. 古有诸葛亮八卦阵阻敌，今有 iptables 护网安

    摘要:保障网络环境的安全,我们得"武装"起来,守住各个入口.怎么"武装"呢? 网络世界就和现实世界一样,总是会有些不怀好意的"人"出现,扫扫 ...

  5. 聊聊Java的异常机制问题

    摘要:java异常指在程序运行时可能出现的一些错误,如:文件找不到.网络连接失败.非法参数等.异常是一个事件,它发生在程序运行期间,中断了正在执行的程序的正常指令流. 本文分享自华为云社区<Ja ...

  6. 手把手教你写一个spring IOC容器

    摘要:spring框架的基础核心和起点毫无疑问就是IOC,IOC作为spring容器提供的核心技术,成功完成了依赖的反转:从主类的对依赖的主动管理反转为了spring容器对依赖的全局控制.今天就带大家 ...

  7. 华为中国生态大会2021举行在即，GaussDB将重磅发布5大解决方案

    摘要:企业数字化转型如火如荼,云成为数字化与新基建的关键要素,数据成为智能时代新的生产资料和企业数字化的生命,而数据库则是支撑数据生命线的底座. 本文分享自华为云社区<华为中国生态大会2021举 ...

  8. WebKit三件套(1)：WebKit之WebCore篇

    导语: Chrome浏览器的代码量其实是非常庞大的,要想对其有深入的理解,仅仅编译编译调试调试,是很难深入下去的.让我们还是从其主要部分如多进程管理通信.WebKit.V8.Skia.WinHttp. ...

  9. 浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战

    作为前端老鸟,从IE的6.7.8开始做前端,各种兼容性折磨死人.js还好有了jQuery.chrome出来后,真是救苦救难,解救程序员的于水火.但是可恶的boss还是要求兼容ie6,7.感谢淘宝团队的 ...

  10. DevSecOps: CI/CD 流水线安全的最佳实践

    上一篇文章我们了解了 IAST 及其优势.工具类型以及重要性. 本期文章将为你介绍 CI/CD 流水线安全的最佳实践. ✦ ✦ CI/CD 流水线是指由持续集成(Continuous Integrat ...