English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Plugin de escaneo de desplazamiento (Scrollspy) de Bootstrap

El plugin de escaneo de desplazamiento (Scrollspy), que actualiza automáticamente el plugin de navegación, actualiza los objetivos de navegación correspondientes según la posición de la barra de desplazamiento. Su implementación básica es agregar a la barra de navegación, en función de la posición de la barra de desplazamiento, a medida que se desplaza. .active class。

Si desea referenciar únicamente las funciones de este plugin,则需要引用 scrollspy.js。O como Resumen de plugins Bootstrap como se mencionó en el capítulo anterior, puede referenciar bootstrap.js o la versión comprimida bootstrap.min.js。

Uso

Puede agregar el comportamiento de escaneo de desplazamiento al menú superior:

  • a través de la propiedad data：Agregue al elemento que desea monitorear (generalmente el cuerpo) data-spy="scroll"Luego, agregue Bootstrap .nav ID o atributo de clase del elemento padre del componente data-target. Para que funcione correctamente, debe asegurarse de que exista un elemento en el cuerpo de la página que coincida con el ID del enlace que desea monitorear.

    <body data-spy="scroll" data-target=".navbar-example">
...
<div>
　　　　<ul>
　　　　　　　　...
　　　　</ul>
</div>
...
</body>

  • A través de JavaScriptPuede llamar al scrollspy a través de JavaScript, seleccionar el elemento que desea monitorear y luego llamar .scrollspy() Función:

    $('body').scrollspy({ target: '.navbar-example' })

Ejemplo en línea

El siguiente ejemplo muestra cómo usar el plugin de escaneo de desplazamiento (Scrollspy) a través de atributo de datos:

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Ejemplo de Bootstrap　-　Plugin de escaneo de desplazamiento (Scrollspy)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/<script>
</head>
<body>
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container"-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">Cambiar Navegación</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nombre del Tutorial</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>
	</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 se deriva de OS X, y ambos comparten la base Darwin. El sistema operativo OS X se utiliza en computadoras Apple, y iOS es la versión móvil de Apple.
	</p>
	<h4　id="svn">SVN</h4>
	<p>Apache　Subversion，通常缩写为　SVN，是一款开源的版本控制系统软件。Subversion　由　CollabNet　公司在　2000 año fue creado. Pero ahora se ha convertido en un proyecto de Apache Software Foundation, por lo que tiene una gran comunidad de desarrolladores y usuarios.
	</p>
	<h4　id="jmeter">jMeter</h4>
	<p>jMeter　是一款开源的测试软件。它是　10Aplicación pura de Java del 0% para pruebas de carga y rendimiento.
	</p>
	<h4　id="ejb">EJB</h4>
	<p>Enterprise　Java　Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如　JBOSS、Web　Logic　等）的　J2EE.
	</p>
	<h4　id="spring">Spring</h4>
	<p>El marco Spring es una plataforma de Java de código abierto, que proporciona un soporte completo de infraestructura para el desarrollo rápido de aplicaciones Java potentes.
	</p>
	<p>Spring　框架最初是由　Rod　Johnson　编写的，在　2003　年　6　月首次发布于　Apache　2Bajo la licencia.
	</p>
</div>
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:

Opciones

Puede transmitir estas opciones a través de atributo de datos o JavaScript. A continuación se muestra una tabla con estas opciones:

Nombre de opciónTipo/Por defecto:Nombre de atributo de datosDescripción
offsetnúmero
Por defecto:10		data-offsetLa distancia en píxeles desde el margen superior al calcular la posición de desplazamiento.

método

.scrollspy('refresh')Cuando se llama al método scrollspy a través de JavaScript, debe llamar .refresh Método para actualizar el DOM. Esto es muy útil cuando se produce un cambio en cualquier elemento del DOM (es decir, cuando agregue o elimine algunos elementos). A continuación se muestra la sintaxis de uso de este método.

$('[data-spy="scroll"]').each(function () {
　　var $spy = $(this).scrollspy('refresh')}
});

Ejemplo en línea

