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

Tutoriel de base Bootstrap

Extension Bootstrap

Extension de surveillance de défilement (Scrollspy) de Bootstrap

L'extension de surveillance de défilement (Scrollspy) de Bootstrap, qui met à jour automatiquement l'extension de navigation, met à jour automatiquement les objectifs de navigation en fonction de la position de la barre de défilement. Sa mise en œuvre de base consiste à ajouter à la barre de navigation, en fonction de la position de la barre de défilement, au fur et à mesure que vous faites défiler .active class。

Si vous souhaitez utiliser séparément les fonctionnalités de cet plugin, vous devez引用 scrollspy.js。Ou comme Aperçu des plugins Bootstrap comme mentionné dans le chapitre bootstrap.js ou la version compressée bootstrap.min.js。

Utilisation

Vous pouvez ajouter un comportement d'écoute de défilement en haut de la navigation :

  • à travers l'attribut data：Ajoutez à l'élément que vous souhaitez surveiller (généralement le body) data-spy="scroll"Puis ajoutez l'élément avec Bootstrap .nav ID ou attribut de classe du parent du composant data-ciblePour que cela fonctionne correctement, vous devez vous assurer qu'il existe un élément correspondant à l'ID du lien que vous souhaitez surveiller dans le corps de la page.

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

  • via JavaScript：Vous pouvez appeler la surveillance de défilement via JavaScript, sélectionner l'élément à surveiller, puis appeler .scrollspy() Fonction :

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

Exemples en ligne

Les exemples suivants montrent l'utilisation du plugin surveillance de défilement (Scrollspy) via l'attribut de données :

Exemples en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemple Bootstrap　-　Plugin surveillance de défilement (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" classe="navbar navbar-navbar par défaut-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">Basculer la navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nom de l'équipe de tutoriel</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-cible="#navbar-example" données-offset="0"　
	　style="height:200px;overflow:auto; position: relative;">
	<h4　id="ios">iOS</h4>
	<p>iOS　是一个由苹果公司开发和发布的手机操作系统。最初是于　2007　年首次发布　iPhone、iPod　Touch　和　Apple　
		TV. iOS est dérivé de OS X, ils partagent la base Darwin. OS X est le système d'exploitation utilisé sur les ordinateurs Apple, iOS est la version mobile d'Apple.
	</p>
	<h4　id="svn">SVN</h4>
	<p>Apache　Subversion，通常缩写为　SVN，是一款开源的版本控制系统软件。Subversion　由　CollabNet　公司在　2000 a été créé. Mais maintenant, il est devenu un projet de la Fondation Apache, donc il a une communauté de développeurs et d'utilisateurs riche.
	</p>
	<h4　id="jmeter">jMeter</h4>
	<p>jMeter　是一款开源的测试软件。它是　10Application pure Java à 100% utilisée pour les tests de charge et de performance.
	</p>
	<h4　id="ejb">EJB</h4>
	<p>Enterprise　Java　Beans(EJB)是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如　JBOSS、Web　Logic　等）的　J2EE.
	</p>
	<h4　id="spring">Spring</h4>
	<p>Le cadre Spring est une plateforme Java open source, qui fournit un soutien complet en infrastructure pour le développement rapide d'applications Java puissantes.
	</p>
	<p>Spring　框架最初是由　Rod　Johnson　编写的，在　2003　年　6　月首次发布于　Apache　2.0 sous licence.
	</p>
</div>
</body>
</html>
Vérifiez et voyez si le préfixe <a href="#section">Section</a> fonctionne correctement/›

Les résultats sont affichés comme suit :

Options

Transmis par l'attribut de données ou JavaScript. Le tableau suivant liste ces options :

Nom de l'optionType/Valeur par défautNom de l'attribut de donnéesDescription
offsetnumber
Valeur par défaut :10		data-offsetl'offset en pixels de la distance par rapport au sommet lors du calcul de la position de défilement.

méthode

.scrollspy('refresh')：Lorsque vous appelez la méthode scrollspy via JavaScript, vous devez appeler .refresh Méthode pour mettre à jour le DOM. C'est très utile lorsque des éléments DOM sont modifiés (c'est-à-dire, que vous avez ajouté ou supprimé certains éléments). Voici la syntaxe de cette méthode.

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

Exemples en ligne

