<!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-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>

<div style="padding:20px">
<nav class="navbar navbar-default"role="navigation">
<div class="navbar-header">
<a href="#" class="navbar-brand">
w3cschool
</a>
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">Bootstrap</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</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="#">Bootstrap</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQueryUI</a></li>
<li><a href="#">AngularJS</a></li>
<li class="divider"></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><head><meta http-equiv="Content-Type" content=&q ...

  2. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：内嵌下拉菜单的按钮组

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap系列 -- 36. 向上弹起的下拉菜单

    有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出.在Bootstrap框架中专门为这种效果提代了一个类名“dropu ...

  5. BootStrap字体图标不显示、下拉菜单不显示

    在W3CSchool学习BootStrap教程时遇到的问题…… 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...

  6. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. Bootstrap页面布局15 - BS带下拉菜单的按钮

    带下拉菜单的按钮 <div class='btn-toolbar'> <div class='btn-group'> <a href='javascript:;' cla ...

  8. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  9. js实现网站导航的二级下拉菜单

    http://www.codesky.net/article/201109/1200js/%E5%AE%9E%E7%94%A8%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95. ...

随机推荐

  1. 关于idea的快捷键提示

    IntelliJ Idea 常用快捷键列表 Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Sh ...

  2. [TCP/IP]ICMP和IGMP的区别

    ICMP(Internet 控制消息协议,Internet Control Message Protocol)协议用来给IP协议提供控制服务,允许路由器或目标主机给数据的发送方提供反馈信息.需要发送反 ...

  3. Luogu P2522 [HAOI2011]Problem b 莫比乌斯反演

    设$f(d)=\sum_{i=1}^N\sum_{j=1}^M[gcd(i,j)==d],\\F(n)=\sum_{n|d}f(d)=\lfloor \frac{N}{n} \rfloor \lflo ...

  4. BZOJ 4236: JOIOJI map瞎搞

    分别记录J,O,I,的个数 cnt[char][i] 表示处理到第i位,char的个数 显然当且仅当 cnt[J][i] - cnt[O][i] == cnt[J][j-1] - cnt[O][j-1 ...

  5. POJ1830（异或高斯消元）

    对于某个开关,都有n个选项可能影响它的结果,如果会影响,则系数为1,否则系数为0:最后得到自由元的个数,自由元可选0也可选1. #include <cstdio> #include < ...

  6. springboot集成log4j

    需求: 1.springboot集成log4j 2.mybatis 打印 sql 实现: pom.xml <dependency> <groupId>org.springfra ...

  7. 部署到CentOS Net Core

    Net Core部署到CentOS 本文基于初次或再次尝试部署.Net Core应用到Linux服务器上,我尝试后自我总结的经验一个简单的Demo,尝试部署在Linux服务器上和跨服务器访问数据库. ...

  8. NET Core 模块化，多租户框架

    NET Core 模块化,多租户框架 Orchard Core Framework:ASP.NET Core 模块化,多租户框架 上一篇编写Orchard Core一分钟搭建ASP.NET Core ...

  9. 【OGG】OGG的单向DML复制配置(一)

    [OGG]OGG的单向DML复制配置(一) 一.1  BLOG文档结构图 一.2  前言部分 一.2.1  导读 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识, ...

  10. AD7606笔记

    V1~V8共8个ADC通道: REFIN/OUT:基准电源,可选择内部(REF_SLECT=1)的或者外部的(REF_SLECT=0) VDIRVE:MCU的的VCC,2.3~5V.逻辑电平指的是需要 ...