El siguiente ejemplo muestra .scrollspy('refresh') El uso del método:

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejemplo de Bootstrap　-　Plugin método de escaneo de desplazamiento (Scrollspy)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/<script>
</head>
<body>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container"-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">Cambiar Navegación</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nombre del Tutorial</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><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>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<div　class="section">
		<h4　id="ios">iOS<sub><a href="#" onclick="removeSection(this);">
			×　删除该部分</a></small>
		</h4>
		<p>iOS　是一个由苹果公司开发和发布的手机操作系统。最初是于　2007　年首次发布　iPhone、iPod　Touch　和　Apple　
			TV。iOS　派生自　OS　X，它们共享　Darwin　基础。OS　X　操作系统是用在苹果电脑上，iOS　是苹果的移动版本。</p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small></small></h4>
		<p>Apache　Subversion，通常缩写为　SVN，是一款开源的版本控制系统软件。Subversion　由　CollabNet　公司在　2000　年创建。但是现在它已经发展为　Apache　Software　Foundation　的一个项目，因此拥有丰富的开发人员和用户社区。</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　删除该部分</a></small>
		</h4>
		<p>jMeter　是一款开源的测试软件。它是　100%　纯　Java　应用程序，用于负载和性能测试。</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise　Java　Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如　JBOSS、Web　Logic　等）的　J2EE　上。</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>Spring　框架是一个开源的　Java　平台，为快速开发功能强大的　Java　应用程序提供了完备的基础设施支持。</p>
		<p>Spring　框架最初是由　Rod　Johnson　编写的，在　2003　年　6　月首次发布于　Apache　2.0　许可下。</p>
	</div>
</div>
<script　type="text/javascript">
	$(function(){
		removeSection　=　function(e)　{
			$(e).parents(".section").remove();
			$('[data-spy="scroll"]').each(function () {
				var $spy = $(this).scrollspy('refresh')}
				});
		}
		$("#myScrollspy").scrollspy();
});
</<script>
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:

Evento

La tabla a continuación enumera los eventos que se utilizan en el desplazamiento escuchado. Estos eventos se pueden usar como ganchos en las funciones.

EventoDescripciónEjemplo
activate.bs.scrollspySe dispara el evento cada vez que se activa un nuevo proyecto con el desplazamiento escuchado.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
　　//　ejecutar algunas acciones...
});

Ejemplo en línea

El siguiente ejemplo muestra activate.bs.scrollspy Uso del evento:

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ejemplo de Bootstrap　-　Evento de escucha de desplazamiento (Scrollspy) plug-in</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/<script>
</head>
<body>
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
	<div class="container"-fluid">　
		<div class="navbar-header">
			<button class="navbar-toggle" type="button" data-toggle="collapse"　
					data-target=".bs-js-navbar-scrollspy">
				<span class="sr-only">Cambiar Navegación</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nombre del Tutorial</a>
		</div>
		<div class="collapse navbar-collapse bs-js-navbar-scrollspy">
			<ul class="nav navbar-nav">
				<li class="active"><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>
	</div>
</nav>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<div　class="section">
		<h4　id="ios">iOS<sub><a href="#" onclick="removeSection(this);">
			×　删除该部分</a></small>
		</h4>
		<p>iOS　是一个由苹果公司开发和发布的手机操作系统。最初是于　2007　年首次发布　iPhone、iPod　Touch　和　Apple　
			TV。iOS　派生自　OS　X，它们共享　Darwin　基础。OS　X　操作系统是用在苹果电脑上，iOS　是苹果的移动版本。</p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small></small></h4>
		<p>Apache　Subversion，通常缩写为　SVN，是一款开源的版本控制系统软件。Subversion　由　CollabNet　公司在　2000　年创建。但是现在它已经发展为　Apache　Software　Foundation　的一个项目，因此拥有丰富的开发人员和用户社区。</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　删除该部分</a></small>
		</h4>
		<p>jMeter　是一款开源的测试软件。它是　100%　纯　Java　应用程序，用于负载和性能测试。</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise　Java　Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如　JBOSS、Web　Logic　等）的　J2EE　上。</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>Spring　框架是一个开源的　Java　平台，为快速开发功能强大的　Java　应用程序提供了完备的基础设施支持。</p>
		<p>Spring　框架最初是由　Rod　Johnson　编写的，在　2003　年　6　月首次发布于　Apache　2.0　许可下。</p>
	</div>
</div>
<span　id="activeitem"　style="color:red;"></span>
<script　type="text/javascript">
	$(function(){
		removeSection　=　function(e)　{
			$(e).parents(".section").remove();
			$('[data-spy="scroll"]').each(function () {
				var $spy = $(this).scrollspy('refresh')}
				});
		}
		$("#myScrollspy").scrollspy();
		$('#myScrollspy').on('activate.bs.scrollspy', function () {
			var currentItem = $(".nav li.active > a").text();
			$("#activeitem").html("Actualmente está viendo　-　"　+　currentItem);
		});
});
</<script>
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:

Más ejemplos

