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. ...

随机推荐

委托在Smobiler自定义控件中运用
委托(Delegate) C# 中的委托(Delegate)类似于 C 或 C++ 中函数的指针.委托(Delegate) 是存有对某个方法的引用的一种引用类型变量.可以将方法当作另一个方法的参数来进 ...
ajax请求中两种csrftoken的发送方法
通过ajax的方式发送两个数据进行加法运算 html页面 <body> <h3>index页面 </h3> <input type="text&qu ...
01(b)无约束优化(准备知识)
1.解方程转化为优化问题 $n\left\{ \begin{aligned}& {{P}_{1}}(x)=0 \\ & {{P}_{2}}(x)=0 \\ & \text{ ...
C++一些知识的整理
1. C 和 C++ 区别 C++支持多种编程范式:面向对象编程.泛型编程.过程化编程.支持类.封装.重载等特性. c和c++的头文件不同. 输入输出不同. 变量的声明定义不同:c语言:变量要放在语句 ...
《深入浅出MFC》下载
百度云及其他网盘下载地址:点我编辑推荐 <深入浅出MFC>内含光盘一片,书中所有原始码与可执行文件尽在其中. 作者简介侯俊杰,先生不知何许人也,闲静少言,不慕荣利.好读书,求甚解:每有 ...
NOSQL—MongoDB之外的新选择
MongoDB之外的新选择 MongoDB拥有灵活的文档型数据结构和方便的操作语法,在新兴的互联网应用中得到了广泛的部署,但对于其底层的存储引擎一直未对外开放,虽说开源却有失完整.Mongo版本3中开 ...
Postgresql_fdw
Postgresql_fdw 测试环境 Ubuntu 16.04 LTS云主机2台,主机名为pg1(192.168.0.34)和pg2(192.168.0.39). 安装postgresql 下面这个 ...
openstack实验环境搭建
Openstack实验文档一.base节点 1.1配置网络 vim /etc/sysconfig/network-scripts/ifcfg-eth0 1.2关闭防火墙和selinux system ...
[USACO10FEB]给巧克力Chocolate Giving
题意简叙: FarmerFarmerFarmer JohnJohnJohn有B头奶牛(1<=B<=25000)(1<=B<=25000)(1<=B<=25000), ...
Spring_IoC注解开发和AOP的XML开发(学习笔记2）
一:IoC注解开发 1,在applicationContext.xml中需要引入context约束 <beans xmlns="http://www.springframework.o ...

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

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

随机推荐

热门专题