<!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. 聊聊流式数据湖Paimon(五)

    从Demo入手,了解Paimon/Flink项目搭建的全过程.记录下采坑之旅. 创建Flink项目 在IDEA中创建Flink项目,由于没有Flink的archetype,因此需要手动创建一下. 参考 ...

  2. 部署堡垒机4——CentOS7 编译安装 Python 3.8.12

    1.去python3的官方网站下载源代码 https://www.python.org/downloads/ 下载安装Python 3.8.12到/opt/python3 cd /opt wget h ...

  3. certbot申请泛域名证书并自动续签保姆级教程

    certbot申请泛域名证书并自动续签(使用docker进行部署) 一.涉及到的资源及文档 1.云解析 - OpenAPI 概览:https://next.api.aliyun.com/documen ...

  4. c++ 期末编程题

    1. 计算两点之间的距离 #include <iostream> #include <cmath> using namespace std; int main() { int ...

  5. windows 和 Linux 下 git status 结果不一致

    解决该问题 运行一下命令即可 git config core.autocrlf true 解释 git config core.autocrlf true 这个命令是在任何支持的操作系统上都可以运行的 ...

  6. 文心一言 VS 讯飞星火 VS chatgpt （177）-- 算法导论13.3 6题

    六.用go语言,说明如果红黑树的表示中不提供父指针,应当如何有效地实现 RB-INSERT. 文心一言: 红黑树是一种自平衡的二叉搜索树,其中每个节点都包含一个颜色属性(红色或黑色),并且满足以下性质 ...

  7. SSH默认端口从22修改为其他端口

    1.在终端中使用root权限登录到您的Linux服务器. 2.打开终端,并使用适合您的文本编辑器(如vi.nano等)打开SSH配置文件.例如,通过运行以下命令之一: vi /etc/ssh/sshd ...

  8. Spring系列：基于Spring-Jdbc实现事务

    目录 一.事务基本概念 二.编程式事务 三.声明式事务 前期准备 四.基于注解的声明式事务 @Transactional注解标识的位置 事务属性:只读 事务属性:超时 事务属性:回滚策略 事务属性:隔 ...

  9. 华为云PB级数据库GaussDB(for Redis)揭秘第九期：与HBase的对比

    摘要: 高斯Redis,兼具开源Redis和HBase各自优点,提供成本更低.性能更好.灵活性更强的数据库服务! 本文分享自华为云社区<华为云PB级数据库GaussDB(for Redis)揭秘 ...

  10. 带你认识MindSpore量子机器学习库MindQuantum

    摘要:MindSpore在3.28日正式开源了量子机器学习库MindQuantum,本文介绍MindQuantum的关键技术. 本文分享自华为云社区<MindSpore量子机器学习库MindQu ...