Crear una escucha de desplazamiento horizontal

Los siguientes ejemplos muestran cómo crear una escucha de desplazamiento horizontal:

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Ejemplo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/<script>
	<style>
		body {
			position: relative;　
		}
		#section1　{padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
		#section2　{padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
		#section3　{padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
		#section41　{padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
		#section42　{padding-top:50px;height:500px;color: #fff; background-color: #009688;}
	</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container"-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>　　　　　　　　　　　　　　　　　　　　　　　　
			</button">
			<a class="navbar-brand" href="#">NombreDelSitioWeb</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a　href="#section"1">Sección　1</a></li>
					<li><a　href="#section"2">Sección　2</a></li>
					<li><a　href="#section"3">Sección　3</a></li>
					<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section　4　<span class="caret"></span></a>
						<ul class="dropdown"-menu">
							<li><a　href="#section"41">Sección　4-1</a></li>
							<li><a　href="#section"42">Sección　4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div　id="section1" class="container-fluid">
	<h1>Sección　1</h1>
	<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
	<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
	</div>
	<div　id="section2" class="container-fluid">
		<h1>Sección　2</h1>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
	</div>
	<div　id="section3" class="container-fluid">
		<h1>Sección　3</h1>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
	</div>
	<div　id="section41" class="container-fluid">
		<h1>Sección　4　Submenú　1</h1>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
	</div>
	<div　id="section42" class="container-fluid">
		<h1>Sección　4　Submenú　2</h1>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
		<p>Intente desplazarse en esta sección y verá la barra de navegación al hacerlo! Intente desplazarse en esta sección y verá la barra de navegación al hacerlo!</p>
</div>
</body>
</html>
Prueba y observa ‹/›

Cómo crear una escucha de desplazamiento vertical

Los siguientes ejemplos muestran cómo crear una escucha de desplazamiento vertical:

Ejemplo en línea

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Ejemplo</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">/<script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">/<script>
	<style>
		body {
			position: relative;
		}
		ul.nav-pills {
			top:　20px;
			position: fixed;
		}
		div.col-sm-9　div {
			height:　250px;
			font-size:　28px;
		}
		#section1　{color: #fff; background-color: #1E88E5;}
		#section2　{color: #fff; background-color: #673ab7;}
		#section3　{color: #fff; background-color: #ff9800;}
		#section41　{color: #fff; background-color: #00bcd4;}
		#section42　{color: #fff; background-color: #009688;}
		@media screen and (max-width:　810px) {
			#section1, #section2, #section3, #section41, #section42　　{
				margin-left:　150px;
			}
		}
	</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
	<div class="row">
		<nav class="col"-sm-3" id="myScrollspy">
			<div class="container"-fluid">　
			<div class="container"-fluid">　
			<ul class="nav nav"-pills nav-stacked">
				<li class="active"><a href="#section"1">Sección　1</a></li>
				<li><a　href="#section"2">Sección　2</a></li>
				<li><a　href="#section"3">Sección　3</a></li>
				<li class="dropdown">
					<a class="dropdown"-toggle" data-toggle="dropdown" href="#">Section　4　<span class="caret"></span></a>
					<ul class="dropdown"-menu">
						<li><a　href="#section"41">Sección　4-1</a></li>
						<li><a　href="#section"42">Sección　4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div　class="col-sm-9">
			<div　id="section1">　　　　
				<h1>Sección　1</h1>
				<p>Pruebe a desplazarse por esta sección y observe la lista de navegación mientras se desplaza!/p>
			</div>
			<div　id="section2">　
				<h1>Sección　2</h1>
				<p>Pruebe a desplazarse por esta sección y observe la lista de navegación mientras se desplaza!/p>
			</div>　　　　　　　　
			<div　id="section3">　　　　　　　　　
				<h1>Sección　3</h1>
				<p>Pruebe a desplazarse por esta sección y observe la lista de navegación mientras se desplaza!/p>
			</div>
			<div　id="section41">　　　　　　　　　
				<h1>Sección　4-1</h1>
				<p>Pruebe a desplazarse por esta sección y observe la lista de navegación mientras se desplaza!/p>
			</div>　　　　　　
			<div　id="section42">　　　　　　　　　
				<h1>Sección　4-2</h1>
				<p>Pruebe a desplazarse por esta sección y observe la lista de navegación mientras se desplaza!/p>
			</div>
		</div>
	</div>
</div>
</body>
</html>
Prueba y observa ‹/›
Complemento de pestañas BootstrapComplemento de menú desplegable Bootstrap