<!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. hdu1688(dijkstra求最短路和次短路)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1688 题意:第k短路,这里要求的是第1短路(即最短路),第2短路(即次短路),以及路径条数,最后如果最 ...

  2. 关于APICloud使用心得（原创）

    从最开始接触APICloud到现在已经有一段时间了.现在想说说自己对于APICloud开发移动端的想法,既有利又有弊. 以下都是我个人的观点. 先说优点吧: 1.APICloud平台文档.视频较多,很 ...

  3. Glassfish 设置时区

    对于Glassfish domain 或者instance下,某个日志的时区不对,前提是系统时区争取. 可以尝试通过如下命令查看jvm 时区设置 asadmin list-jvm-options 如果 ...

  4. mac系统之前做过Windows8系统，可能移除时没有通过boot camp助理移除，所以想要再安装windows系统时，点击boot camp助理的继续，弹出启动磁盘不能被分区或恢复单分区。

    因为把bootcamp分区抹掉,卸载,装载,点减号,合并成单分区,一直是操作失败.为了通过boot camp安装上Windows系统,索性重新安装mac ox系统,重新分区.重新开机,按住comman ...

  5. PAT甲级——1112 Stucked Keyboard (字符串+stl)

    此文章同步发布在我的CSDN上:https://blog.csdn.net/weixin_44385565/article/details/90041078   1112 Stucked Keyboa ...

  6. bzoj3159决战 码农题 树剖套splay

    最近沉迷码农题无法自拔 首先有一个暴力的想法:对于每个重链维护一个splay,需要翻转的连起来,翻转,接回去 然后发现这样没问题... 一条链只能跨log个重链,也就只有log个splay的子树参与重 ...

  7. NET Core+MySql+Nginx

    NET Core+MySql+Nginx 容器化部署 .NET Core容器化@Docker.NET Core容器化之多容器应用部署@Docker-Compose.NET Core+MySql+Ngi ...

  8. 正确使用Enum的FlagsAttribute

    正确使用Enum的FlagsAttribute FlagsAttribute 标志枚举对象的值可以包括多个枚举成员,每个成员代表枚举值中的一个位域 使用步骤 添加标记[Flags] 用 2 的幂(即 ...

  9. java类在eclipse上打jar包，Linux上成功运行的实例

    1 eclipse下的java项目结构如下图所示: 2 打包的步骤如下: 3 修改minifest.mf文件:  4 .上传需要的三方jar包们和主类打的jar(案例是topV.jar)并且执行jav ...

  10. Memcached分布式原理

    http://younglibin.iteye.com/blog/2043761 浅显易懂,值得一读