<!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. solidity 学习笔记（7）内联汇编

    为什么要有内联汇编? //普通循环和内敛汇编循环比较 pragma solidity ^0.4.25; contract Assembly{ function nativeLoop() public ...

  2. SpringBoot2.0 基础案例(06)：引入JdbcTemplate,和多数据源配置

    一.JdbcTemplate对象 1.JdbcTemplate简介 在Spring Boot2.0框架下配置数据源和通过JdbcTemplate访问数据库的案例. SpringBoot对数据库的操作在 ...

  3. 微信小程序 笔记

    1.Input 输入控件 <input type='digit' placeholder='0.00'></input> 如果要使用单纯的数字控件,使那么可以将type设置为d ...

  4. [软件工程基础]Alpha 展示博客

    团队成员 个人简介 个人简介参照团队介绍博客. 个人博客 王嘉睿爵:http://www.cnblogs.com/whynotRW/ 游心:http://www.cnblogs.com/jefhq/ ...

  5. struts的logic标签和<bean:write/>详情

    https://baike.baidu.com/item/Logic%E6%A0%87%E7%AD%BE/2292947?fr=aladdin https://blog.csdn.net/applea ...

  6. C - AtCoDeerくんと選挙速報 / AtCoDeer and Election Report

    ceil有毒啊..用ceil一直错. 思路就是模拟吧,设当前的答案是ansx和ansy. 如果比例是小于ansx的,那么就要乘以一个倍数k1,使得a * k1 >= ansx的. 所以就用cei ...

  7. canvas前端压缩图片

    参考网上的用法,下面是利用canvas进行的图片压缩 <!DOCTYPE html> <html> <head> <meta charset="ut ...

  8. 开源分布式Job系统,调度与业务分离-如何创建周期性的HttpJob任务

    项目介绍: Hangfire:是一个开源的job调度系统,支持分布式JOB!! Hangfire.HttpJob 是我针对Hangfire开发的一个组件,该组件和Hangfire本身是独立的.可以独立 ...

  9. 使用jstack分析解决进程死锁问题

    项目启动后不久就会出现死锁的现象,一直不知道什么原因造成的,后来经过大神的指点,解决了这个问题. 流程如下: 1.环境jdk1.6以上: 2.linux下使用ps aux|grep tomcat 命令 ...

  10. WebApi访问方式配置

    之前公司使用webapi开发项目,只知道怎么用对于怎么配置一直不了解,最近这段时间没什么事然后自己建一个webapi项目,只知道怎么用对于怎么配置一直不了解,最近这段时间没什么事然后自己建一个weba ...