Bootstrap 中的插件的学习2(导航)
实例
在导航栏内
下面的实例演示了在导航栏内的下拉菜单的用法:
- <!DOCTYPE HTML>
- <html>
- <head>
- <link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
- <script src="/scripts/jquery.min.js"></script>
- <script src="/scripts/bootstrap.min.js"></script>
- </head>
- <body>
- <nav class="navbar navbar-default" role="navigation">
- <div class="navbar-header">
- <a class="navbar-brand" href="#">W3Cschool</a>
- </div>
- <div>
- <ul class="nav navbar-nav">
- <li class="active"><a href="#">iOS</a></li>
- <li><a href="#">SVN</a></li>
- <li class="dropdown">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- Java
- <b class="caret"></b>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#">jmeter</a></li>
- <li><a href="#">EJB</a></li>
- <li><a href="#">Jasper Report</a></li>
- <li class="divider"></li>
- <li><a href="#">分离的链接</a></li>
- <li class="divider"></li>
- <li><a href="#">另一个分离的链接</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </nav>
- </body>
- </html>
在标签页内
- <p>带有下拉菜单的标签页</p>
- <ul class="nav nav-tabs">
- <li class="active"><a href="#">Home</a></li>
- <li><a href="#">SVN</a></li>
- <li><a href="#">iOS</a></li>
- <li><a href="#">VB.Net</a></li>
- <li class="dropdown">
- <a class="dropdown-toggle" data-toggle="dropdown" href="#">
- Java <span class="caret"></span>
- </a>
- <ul class="dropdown-menu">
- <li><a href="#">Swing</a></li>
- <li><a href="#">jMeter</a></li>
- <li><a href="#">EJB</a></li>
- <li class="divider"></li>
- <li><a href="#">分离的链接</a></li>
- </ul>
- </li>
- <li><a href="#">PHP</a></li>
- </ul>
- 代码:
<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="javascripts:void(0);">AAA</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="javascripts:void(0);">iOS</a></li>
<li><a href="javascripts:void(0);">SVN</a></li>
<li class="dropdown">
<a href="javascripts:void(0);" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="javascripts:void(0);">jmeter</a></li>
<li><a href="javascripts:void(0);">EJB</a></li>
<li><a href="javascripts:void(0);">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="javascripts:void(0);">分离的链接</a></li>
<li class="divider"></li>
<li><a href="javascripts:void(0);">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<p>带有下拉菜单的标签页</p>
<ul class="nav nav-tabs">
<li class="active"><a href="javascripts:void(0);">Home</a></li>
<li><a href="javascripts:void(0);">SVN</a></li>
<li><a href="javascripts:void(0);">iOS</a></li>
<li><a href="javascripts:void(0);">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="javascripts:void(0);">
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="javascripts:void(0);">Swing</a></li>
<li><a href="javascripts:void(0);">jMeter</a></li>
<li><a href="javascripts:void(0);">EJB</a></li>
<li class="divider"></li>
<li><a href="javascripts:void(0);">分离的链接</a></li>
</ul>
</li>
<li><a href="javascripts:void(0);">PHP</a></li>
</ul>
</body>
</html>用法
可以切换下拉菜单(Dropdown)插件的隐藏内容:
通过 data 属性:向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单,如下所示:
- <div class="dropdown">
- <a data-toggle="dropdown" href="#">下拉菜单(Dropdown)触发器</a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- </ul>
- </div>
如果您需要保持链接完整(在浏览器不启用 JavaScript 时有用),请使用data-target 属性代替 href="#":
- <div class="dropdown">
- <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
- 下拉菜单(Dropdown) <span class="caret"></span>
- </a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
- ...
- </ul>
- </div>
通过 JavaScript:通过 JavaScript 调用下拉菜单切换,请使用下面的方法:
- $('.dropdown-toggle').dropdown()
方法
下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。
- $().dropdown('toggle')
导航条实例
ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项。
拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化。下拉菜单中的子项也会跟着变为高亮状态。
<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-scrollspy">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">教程名称</a>
</div>
<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#ios">iOS</a></li>
<li><a href="#svn">SVN</a></li>
<li class="dropdown">
<a href="#" id="navbarDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu"
aria-labelledby="navbarDrop1">
<li><a href="#jmeter" tabindex="-1">jmeter</a></li>
<li><a href="#ejb" tabindex="-1">ejb</a></li>
<li class="divider"></li>
<li><a href="#spring" tabindex="-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy="scroll" data-target="#navbar-example" data-offset="0"
style="height:200px;overflow:auto; position: relative;">
<h4 id="ios">iOS</h4>
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X,它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上,iOS 是苹果的移动版本。
</p>
<h4 id="svn">SVN</h4>
<p>Apache Subversion,通常缩写为 SVN,是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目,因此拥有丰富的开发人员和用户社区。
</p>
<h4 id="jmeter">jMeter</h4>
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序,用于负载和性能测试。
</p>
<h4 id="ejb">EJB</h4>
<p>Enterprise Java Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构,部署在兼容应用程序服务器(比如 JBOSS、Web Logic 等)的 J2EE 上。
</p>
<h4 id="spring">Spring</h4>
<p>Spring 框架是一个开源的 Java 平台,为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。
</p>
<p>Spring 框架最初是由 Rod Johnson 编写的,在 2003 年 6 月首次发布于 Apache 2.0 许可证下。
</p>
</div>
</body>
</html>调用方式
通过data属性
只需将data-spy="scroll"添加到被监听的页面元素上(大部分情况是添加到body上),然后将data-target=".navbar"添加到导航部分,仅此而已,顶部导航条就拥有了监听滚动的功能。你可能希望将滚动监听应用到.nav组件上。
- <body data-spy="scroll" data-target=".navbar">...</body>
方法
.scrollspy('refresh')
当滚动监听所作用的DOM有增删页面元素的操作时,需要调用下面的refresh方法:
- $('[data-spy="scroll"]').each(function () {
- var $spy = $(this).scrollspy('refresh')
- });
参数
可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,其名称是将参数名附着到 data- 后面组成,例如 data-offset=""。
名称 类型 默认值 描述 offset number 10 计算滚动位置时相对于顶部的偏移量(像素数)。
事件
下表列出了滚动监听中要用到事件。
事件 描述 实例 activate.bs.scrollspy 每当一个新项目被滚动监听激活时,触发该事件。 - $('#myScrollspy').on('activate.bs.scrollspy', function () {
- // 执行一些动作...
- })
通过JavaScript
通过JavaScript启动滚动监听:
- $('#navbar').scrollspy()
注意! 必须为导航条中的链接指定相应的目标id。例如,<a href="#home">home</a>必须和dom中类似<div id="home"></div>的页面元素相呼应。
Bootstrap 中的插件的学习2(导航)的更多相关文章
- Bootstrap 中的插件的学习
一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...
- Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭。
目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns / ...
- yii2.0使用bootstrap中日期插件
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...
- 12、Bootstrap中文文档(其它插件分享)
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 本片导航: Bootstrap的下载 css样式的使用 JavaScript 效果的引用 其他前端插件 ...
- bootstrap基础学习【导航条、分页导航】(五)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程
在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...
- Vue学习之--------Vue中自定义插件(2022/8/1)
文章目录 1.插件的基本介绍 2.实际应用 2.1 目录结构 2.2 代码实例 2.2.1 学校组件(School.vue) 2.2.2 学生组件(Student.vue) 2.2.3 定义的插件 2 ...
- 57、Bootstrap中文文档
给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...
- [Bootstrap]7天深入Bootstrap(5)JavaScript插件
在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab). ...
随机推荐
- Worktile中百万级实时消息推送服务的实现
Worktile中百万级实时消息推送服务的实现 出自:http://blog.jobbole.com/81125/
- IE8 frameset SESSION丢失
IE8 使用 frameset后,子页面,脚本触发父页面js函数, 如果使用 window.parent.location.href 跳转,则session会丢失 使用 window.location ...
- 实例讲解JQuery中this和$(this)区别
这篇文章主要介绍了实例讲解JQuery中this和$(this)的区别,this表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法,$(this),代表的上下文对象是一个j ...
- [转]ASP.NET MVC 5 学习教程:快速入门
本教程将使用Visual Studio 2013手把手教你构建一个入门的ASP.NET MVC5 Web应用程序.本教程配套的C#源码工程可通过如下网址下载:C#版本源码链接.同时,请查阅 Build ...
- PostgreSQL的.NET驱动程序Npgsql中参数对象的一个Bug
最近将公司的项目从SqlServer移植到PostgreSQL数据库上来,在调用数据库的存储过程(自定义函数)的时候,发现一个奇怪的问题,老是报函数无法找到. 先看一个PgSQL存储过程: CREAT ...
- Java中对List集合的常用操作(转载)
目录: list中添加,获取,删除元素: list中是否包含某个元素: list中根据索引将元素数值改变(替换): list中查看(判断)元素的索引: 根据元素索引位置进行的判断: 利用list中索引 ...
- vue里监听安卓的物理返回键
Hybrid App中,原生内嵌H5单页,由于安卓是有物理返回键的,按安卓物理返回键的时候会返回到上一个路由. 实际中需求是:当有弹层的时候,按物理返回键是关闭弹层,是页面的时候才执行返回上一个路由, ...
- 170406、用uid分库,uname(用户名)上的查询怎么办
[缘起] 用户中心是几乎每一个公司必备的基础服务,用户注册.登录.信息查询与修改都离不开用户中心. 当数据量越来越大时,需要多用户中心进行水平切分.最常见的水平切分方式,按照uid取模分库: 通过ui ...
- 160426、JavaScript 秘密花园
简介 关于作者 这篇文章的作者是两位 Stack Overflow 用户, 伊沃·韦特泽尔 Ivo Wetzel(写作) 和 张易江 Zhang Yi Jiang(设计). 贡献者 贡献者 中文翻译 ...
- angular中的子路由用法
Angular ui-route的用法 引入angular和使用angular子路由时需要的依赖模块angular-ui-route.js.并且在html中将路由要插入的位置写上.而在js部分中和an ...