<!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 实现一个简单的计算器 本文主要整合下tkinter ,实现下简单的计算器. 代码如下: #!/usr/bin/python3 # -*- coding: UTF-8 -*- " ...

  2. 【笔记】springSecurity-OAuth2.0-授权模式演示

    SpringSecurityOauth2架构 介绍 流程: 用户访问,此时没有Token.Oauth2RestTemplate会报错,这个报错信息会被Oauth2ClientContextFilter ...

  3. 解决方案 | VS2022 + AutoCAD2024 + ObjectARX2024环境搭建过程

    一.准备工具 1.vs2022 自行网络搜索,各种版本均可(比如专业版.社区版),注意使用社区版必须使用最新版,目前是17.8版本,否则最终会无法使用样板. 2.cad2024 自行网络搜索 3.Ob ...

  4. SQL优化案例(1)：隐式转换

    MySQL是当下最流行的关系型数据库之一,互联网高速发展的今天,MySQL数据库在电商.金融等诸多行业的生产系统中被广泛使用. 在实际的开发运维过程中,想必大家也常常会碰到慢SQL的困扰.一条性能不好 ...

  5. nginx在代理到upstream时转换http1.1为http1.0，长连接转为短连接

    nginx在代理到upstream时的默认行为 最近准备用openresty替换nginx,替换的效果当然是需要保证效果和nginx一致,不然可能就会导致线上在用的服务出现问题. 替换成openres ...

  6. WSDM Cup 2020大赛金牌参赛方案全解析

    近日,在美国休斯敦闭幕的第13届网络搜索与数据挖掘国际会议(WSDM 2020)上,华为云语音语义创新Lab带领来自华南理工大学.华中科技大学.江南大学.武汉大学的四位学生组成的联合团队"X ...

  7. 鸿蒙轻内核M核源码分析：数据结构之任务就绪队列

    摘要:本文会给读者介绍鸿蒙轻内核M核源码中重要的数据结构,任务基于优先级的就绪队列Priority Queue. 本文分享自华为云社区<鸿蒙轻内核M核源码分析系列三 数据结构-任务就绪队列> ...

  8. 带你认识大模型训练关键算法：分布式训练Allreduce算法

    摘要:现在的模型以及其参数愈加复杂,仅仅一两张的卡已经无法满足现如今训练规模的要求,分布式训练应运而生. 本文分享自华为云社区<分布式训练Allreduce算法>,原文作者:我抽签必中. ...

  9. 1g云主机升级centos8不满足centos 8 至少2g内存要求，linux虚拟内存来凑

    centos8 官方说,至少2g内存,推荐4g内存,像我的个人博客,zhoulujun.cn ,这种个人博客有不赚钱,丢个5美金一个月的1g内存,1核cpu,就够了. 强制升级到centos8,ngi ...

  10. [BitSail] Connector开发详解系列四：Sink、Writer

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Sink Connector BitSail Sink Connector交互流程介绍 Sink:数据写入组件的生 ...