<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
<title>Bootstrap历练实例：响应式导航</title>
<meta charset="utf-8" />
<!--[if lt IE 9]-->
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<!--[endif]-->
</head>
<body>
<nav class="navbar navbar-inverse"role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"data-toggle="collapse"data-target="#navbar">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#"class="navbar-brand">Bootstrap</a>
</div>
<div class="navbar-collapse collapse"id="navbar">
<ul class="nav navbar-nav">
<li class="active"><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="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</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="#">jQueryUI</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">C#.Net</a></li>
<li><a href="#">MsSql</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<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历练实例：激活导航状态

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

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

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

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

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

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

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

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

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

  6. Bootstrap历练实例：响应式导航栏

    响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是 ...

  7. bootstrap历练实例： 垂直胶囊式的导航菜单

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

  8. bootstrap历练实例： 基本胶囊式的导航菜单

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

  9. bootstrap历练实例：标签式的导航菜单

    本章将讲解bootstrap提供的用于定义导航元素的一些选项,它使用相同的标签和基类.nav.Bootsrtap也提供了一个用于共享标记和状态的帮助器类.改变修饰的class,可以在不同的样式间进行切 ...

随机推荐

  1. Linux调优（网络）

    定义socket接受缓冲大小 net.core.rmem_default = N #接受 net.core.rmem_max = N net.core.wmem_default = N #发送 net ...

  2. Jmeter report优化

    优化大致过程 生成并的报告模板: <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet ...

  3. JavaScript专题（二）闭包

    前言 - ES6 之前,JS没有块级作用域,只有全局作用域和函数作用域 用了许久ES6,春招在即,重写下博文. 还是讲讲闭包.我们要知其然,知其所以然. 仿佛大众情人一般,很多前端面试官都会问一问,说 ...

  4. JS异步解决方案之概念理解-----------阻塞和非阻塞，同步和异步，并发和并行，单线程和多线程

    首先记住一句话,JS是单线程的. 单线程意味着什么?单线程意味着 它不能依靠自己实现异步. JS实现的异步,往往都是靠 浏览器.Node 的机制(事件驱动.回调)实现的. 下面让我这个单身狗 以谈恋爱 ...

  5. windows7安装完上不了网

    安装完Windows7后发现上不了网,网卡驱动没有安装的原因:但是没有网怎么下载驱动呢,,先装一个网卡版驱动精灵(貌似叫驱动精灵万能网卡版)什么的安装一个网卡驱动,就解决了

  6. jdbc 操作步骤详解

    package com.itheima.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql ...

  7. Jenkins~通过WebDeploy实现自动部署

    Jenkins以之前的文章中已经有所介绍,主要集成了自动化部署的功能,而对于自动化部署来说是由多个组件组成的,每个组件负责自己的事,如今天说的webDeploy,它主要实现将网站文件动态发布到另一台I ...

  8. SpringMVC10 InitBinder 注册自定义编辑器

    1.配置web.xml文件 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3// ...

  9. UICollectionView基础API笔记

    UICollectionView系列API,属性含义笔记.在UICollectionView笔记1中我们了解了UICollectionView是什么,以及可以做什么:在UICollectionView ...

  10. uLua学习之读取外部Lua脚本（四）

    前言 上节说到了Lua脚本与unity3d中C#脚本的数据交互,但是我感觉上节中的数理方式不太好,因为我们是把Lua脚本以字符串形式粘贴到C#脚本中的,如果读取配置数据都这样做的话,那就太可怕了.想想 ...