响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为.nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：响应式导航栏</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-widht,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
<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">w3cschool</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">AngularJS</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
HTML5前端
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">AngularJS</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</li>

</ul>
</div>
</nav>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：响应式导航栏的更多相关文章

  1. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

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

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

  3. Bootstrap历练实例：激活导航状态

    激活导航状态 您可以在激活状态的胶囊式导航和列表导航中放置徽章.通过使用 <span class="badge"> 来激活链接,如下面的实例所示: <!DOCTY ...

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

    用BootStrap实现响应式导航栏,我会对其中的一些样式进行说明.   先上代码,是一个很简单的Demo. <!doctype html> <html> <head&g ...

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

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

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

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

  7. Bootstrap 学习笔记 项目实战 响应式导航栏

    导航代码HTML: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  8. Bootstrap学习1--响应式导航栏

    备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html <nav class="navbar n ...

  9. Bootstrap历练实例：响应式导航(带有表单)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. 51nod 1051【基础】

    思路: 找题4级做做...然后找了题最水的.. = =感动...居然是一下子[记]得了做法... dp一下,枚举列的起点和终点,然后求和这一段,然后对这一大列就是求个最大字段和: #include & ...

  2. 2016四川省赛A,C【写了1w个if的水题】

    A题: #include <iostream> #include <stdio.h> #include <string.h> #include <algori ...

  3. JavaScript之——对象Object（一）

    1. 新建对象.删除和访问: (1).新建 var obj1 = {b: 2}; //对象文本表示法 var obj2 = new Object(); obj2.a = 1; (2).访问 //第一种 ...

  4. 20道Java精选面试必问题（附详细解答），还有什么拿不到的offer

    1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Java被 ...

  5. IT兄弟连 JavaWeb教程 EL与JSTL表达式经典案例

    案例需求:使用MVC模式编写一个程序,当发起一个deptList.do请求时,在servlet中准备一个部门列表对象,把这个列表对象放入request作用域中转发到deptlist.jsp,使用JST ...

  6. python数据结构转换&格式化

    列表,元组和字符串python中有三个内建函数:,他们之间的互相转换使用三个函数,str(),tuple()和list(),具体示例如下所示 >>> s = "xxxxx& ...

  7. CF ECR59div2 D

    题目本质:如果答案是i,那么从行和列两维都会满足:以i的倍数分块,矩阵值相同. 一种解决方法: 1.首先题目里说了要在n的约数里找orzorz…… 2.块中需要一整排都相同.用“与前一排相同否?”来判 ...

  8. 转:在linux中vi 文件里行尾奇怪的^M及解决

    Linux编辑器vim中删除行尾的^M 有时候,在 Linux 中使用打开曾在 Windows 中编辑过的文件时,会在行尾看到 ^M 字符.看起来总是感觉很别扭. 删除方法如下: 在 Vim 的命令模 ...

  9. [译]Understanding ECMAScript6 基本知识

    基本知识 ECMAScript 6在ECMAScript 5之上做了大量的改变.一些改变很大,比如添加新的类型或者语法,而其它的非常小,提供了语言之上的渐进改进.这个章节包含了那些渐进改进,它们可能不 ...

  10. Linux--NiaoGe-Service-04

    操作系统版本:CentOS 6.10 x86_64 查看内核所获取到的网卡信息 [root@xueji ~]# dmesg | grep -in eth :e1000 ::-bit) :0c::6b: ...