BootStrap实现简单响应式导航菜单

　　　用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实现简单响应式导航菜单的更多相关文章

第二百五十节，Bootstrap项目实战--响应式导航
Bootstrap项目实战--响应式导航学习要点: 1.响应式导航一．响应式导航基本导航组件+响应式第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...
响应式导航菜单（css+js）
1.响应式导航菜单先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> < ...
Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
CSS+JS相应式导航菜单
响应式导航菜单响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局掌握CSS重的display:no ...
HTML5响应式导航
HTML5响应式导航HTML5,响应式,jQuery特效,HTML5导航,HTML5响应式导航是一款基于HTML5实现的深灰色响应式导航菜单. 地址:http://www.huiyi8.com/sc/ ...
web--响应式导航菜单
响应式导航菜单代码如下 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
使用Bootstrap 3开发响应式网站实践01,前期准备、导航区域等
"使用Bootstrap 3开发响应式网站实践"系列,将使用Bootstrap 3.2制作一个自适应网站,无论是在电脑.平板,还是手机上,都呈现比较好的效果.在电脑浏览器上的最终效 ...
Bootstrap学习笔记（8）--响应式导航栏
说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...
bootstrap固定响应式导航
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap. ...

随机推荐

PCA(主成分分析)算法
设有$m$个指标,$n$个样本的原始数据将原始数据按列组成矩阵 $X _ { n \times m }$ 将$X$ 的每一列进行中心化求$X$的协方差矩阵\(\Sigma _ ...
图解kafka - 设计原理解析
什么是消息队列? 简单来说,消息队列是存放消息的容器.客户端可以将消息发送到消息服务器,也可以从消息服务器获取消息. 问题导读: ********* 为什么需要消息系统? kafka架构? kafka ...
JavaScript 基础知识变量与数据类型
一.区分大小写 JS中一切(变量/函数名/操作符)都是严格区分大小写的二.标识符变量.函数.属性的名字以及函数的参数命名规则:1.第一个字符可以是字母.下划线.美元符号$ 2.其他的字符可以是字 ...
查询IP地址的免费API
1.百度 1.http://sp0.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?query=192.168.0.0&co=&resource_ ...
ElasticStack学习（四）：ElasticSearch文档使用与操作
一.文档的CRUD介绍 ElasticSearch中存在五种操作,分别如下: 1.Index 该操作表示:如果文档的ID不存在,则创建新的文档.若有相同的ID,先删除现有文档,然后再创建新的文档,同时 ...
如何实现LRU算法？
1.什么是LRU算法? LRU是一种缓存淘汰机制策略. 计算机的缓存容量有限,如果缓存满了就要删除一些内容,给新的内容腾位置.但是要删除哪些内容呢?我们肯定希望删掉那些没有用的缓存,而把有用的数据继续 ...
小心使用strcpy函数时越界
strcpy()函数应该是我们用的比较常用的一个函数,基本功能是将一个字符串拷贝到我指定的内存空间.但是要复制的字符串长度超过这段内存空间的话,结果可能是未知的. 比如以下的程序: #include ...
ZIP：ZipFile
ZipFile: /* 此类用于从 ZIP 文件读取条目 */ ZipFile(File file) :打开供阅读的 ZIP 文件,由指定的 File 对象给出. ZipFile(File file, ...
youku_androidid
youku_androidid = 1310; imei screenwidth screenhight
Unity游戏神经网络版坦克大战
基于遗传算法优化的神经网络来训练坦克AI是什么体验呢?下面有bulid好的demo. 包括window和安卓两个版本. 这是一个Unity项目. 下载链接:https://pan.baidu.com/ ...

BootStrap实现简单响应式导航菜单

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

随机推荐

热门专题