<!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. MySQL 数据目录

    MySQL 的数据目录 1. MySQL 的主要目录结构 方式1:通过命令搜索 find / -name mysql 方式2(推荐):通过查看配置文件获取目录结构 vim /etc/my.cnf (重 ...

  2. ASR项目实战-交付过程中遇到的疑似内存泄漏问题

    基于Kaldi实现语音识别时,需要引入一款名为OpenFST的开源软件,本文中提到的内存问题,即和这款软件相关. 考虑到过程比较曲折,内容相对比较长,因此先说结论. 在做长时间的语音识别时,集成了Ka ...

  3. DVWA SQL Injection（SQL注入）全等级

    SQL Injection(SQL回显注入) 目录: SQL Injection(SQL回显注入) 1. Low 2.Medium 3. High 4.Impossible 5.运用sqlmap自动化 ...

  4. Element UI的第一个程序（标签使用）

    1:Element UI 官方文档:https://element.faas.ele.me/ 2:Element UI是什么? 网站快速成型工具 Element,一套为开发者.设计师和产品经理准备的基 ...

  5. HTTP安全头部对jsp页面不生效

    本文于2016年4月底完成,发布在个人博客网站上. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 诡异的问题 AppScan扫描报告中提示,Web服务器返回js.cs ...

  6. Centos 利用本地镜像安装yum源

    前提 在"设置"中确保两点 1.勾选"已连接" 2.添加上本地的"centos.iso"镜像文件 切换到用户目录 cd / 新建一个iso目 ...

  7. Text Intelligence - TextIn.com AI时代下的智能文档识别、处理、转换

    一.智能文档处理介绍 在AI时代,智能文档处理技术正变得越来越重要.它包括了智能文字识别(OCR).智能文档信息抽取.文档图像处理以及文档转换等多个方面.这些技术共同构成了现代信息处理的核心,广泛应用 ...

  8. LeetCode 栈与队列篇（12、155、84、239）

    20. 有效的括号 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭合. 左括号必须以正确的顺序闭合. ...

  9. Serverless架构的前世今生

    一.Serverless简介 云计算的不断发展,涌现出很多改变传统IT架构和运维方式的新技术,而以虚拟机.容器.微服务为代表的技术更是在各个层面不断提升云服务的技术能力,它们将应用和环境中很多通用能力 ...

  10. 一文搞定Matplotlib 各个示例丨建议收藏

    摘要:Matplotlib 是 Python 的绘图库. 它可与 NumPy 一起使用 ,Matplotlib也是深度学习的常用绘图库,主要是将训练的成果进行图形化,因为这样更直观,更方便发现训练中的 ...