<!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. poj3186(区间dp)

    题目链接:http://poj.org/problem?id=3186 题意:给一行n个数,每次可以取出行首或者行末的数,如果第ai是第i次取出的,可以得到ai*i的收益,求最大的总收益: 思路:区间 ...

  2. 洛谷P3182 [HAOI2016]放棋子

    P3182 [HAOI2016]放棋子 题目描述 给你一个N*N的矩阵,每行有一个障碍,数据保证任意两个障碍不在同一行,任意两个障碍不在同一列,要求你在这个矩阵上放N枚棋子(障碍的位置不能放棋子),要 ...

  3. 9.Python初窥门径(函数初识)

    Python(函数初识) 一.初识函数 面向过程缺点 : 代码重复,代码描述性不高 函数 : 函数是以功能为导向,一个函数封装一个功能. 函数的优点 : 减少代码重复性,增强了代码的可读性 二.函数的 ...

  4. PJzhang:python快速搭建局域网文件共享服务器

    猫宁!!! 参考链接:https://www.cnblogs.com/nopnog/p/8116848.html https://www.cnblogs.com/yili16438/p/d320932 ...

  5. 集合中的 for-Each循环

     数组的加强型的for-Each循环很简单,我们再来看一下集合中的for-Each 循环又是怎么样的.我们都知道集合中的遍历都是通过迭代(iterator)完成的.也许有人说,也可以按照下面的方式来遍 ...

  6. Codeforces 1159E（拓扑序、思路）

    要点 序列上各位置之间的关系常用连边的手段转化为图的问题. 经过一番举例探索不难发现当存在两条有向边交叉时是非法的. -1是模糊的,也就是填多少都可以,那为了尽量避免交叉我们贪心地让它后面那个连它就行 ...

  7. 寒假作业第二组P&&Q&&R题解

    P的题意是有M份作业,这些作业有不同的截止日期,超过截止日期完成,不同的作业有不同的罚分,求如何完成罚分最低. 首先,从截止日期最长的那个作业到截止日期,这些天数是固定的,所做的就是把这些作业填进这些 ...

  8. Python入门_汇总_未完待续

    if/elseif/else for while break continue 多重循环 list [] duple() dict {} set {[]} 函数 help(abs) 查看abs函数的帮 ...

  9. Linux上使用VIM进行.Net Core

    如何在Linux上使用VIM进行.Net Core开发 对于在Linux上开发.Net Core的程序员来说, 似乎都缺少一个好的IDE.Windows上有Visual Studio, Mac上有Vi ...

  10. 转 v$session_longops视图

    转http://www.dbdream.com.cn/2013/10/14/vsession_longops%E8%A7%86%E5%9B%BE/ 1.有的时候不准确 ,我看到 session wai ...