<!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. 玩转Python：用Python处理文本数据，附代码

    Python 提供了多种库来处理纯文本数据,这些库可以应对从基本文本操作到复杂文本分析的各种需求.以下是一些常用的纯文本处理相关的库: str 类型: Python 内建的字符串类型提供了许多简便的方 ...

  2. CodeForces 1141F2 贪心 离散化

    CodeForces 1141F2 贪心 离散化 题意 给定一个序列,要求我们找出最多数量的不相交区间,每个区间和都相等. 思路 一开始没有头绪,不过看到 \(n \le 1500\) 后想到可以把所 ...

  3. 聊聊游戏业务怎么用高斯Redis

    摘要:其实游戏客户对数据库的诉求是很明确的,数据库应当"放心存放心用". 本文分享自华为云社区<华为云GaussDB(for Redis)揭秘第27期:聊聊游戏业务怎么用高斯 ...

  4. 聊聊LiteOS中生成的Bin、HEX、ELF三种文件格式

    摘要:我们在使用编译器在编译工程后会要求生成可执行文件,将这些文件烧录到MCU进行运行,达到我们测试和使用程序的目的,再使用工具链进行编译的时候往往生成.bin..hex ..elf ..alf等文件 ...

  5. 云图说｜数据仓库服务 GaussDB(DWS) 的“千里眼、顺风耳”—数据库智能运维

    摘要:数据库智能运维(DMS)是GaussDB(DWS) 为客户数据库快速.稳定运行提供保驾护航的能力,对业务数据库所使用磁盘.网络.OS指标数据,集群运行关键性能指标进行收集.监控.分析.通过综合收 ...

  6. 8种图数据库对 NULL 属性值支持情况

    摘要:在语义网等图模型中,遵循开放世界假设,对于数据中未包含的事实,都认为是未知的而非假的. 本文分享自华为云社区<图数据库对 NULL 属性值支持情况>,原文作者:你好_TT . NUL ...

  7. presto是如何保证作业内存不会发生冲突和溢出

    摘要:presto计算引擎作为一个纯内存计算引擎,是如何保证计算过程不会发生作业内存溢出的?本篇文章会进行深入的学习和分析. 本文分享自华为云社区<presto是如何保证作业内存不会发生冲突和溢 ...

  8. 据说有人面试栽在了Thread类的stop()方法和interrupt()方法上

    摘要:今天就简单的说说Thread类的stop()方法和interrupt()方法到底有啥区别. 本文分享自华为云社区<[高并发]又一个朋友面试栽在了Thread类的stop()方法和inter ...

  9. 用 Java？试试简单的框架 Solon v1.10.9

    Java 国产的轻量级应用开发框架.可用来快速开发 Java 应用项目.主框架仅 0.1 MB.Helloworld: @Controller public class App { public st ...

  10. PPT 没有电脑如何制作PPT

    没有电脑如何制作PPT