<!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. 技本功|Hive优化之监控（三）

    Hive是大数据领域常用的组件之一,主要是大数据离线数仓的运算,关于Hive的性能调优在日常工作和面试中是经常涉及的一个点,因此掌握一些Hive调优是必不可少的技能.影响Hive效率的主要有数据倾斜. ...

  2. [Acwing 164. 可达性统计] 题解报告

    事实上,这道题并不需要拓扑排序.(当然,拓扑排序还是更快) 题目分析 首先,题目中说了,这是一个有向无环图,所以,我们可以考虑 \(\texttt{DP}\) / 记搜 / 拓扑排序 来解决这道题. ...

  3. CSS 基础 4 - CSS 常用单位

    CSS 基础 4 - CSS 常用单位 px:基础单位 em:相对当前父容器的系数,可以累乘 rem:相对根 <html> 的系数,方便计算 vw/vh:viewport width/he ...

  4. flutter中InheritedWidget共享数据

    InheritedWidget是Flutter框架中用于在Widget树中共享数据的机制.它是一个特殊的Widget,可以将其放置在Widget树的上层,并向下传递共享的数据给其子Widget.子Wi ...

  5. C++篇：第十四章_编程_知识点大全

    C++篇为本人学C++时所做笔记(特别是疑难杂点),全是硬货,虽然看着枯燥但会让你收益颇丰,可用作学习C++的一大利器 十四.编程 (一)概念 系统函数及其库是 C++语言所必须的,预处理命令不是 C ...

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

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

  7. 人人都在聊的云原生数据库Serverless到底是什么？

    摘要:华为云数据库营销专家Tony Chen和华为云数据库高级产品经理佳恩开展了一场关于云原生数据库与Serverless结合的直播对话. 云计算的迅猛发展推动了数据库的变革,云原生数据库成为当前数据 ...

  8. 云图说｜初识华为云数据库GaussDB(for openGauss)

    摘要:本文带你了解华为云华为云数据库GaussDB(for openGauss),将AI 技术融入分布式数据库的全生命周期,实现自运维.自管理.自调优.故障自诊断和自愈. 本文分享自华为云社区< ...

  9. 什么是Python中的套接字编程？

    摘要:本文涵盖了有关使用Python进行套接字编程的所有领域.套接字可以帮助您建立这些连接,而Python无疑可以简化连接. 本文分享自华为云社区<从零开始学python | 什么是Python ...

  10. 万字详解什么是生成对抗网络GAN

    摘要:这篇文章将详细介绍生成对抗网络GAN的基础知识,包括什么是GAN.常用算法(CGAN.DCGAN.infoGAN.WGAN).发展历程.预备知识,并通过Keras搭建最简答的手写数字图片生成案. ...