Les exemples suivants montrent .scrollspy('refresh') L'utilisation de la méthode :

Exemples en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemple Bootstrap　-　Plugin méthode de surveillance de défilement (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-navbar par défaut-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">Basculer la navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nom de l'équipe de tutoriel</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>
Vérifiez et voyez si le préfixe <a href="#section">Section</a> fonctionne correctement/›

Les résultats sont affichés comme suit :

Événement

Le tableau suivant liste les événements utilisés dans la surveillance de défilement. Ces événements peuvent être utilisés comme hooks dans les fonctions.

ÉvénementDescriptionExemple
activate.bs.scrollspyQuand un nouvel élément est activé par la surveillance de défilement, cet événement est déclenché.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
　　//　exécuter certaines actions...
});

Exemples en ligne

Les exemples suivants montrent activate.bs.scrollspy Utilisation des événements :

Exemples en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemple Bootstrap　-　Événements du plugin de surveillance de défilement (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-navbar par défaut-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">Basculer la navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nom de l'équipe de tutoriel</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("Vous regardez actuellement　-　"　+　currentItem);
		});
});
</<script>
</body>
</html>
Vérifiez et voyez si le préfixe <a href="#section">Section</a> fonctionne correctement/›

Les résultats sont affichés comme suit :

Plus d'exemples

Créer un écouteur de défilement horizontal

Les exemples suivants montrent comment créer un écouteur de défilement horizontal:

Exemples en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example</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="#">NomDeSiteWeb</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a href="#section"</a></li>1">Section　1</a></li>
					<li><a href="#section"</a></li>2">Section　2</a></li>
					<li><a href="#section"</a></li>3">Section　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"</a></li>41">Section　4-1</a></li>
							<li><a href="#section"</a></li>42">Section　4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div id="section1" class="container-fluid">
	<h1>Section　1</h1>
	<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
	<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
	</div>
	<div id="section2" class="container-fluid">
		<h1>Section　2</h1>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
	</div>
	<div id="section3" class="container-fluid">
		<h1>Section　3</h1>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
	</div>
	<div id="section41" class="container-fluid">
		<h1>Section　4　Sous-menu　1</h1>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
	</div>
	<div id="section42" class="container-fluid">
		<h1>Section　4　Sous-menu　2</h1>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
		<p>Essaie de faire défiler cette partie et regarde la barre de navigation pendant que tu fais défiler! Essaie de faire défiler cette partie, et regarde la barre de navigation pendant que tu fais défiler !/p>
</div>
</body>
</html>
Vérifiez et voyez si le préfixe <a href="#section">Section</a> fonctionne correctement/›

Comment créer un écouteur de défilement vertical

Les exemples suivants montrent comment créer un écouteur de défilement vertical:

Exemples en ligne

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap exemple</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="#section1">Section　1</a></li>
				<li><a href="#section"</a></li>2">Section　2</a></li>
				<li><a href="#section"</a></li>3">Section　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"</a></li>41">Section　4-1</a></li>
						<li><a href="#section"</a></li>42">Section　4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div class="col-sm-9">
			<div id="section1">　　　　
				<h1>Section　1</h1>
				<p>Essayer de faire défiler cette partie et de vérifier la liste de navigation pendant que vous faites défiler!/p>
			</div>
			<div id="section2">　
				<h1>Section　2</h1>
				<p>Essayer de faire défiler cette partie et de vérifier la liste de navigation pendant que vous faites défiler!/p>
			</div>　　　　　　　　
			<div id="section3">　　　　　　　　　
				<h1>Section　3</h1>
				<p>Essayer de faire défiler cette partie et de vérifier la liste de navigation pendant que vous faites défiler!/p>
			</div>
			<div id="section41">　　　　　　　　　
				<h1>Section　4-1</h1>
				<p>Essayer de faire défiler cette partie et de vérifier la liste de navigation pendant que vous faites défiler!/p>
			</div>　　　　　　
			<div id="section42">　　　　　　　　　
				<h1>Section　4-2</h1>
				<p>Essayer de faire défiler cette partie et de vérifier la liste de navigation pendant que vous faites défiler!/p>
			</div>
		</div>
	</div>
</div>
</body>
</html>
Vérifiez et voyez si le préfixe <a href="#section">Section</a> fonctionne correctement/›
Plugin de onglets BootstrapPlugin de menu déroulant Bootstrap