<!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 class="container">
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">w3cSchool</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Html5</a></li>
<li><a href="#">Css3</a></li>
<li class="dropdown">
<a id="dLabel" class="dropdown-toggle" data-toggle="dropdown" href="#">
w3cschool
<span class="caret"></span>
</a>
<ul role="menu" class="dropdown-menu" aria-labelledby="dLabel">
<li role="presentation">
<a role="menuitem"href="#"tabindex="-1">Html5</a>
</li>
<li role="presentation">
<a role="menuitem" href="#"tabindex="-1">Css3</a>
</li>
<li role="presentation">
<a role="menuitem" href="#"tabindex="-1">JavaScript</a>
</li>
<li role="presentation">
<a role="menuitem" href="#" tabindex="-1">jQuery</a>
</li>
<li role="presentation">
<a role="menuitem" href="#" tabindex="-1">jQueryUI</a>
</li>
<li role="presentation">
<a role="menuitem" href="#" tabindex="-1">Bootstrap</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem">C#.Net</a>
</li>
<li role="presentation">
<a role="menuitem">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. Bootstrap<基础十四> 按钮下拉菜单

    使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...

  3. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  4. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  5. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  6. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  7. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  8. Bootstrap之样式风格与下拉菜单

    背景颜色 bg-primary 字体颜色 text-primary 文字居中 text-center 按钮 btn btn-primary btn-default默认 btn-link链接 按钮大小 ...

  9. Bootstrap系列 -- 24. 下拉菜单基本用法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...

随机推荐

  1. 洛谷P4151 [WC2011]最大XOR和路径（线性基）

    传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 首先看到异或就想到线性基 我们考虑有一条路径,那么从这条路径走到图中的任意一个环再走回这条路径上,对答案的贡献是这个环的异或和,走到这个环上的路径对 ...

  2. [Xcode 实际操作]八、网络与多线程-(23)多线程的同步与异步的区别

    目录:[Swift]Xcode实际操作 本文将演示线程的同步与异步的区别. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] 异步线程的运行,是没有按照顺序执行的. ...

  3. css 文本显示多行后用省略号显示剩余的

    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;      

  4. ebullient(2018.10.25)

    结论巨好想,每一次操作可以看作把一个b往前移一位,另一个b往后移一位,逆序对个数不改变,判断即可做第一问. 此处代码仅给出第一问做法: #include<cstdio> #include& ...

  5. 关于log

    如果项目上过线的话,那你一定知道Log是多么重要. 为什么说Log重要呢?因为上线项目不允许你调试,你只能通过Log来分析问题.这时打一手好Log的重要性绝不亚于写一手好代码.项目出问题时,你要能拿出 ...

  6. ZROI #365. 【2018普转提day18专题】嘤嘤嘤嘤

    ZROI #365. [2018普转提day18专题]嘤嘤嘤嘤 直接放代码 具体做法见注释 #include<stdio.h> #include<cstring> #inclu ...

  7. B.小A与任务

    链接:https://ac.nowcoder.com/acm/contest/369/B 题意: 小A手头有 n 份任务,他可以以任意顺序完成这些任务,只有完成当前的任务后,他才能做下一个任务 第 i ...

  8. Jasper_crosstab_group_dataset_Error incrementing crosstab dataset

    Error detail: net.sf.jasperreports.engine.JRException: net.sf.jasperreports.engine.JRRuntimeExceptio ...

  9. Jmeter----小技巧（3）

    1.关闭启动Jmeter时出现的面板 说明:启动Jmeter的同时往往会打开一个下图所示的面板,经常不小心关掉后,导致Jmeter停止运行,偶尔写了好久的脚本没来得及保存就没了,烦恼不已 怎样避免如上 ...

  10. ViewPager的使用总结

    这两天公司项目一直需要用到ViewPager来显示各式各样的Banner图,因而再次做了一些总结,不全后续应该还会更新的. 1.ViewPager要想做到一个界面显示多个items 有两种方式 ,一种 ...