<!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. 『UniApp』uni-app-打包成App

    前言 大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP. ...

  2. Centos7安装高版本BIND9.16.41（DNS服务器）

    安装高版本BIND9.16.41或9.18.15 双数版本为稳定版如9.16.9.18 使用手册:https://bind9.readthedocs.io/en/v9_16_19/reference. ...

  3. 直击云栖|践行数据化运维，云掣重新解读MSP

    2020年云栖大会百城汇·杭州站,云掣MSP专场圆满落幕! 本次云栖大会·云掣MSP专场以"数据智能,智能运维"为主题,主要聚焦企业云化转型演进趋势,云上运维全景监控以及云原生云环 ...

  4. 【WALT】调度与负载计算（未更新完）

    [WALT]调度与负载计算 代码版本:Linux4.9 android-msm-crosshatch-4.9-android12 注:本文中的任务主要指进程. @ 目录 [WALT]调度与负载计算 一 ...

  5. 一行代码解决Three.js中只能在一侧看到物体的问题

    项目场景:   因为该项目比较复杂庞大,在此就简单介绍一下:   通过Three.js创建若干个物体进行了组装,从而形成了一个类似眼球模拟模型的项目,用户可以通过拖动鼠标来达到控制视角(摄像机)的目的 ...

  6. 数据库“意外失联”？华为云DRS异地多活灾备为您支招

    [摘要] 为了更好地提供灾备保护,华为云数据库在"同城两中心"的基础上提出了异地保护的方案,华为云数据复制服务DRS推出了异地多活灾备,即"两地四中心". 在D ...

  7. 三大基础方案和AI出海计划重磅发布！加速盘古大模型生态发展

    本文分享自华为云社区<三大基础方案和AI出海计划重磅发布!加速盘古大模型生态发展>,作者: 华为云头条. 近日,以"开放同飞,共赢行业AI新时代"为主题的华为云盘古大模 ...

  8. 云图说｜将源端MongoDB业务搬迁至华为云DDS的几种方式

    摘要:华为云文档数据库服务DDS能帮您在业务需要时,快速便捷的搬迁源端MongoDB业务上云. 如果您因业务调整或需要使用华为云文档数据库DDS特性功能时,可以通过数据迁移功能将原有MongoDB数据 ...

  9. 资深Linux 系统管理员常用的15个很好用的Cron工作示例

    摘要:Linux Cron 实用程序是一种在特定时间和/或日期持续调度例行后台作业的有效方法.这篇文章讲述了15 个很好用的 crontab 工作调度示例. 本文分享自华为云社区<Linux C ...

  10. 火山引擎DataLeap：更强数据目录搜索能力，做到一步找数

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着数据管理变得更加复杂,元数据的重要性呈指数级增加.   如今,Data Catalog(数据目录)被看成是元数 ...