<!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. 数字孪生和GIS融合会为各自带来什么样的改变？

    数字孪生和地理信息系统(GIS)是两个强大的技术,它们在各自领域发挥着重要作用.而当数字孪生与GIS融合时,将会为它们带来更加深远的改变和增益. 数字孪生技术以数字化的方式模拟和复制现实世界中的物理对 ...

  2. 面向对象（OOP）

    面向对象 面向对象 面向过程 & 面向对象 面向过程思想 步骤清晰简单,第一步做什么,第二步做什么... 面对过程适合处理一些较为简单问题 面向对象思想 物以类聚,分类的思维模式,思考问题首先 ...

  3. 2023.2 IDEA安装激活教程

    1.下载安装IntelliJ IDEA 先去官网下载,我这里下载的是最新版本的2023.2,测试过2023最新版本以及2022版本以上的版本没问题. 安装然后打开 提示要输入激活码,先关闭应用,等下再 ...

  4. Ubuntu 命令使用方法

    apt-get 用作于deb包 yum作用于tar包(也可以运作于rpm包) 首先用yum list wget检查一下你的虚拟机有没有安装wget,如果安装了下面图中会显示 @dvd ,我的没有安装所 ...

  5. springboot-jpa获取session

    springboot获取hibernate的session进行更精细的SQL操作,默认的jpa并不能满足一些复杂需求(可能是我把需求设计复杂了) 通过查看JpaRepository的底层实现,发现是通 ...

  6. BFS（三）单词接龙 ⅱ

    对应 126. 单词接龙 II 问题描述 按字典 wordList 完成从单词 beginWord 到单词 endWord 转化,一个表示此过程的 转换序列 是形式上像 beginWord -> ...

  7. 七天.NET 8操作SQLite入门到实战 - 第七天BootstrapBlazor UI组件库引入（1）

    前言 由于第七天Blazor前端页面编写和接口对接的内容比较的多,所以这一章节将会分为三篇文章来进行讲解,大家可以认为分为早.中.晚来进行阶段性学习,从而提高学习效率. 七天.NET 8 操作 SQL ...

  8. Java中一些常用的方法实现（更新中）

    一.数组 1.indexOf int targetIndex = indexOf(arr, targetValue); public static int indexOf(int[] arr,int ...

  9. 2023-09-07：用go语言编写。塔子哥最近在处理一些字符串相关的任务 他喜欢 R 字符，因为在某些任务中，这个字符通常表示“正确”的结果 另一方面，他不喜欢 B 字符，因为在某些任务中，这个字符

    2023-09-07:用go语言编写.塔子哥最近在处理一些字符串相关的任务 他喜欢 R 字符,因为在某些任务中,这个字符通常表示"正确"的结果 另一方面,他不喜欢 B 字符,因为在 ...

  10. 斐波那契数Fibonacci

    509. 斐波那契数 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列.该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和.也就是: F(0) = 0,   F(1) = ...