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

Tutorial básico do Bootstrap

Plugin do Bootstrap

Plugin de monitoramento de rolagem (Scrollspy) do Bootstrap

O plugin de monitoramento de rolagem (Scrollspy), que atualiza automaticamente o plugin de navegação, atualiza automaticamente o alvo de navegação correspondente com base na posição da barra de rolagem. A sua implementação básica adiciona à barra de navegação com base na posição da barra de rolagem à medida que você rola .active class。

Se você deseja usar isoladamente as funcionalidades do plugin, precisará importar scrollspy.js。Ou, como Visão geral de plugins do Bootstrap como mencionado no capítulo bootstrap.js ou a versão comprimida bootstrap.min.js。

Uso

Você pode adicionar o comportamento de monitoramento de rolagem ao menu de navegação superior:

  • através da propriedade data：Adicione ao elemento que deseja monitorar (geralmente o body) data-spy="scroll"。Então, adicione o Bootstrap .nav ID ou atributo de classe do pai do componente data-target. Para que ele funcione corretamente, você deve garantir que haja um elemento correspondente ao ID do link que você deseja monitorar no corpo da página.

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

  • através do JavaScriptPode chamar o monitoramento de rolagem via JavaScript, escolher o elemento a ser monitorado e então chamar .scrollspy() Função:

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

Exemplos online

O exemplo a seguir demonstra o uso do plugin de monitoramento de rolagem (Scrollspy) através do atributo de dados:

Exemplos online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Plugin de monitoramento de rolagem (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">Alternar Navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nome do 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>O iOS é um sistema operacional móvel desenvolvido e lançado pela Apple. Originalmente foi lançado em　2007　ano pela primeira vez lançado iPhone, iPod Touch e Apple　
		TV. iOS deriva de OS X, compartilham a base Darwin. OS X é o sistema operacional usado em computadores Apple, iOS é a versão móvel da Apple.
	</p>
	<h4　id="svn">SVN</h4>
	<p>O Apache Subversion, geralmente abreviado como SVN, é um software de controle de versão open-source. O Subversion foi criado pela empresa CollabNet　2000 foi criado. Mas agora ele já se desenvolveu em um projeto da Apache Software Foundation, portanto, possui uma comunidade de desenvolvedores e usuários rica.
	</p>
	<h4　id="jmeter">jMeter</h4>
	<p>O jMeter é um software de teste open-source. Ele é　10Aplicativo Java puro de 0%, usado para testes de carga e desempenho.
	</p>
	<h4　id="ejb">EJB</h4>
	<p>Enterprise Java Beans (EJB) é uma arquitetura de desenvolvimento para criar aplicações empresariais altamente escaláveis e robustas, deployadas em servidores de aplicativos compatíveis (como JBOSS, Web Logic, etc.) no Java2EE.
	</p>
	<h4　id="spring">Spring</h4>
	<p>Spring Framework é uma plataforma de Java open-source, que oferece suporte completo para infraestrutura de desenvolvimento de aplicativos Java poderosos.
	</p>
	<p>O framework Spring foi originalmente escrito por Rod Johnson, na　2003　ano　6　mês pela primeira vez lançado no Apache　2Licença .0
	</p>
</div>
</body>
</html>
Teste Veja ‹/›

O resultado é mostrado a seguir:

Opções

Pode ser passada através de atributo de dados ou JavaScript. A tabela a seguir lista essas opções:

Nome da opçãoTipo/Padrão:Nome do atributo de dadosDescrição
offsetnumber
Padrão:10		data-offsetA distância em pixels do deslocamento do topo ao calcular a posição de rolagem.

método

.scrollspy('refresh')Quando você chama o método scrollspy via JavaScript, você precisa chamar .refresh Método para atualizar o DOM. Isso é muito útil quando ocorre alguma alteração no DOM (ou seja, você adiciona ou remove alguns elementos). Abaixo está a sintaxe do método.

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

Exemplos online

Os seguintes exemplos demonstram .scrollspy('refresh') Uso do método:

Exemplos online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　Plugin método de monitoramento de rolagem (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">Alternar Navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nome do 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);">
			×　remover esta parte</a></small>
		</h4>
		<p>O iOS é um sistema operacional móvel desenvolvido e lançado pela Apple. Originalmente foi lançado em　2007　ano pela primeira vez lançado iPhone, iPod Touch e Apple　
			TV. O iOS é derivado do OS X, compartilhando a base Darwin. O sistema operacional OS X é usado em computadores Apple, e o iOS é a versão móvel da Apple.</p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small>/small>/h4>
		<p>O Apache Subversion, geralmente abreviado como SVN, é um software de controle de versão open-source. O Subversion foi criado pela empresa CollabNet　2000 ano foi criado. Mas agora ele já se desenvolveu em um projeto da Apache Software Foundation, portanto possui uma comunidade de desenvolvedores e usuários rica.</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　remover esta parte</a></small>
		</h4>
		<p>O jMeter é um software de teste open-source. Ele é　100%　aplicações Java puras, usadas para testes de carga e desempenho.</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) é uma arquitetura de desenvolvimento para criar aplicações empresariais altamente escaláveis e robustas, deployadas em servidores de aplicativos compatíveis (como JBOSS, Web Logic, etc.) no Java2EE.</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>O framework Spring é uma plataforma Java open-source, que oferece suporte completo à infraestrutura para o desenvolvimento rápido de aplicações Java robustas.</p>
		<p>O framework Spring foi originalmente escrito por Rod Johnson, na　2003　ano　6　mês pela primeira vez lançado no Apache　2.0　licença.</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>
Teste Veja ‹/›

O resultado é mostrado a seguir:

Evento

A tabela a seguir lista os eventos usados no monitoramento de rolagem. Esses eventos podem ser usados como ganchos em funções.

EventoDescriçãoExemplo
activate.bs.scrollspyao ativar um novo item monitorado ao rolar, aciona o evento.
$('#myScrollspy').on('activate.bs.scrollspy', function () {
　　//　executar algumas ações...
});

Exemplos online

Os seguintes exemplos demonstram activate.bs.scrollspy Uso do Evento:

Exemplos online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Exemplo Bootstrap　-　Ouvintos de Plugin de Monitoramento de Rolar (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">Alternar Navegação</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Nome do 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);">
			×　remover esta parte</a></small>
		</h4>
		<p>O iOS é um sistema operacional móvel desenvolvido e lançado pela Apple. Originalmente foi lançado em　2007　ano pela primeira vez lançado iPhone, iPod Touch e Apple　
			TV. O iOS é derivado do OS X, compartilhando a base Darwin. O sistema operacional OS X é usado em computadores Apple, e o iOS é a versão móvel da Apple.</p>
	</div>
	<div　class="section">
		<h4　id="svn">SVN<small>/small>/h4>
		<p>O Apache Subversion, geralmente abreviado como SVN, é um software de controle de versão open-source. O Subversion foi criado pela empresa CollabNet　2000 ano foi criado. Mas agora ele já se desenvolveu em um projeto da Apache Software Foundation, portanto possui uma comunidade de desenvolvedores e usuários rica.</p>
	</div>
	<div　class="section">
		<h4　id="jmeter">jMeter<small><a　href="#"　onclick="removeSection(this);">
			×　remover esta parte</a></small>
		</h4>
		<p>O jMeter é um software de teste open-source. Ele é　100%　aplicações Java puras, usadas para testes de carga e desempenho.</p>
	</div>
	<div　class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise Java Beans (EJB) é uma arquitetura de desenvolvimento para criar aplicações empresariais altamente escaláveis e robustas, deployadas em servidores de aplicativos compatíveis (como JBOSS, Web Logic, etc.) no Java2EE.</p>
	</div>
	<div　class="section">
		<h4　id="spring">Spring</h4>
		<p>O framework Spring é uma plataforma Java open-source, que oferece suporte completo à infraestrutura para o desenvolvimento rápido de aplicações Java robustas.</p>
		<p>O framework Spring foi originalmente escrito por Rod Johnson, na　2003　ano　6　mês pela primeira vez lançado no Apache　2.0　licença.</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("Você está visualizando atualmente　-　"　+　currentItem);
		});
});
</<script>
</body>
</html>
Teste Veja ‹/›

