用BootStrap实现响应式导航栏，我会对其中的一些样式进行说明。

　　  先上代码，是一个很简单的Demo。

　　　

<!doctype html>

<html>

    <head>

    <head>

        <meta  charset = "utf-8"/>

        <meta name = "viewport" content = "width-device=width,initial = 1.0"/>

        <!--bootstrap.css -->

        <link  href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>

        <!-- bootstrap.js -->

        <script src = "js/jquery-1.9.1.js"> </script>

        <!-- bootstrap.js -->

            <script src = "js/bootstrap.js"></script>

    </head>

    <body>

            <nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

            <span class="sr-only">展开导航</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

        <a class="navbar-brand" href="#">网站标题</a>

    </div>

    <div class="collapse navbar-collapse" id="menu">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">首页</a></li>

            <li><a href="#">导航标题1</a></li>

            <li><a href="#">导航标题2</a></li>

            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>

                <ul class="dropdown-menu">

                    <li><a href="#">下拉菜单1</a></li>

                    <li class="divider"></li>

                    <li><a href="#">下拉菜单2</a></li>

                    <li class="divider"></li>

                </ul>

            </li>

        </ul>

    </div>

</nav>

    </body>

</html>

　　

　首先引入基本样式和JS插件：

　　　　<link  href = "css/bootstrap.css" rel = "stylesheet" type = "text/css"/>

        <!-- bootstrap.js -->

        <script src = "js/jquery-1.9.1.js"> </script>

        <!-- bootstrap.js -->

            <script src = "js/bootstrap.js"></script>

　　定义响应式的样式：

　

  <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">

            <span class="sr-only">展开导航</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

        </button>

        <a class="navbar-brand" href="#">网站标题</a>

    </div>

　其中：data-toggle="collapse"是数据切换，而collapse是动画效果，data-target="#menu"的作用则是选择展示数据的目标，#menu指的便是：

  <div class="collapse navbar-collapse" id="menu">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">首页</a></li>

            <li><a href="#">导航标题1</a></li>

            <li><a href="#">导航标题2</a></li>

            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>

                <ul class="dropdown-menu">

                    <li><a href="#">下拉菜单1</a></li>

                    <li class="divider"></li>

                    <li><a href="#">下拉菜单2</a></li>

                    <li class="divider"></li>

                </ul>

            </li>

        </ul>

    </div>

　class = "navbar navbar-toggle"则是菜单按钮的样式，其中也可以继续嵌套下拉菜单。

　

BootStrap实现简单响应式导航菜单的更多相关文章

  1. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  2. 响应式导航菜单（css+js）

    1.响应式导航菜单 先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...

  3. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  4. CSS+JS相应式导航菜单

    响应式导航菜单 响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式 需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局 掌握CSS重的display:no ...

  5. HTML5响应式导航

    HTML5响应式导航HTML5,响应式,jQuery特效,HTML5导航,HTML5响应式导航是一款基于HTML5实现的深灰色响应式导航菜单. 地址:http://www.huiyi8.com/sc/ ...

  6. web--响应式导航菜单

    响应式导航菜单 代码如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. 使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等

    "使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...

  8. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  9. bootstrap固定响应式导航

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...

随机推荐

  1. 线性模型之LDA和PCA推导

    线性模型之LDA和PCA 线性判别分析LDA LDA是一种无监督学习的降维技术. 思想:投影后类内方差最小,类间方差最大,即期望同类实例投影后的协方差尽可能小,异类实例的投影后的类中心距离尽量大. 二 ...

  2. Vue技术点整理 vue-devtools

    注:默认浏览器调试工具,在调试vue的页面时,是不能看到vue项目的属性状态值的,所以最好是在浏览器上安装 vue-devtools,这样就可以在浏览器里面审查和调试vue的应用了 1,Chrome浏 ...

  3. kuangbin专题 专题一 简单搜索 Shuffle'm Up POJ - 3087

    题意:(1)有两副颜色多样的扑克牌,(A~H)表示不同颜色,给你两副牌,S1,S2和一副你需要洗出的KEY,S12由S2最底部,S1底部...一直下去,直到洗成S12,就是图片展示的那样.(2)洗好的 ...

  4. ~~函数基础（一）：函数&参数~~

    进击のpython 函数基础(一):参数 ==说明一点奥,如果你前置文章没有看懂,那么不建议你直接看这个== ==因为看了也是浪费时间,没有意义== 好,接下来就是Python的灵魂部分了--函数 在 ...

  5. windows中实现python,redis服务自动重启（任务计划程序+bat脚本）

    需求:银行电脑无法自动开机,只能 通过 应用相关服务每天自动重启的方式实现 服务更新并且防止服务假死,内存过大 等情况 相关工具:win10系统中,使用windows自带的任务计划程序 和 bat脚本 ...

  6. MyBatis从入门到精通：第二章数据的创建与插入文件

    数据库表的创建: create table sys_user ( id bigint not null auto_increment, ), user_password ), user_email ) ...

  7. 从零开始认识Dubbo

    目录 1.Dubbo是什么 2.Dubbo能做什么 3.Dubbo架构 4.Dubbo的使用方法 5.使用Dubbo可能遇到的问题 1.Dubbo是什么 http://dubbo.apache.org ...

  8. https://www.cnblogs.com/M-LittleBird/p/5902850.html

    https://www.cnblogs.com/M-LittleBird/p/5902850.html

  9. 《ElasticSearch6.x实战教程》之复杂搜索、Java客户端（下）

    第八章-复杂搜索 黑夜给了我黑色的眼睛,我却用它寻找光明. 经过了解简单的API和简单搜索,已经基本上能应付大部分的使用场景.可是非关系型数据库数据的文档数据往往又多又杂,各种各样冗余的字段,组成了一 ...

  10. [剑指offer] 34. 第一个只出现一次的字符

    题目描述 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1(需要区分大小写). 一次遍历存储到哈希表 一次 ...