响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 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. lightoj1259 【素数预处理】

    题意: 输出有多少对满足条件的(a,b) both a and b are prime; a+b=n a<=b; 思路: 一开始想的就是打表一个素数数组,然后还去二分..mdzz..直接判断一下 ...

  2. 最长上升序列（Lis）

    Description A numeric sequence of ai is ordered if a1 < a2 < ... < aN. Let the subsequence ...

  3. day01 继承

  4. PAT甲级——1135 Is It A Red-Black Tree （30 分)

    我先在CSDN上面发表了同样的文章,见https://blog.csdn.net/weixin_44385565/article/details/88863693 排版比博客园要好一些.. 1135 ...

  5. [題解]（水/并查集）luogu_P2170選學霸

    很簡單的水題,因為智障沒有A所以發篇博客 同樣的題:luogu_P1455 搭配購買 用并查集維護一下所有實力相等的人的size,然而你可以選多個size......,於是跑個背包就行了,只要注意一下 ...

  6. [題解]（最短路/二分）luogu_P1462通往奧格瑞瑪的道路

    看到最大的最小值應該想到二分答案,這樣就解決了最小點權的問題,判血量就很好說,直接比較就行, 一個點是二分點權數組,複製一份然後排序,二分下標,速度較快 這麼簡單的題我竟然寫了這麼長時間 #inclu ...

  7. HDU-1003：Max Sum（优化）

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  8. 执行脚本 提示 command not found

    问题现象: 初学shell,写了个脚本, 1.从windows 写好 脚本,然后部署到 linux 上. 2.chmod +x之后执行提示command not found,系统环境redhat9,用 ...

  9. 在b站做计网实验 - 抓包/get/post

    前言 这篇博文是一个小实验,用python发送get/post请求,其中用到cookie登录bilibili网站并修改个人信息. 抓包 对HTTP应用而言,用浏览器自带的插件可以很方便做到抓包,比如c ...

  10. Problem D. What a Beautiful Lake dp

    Problem D. What a Beautiful Lake Description Weiming Lake, also named "Un-named Lake", is ...