O resultado é mostrado a seguir:

Mais exemplos

Criar uma escroll horizontal de monitoramento

Os seguintes exemplos demonstram como criar uma escroll horizontal de monitoramento:

Exemplos online

<!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="#">NomeDoSite</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a　href="#section"1">Seção　1</a></li>
					<li><a　href="#section"2">Seção　2</a></li>
					<li><a　href="#section"3">Seção　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">Seção　4-1</a></li>
							<li><a　href="#section"42">Seção　4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div　id="section1" class="container-fluid">
	<h1>Seção　1</h1>
	<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
	<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
	</div>
	<div　id="section2" class="container-fluid">
		<h1>Seção　2</h1>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
	</div>
	<div　id="section3" class="container-fluid">
		<h1>Seção　3</h1>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
	</div>
	<div　id="section41" class="container-fluid">
		<h1>Seção　4　Submenu　1</h1>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
	</div>
	<div　id="section42" class="container-fluid">
		<h1>Seção　4　Submenu　2</h1>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
		<p>Tente rolar esta parte e ver a barra de navegação enquanto rola! Tente rolar esta parte e ver a barra de navegação enquanto rola!</p>
</div>
</body>
</html>
Teste Veja ‹/›

Como criar uma escroll vertical de monitoramento

Os seguintes exemplos demonstram como criar uma escroll vertical de monitoramento:

Exemplos online

<!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;
		}
		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">Seção　1</a></li>
				<li><a　href="#section"2">Seção　2</a></li>
				<li><a　href="#section"3">Seção　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">Seção　4-1</a></li>
						<li><a　href="#section"42">Seção　4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div　class="col-sm-9">
			<div　id="section1">　　　　
				<h1>Seção　1</h1>
				<p>Tente rolar esta parte e veja a lista de navegação enquanto rola!>/p>
			</div>
			<div　id="section2">　
				<h1>Seção　2</h1>
				<p>Tente rolar esta parte e veja a lista de navegação enquanto rola!>/p>
			</div>　　　　　　　　
			<div　id="section3">　　　　　　　　　
				<h1>Seção　3</h1>
				<p>Tente rolar esta parte e veja a lista de navegação enquanto rola!>/p>
			</div>
			<div　id="section41">　　　　　　　　　
				<h1>Seção　4-1</h1>
				<p>Tente rolar esta parte e veja a lista de navegação enquanto rola!>/p>
			</div>　　　　　　
			<div　id="section42">　　　　　　　　　
				<h1>Seção　4-2</h1>
				<p>Tente rolar esta parte e veja a lista de navegação enquanto rola!>/p>
			</div>
		</div>
	</div>
</div>
</body>
</html>
Teste Veja ‹/›
Plugin de Aba BootstrapPlugin de Menu Suspenso Bootstrap