Bootstrap Basic Tutorial

Bootstrap Plugin

Bootstrap Tabs Plugin Bootstrap Dropdown Plugin

Bootstrap Scrollspy (Scrollspy) Plugin

The Scrollspy plugin, which is an automatic update navigation plugin, will automatically update the corresponding navigation target based on the position of the scroll bar. Its basic implementation is to add the navigation bar based on the position of the scroll bar as you scroll .active class.

If you want to refer to the functionality of this plugin alone, then you need to refer to scrollspy.js. Or as Bootstrap Plugin Overview As mentioned in the chapter mentioned earlier, you can refer to bootstrap.js or the compressed version bootstrap.min.js.

Usage

You can add a scroll listening behavior to the top navigation:

via the data attributeto the element you want to listen to (usually body) data-spy="scroll"Then add Bootstrap with .nav The ID or class attribute of the parent element of the component data-target. To ensure it works properly, you must make sure that there is an element with the ID matching the link you want to monitor in the main body of the page.
```
<body data-spy="scroll" data-target=".navbar-example">
...
<div>
　　　　<ul>
　　　　　　　　...
　　　　</ul>
</div>
...
</body>
```
Through JavaScriptYou can call scrollspy through JavaScript, select the element to be monitored, and then call .scrollspy() Function:
```
$('body').scrollspy({ target: '.navbar-example')}
```

Online Examples

The following example demonstrates the use of the Scrollspy plugin through data attributes:

Online Examples

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example<　-　Scrollspy Plugin </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">Toggle Navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Tutorial Name</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 is a mobile operating system developed and released by Apple Inc. Initially it was released in　2007　Year first released iPhone, iPod Touch, and Apple　
		TV. iOS is derived from OS X, and they share the Darwin foundation. OS X is the operating system used on Apple computers, and iOS is Apple's mobile version.
	</p>
	<h4　id="svn">SVN</h4>
	<p>Apache Subversion, usually abbreviated as SVN, is an open-source version control system software. Subversion was developed by CollabNet Inc.　2000 was created. But now it has developed into a project of the Apache Software Foundation, so it has a rich developer and user community.
	</p>
	<h4　id="jmeter">jMeter</h4>
	<p>jMeter is an open-source testing software. It is　10A pure Java application used for load and performance testing.
	</p>
	<h4　id="ejb">EJB</h4>
	<p>Enterprise JavaBeans (EJB) is a development architecture for creating highly scalable and robust enterprise-level applications, deployed on compatible application servers (such as JBOSS, Web Logic, etc.) on the J2EE.
	</p>
	<h4　id="spring">Spring</h4>
	<p>Spring Framework is an open-source Java platform that provides comprehensive infrastructure support for quickly developing powerful Java applications.
	</p>
	<p>The Spring Framework was originally written by Rod Johnson, in　2003　Year　6　Month first released on Apache　2License under.
	</p>
</div>
</body>
</html>

Test it out ‹/›

The result is as shown below:

Options

These options can be passed through data attributes or JavaScript. The following table lists these options:

Option name	Type/Default value	Data attribute name	Description
offset	number Default value:10	data-offset	The offset in pixels from the top when calculating the scroll position.

method

.scrollspy('refresh')When calling the scrollspy method through JavaScript, you need to call .refresh This method is used to update the DOM. It is very useful when any element in the DOM changes (i.e., you add or remove some elements). Below is the syntax for using this method.

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

Online Examples

The following examples demonstrate .scrollspy('refresh') Usage of the method:

Online Examples

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example<　-　Scrollspy Plugin Method </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">Toggle Navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Tutorial Name</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<small><a href="#" onclick="removeSection(this);">
			× Delete this section</a></small>
		</h4>
		<p>iOS is a mobile operating system developed and released by Apple Inc. Initially it was released in　2007　Year first released iPhone, iPod Touch, and Apple　
			TV. iOS is derived from OS X, and they share the Darwin foundation. OS X operating system is used on Apple computers, and iOS is Apple's mobile version.</p>
	</div>
	<div class="section">
		<h4　id="svn">SVN<small>/small>/h4>
		<p>Apache Subversion, usually abbreviated as SVN, is an open-source version control system software. Subversion was developed by CollabNet Inc.　2000 Year created. But now it has developed into a project of Apache Software Foundation, so it has a rich developer and user community.</p>
	</div>
	<div class="section">
		<h4　id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
			× Delete this section</a></small>
		</h4>
		<p>jMeter is an open-source testing software. It is　10100% pure Java application for load and performance testing.</p>
	</div>
	<div class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise JavaBeans (EJB) is a development architecture for creating highly scalable and robust enterprise-level applications, deployed on compatible application servers (such as JBOSS, Web Logic, etc.) on the J2EE.</p>
	</div>
	<div class="section">
		<h4　id="spring">Spring</h4>
		<p>The Spring Framework is an open-source Java platform that provides comprehensive infrastructure support for rapid development of powerful Java applications.</p>
		<p>The Spring Framework was originally written by Rod Johnson, in　2003　Year　6　Month first released on Apache　2.0 License.</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>

Test it out ‹/›

The result is as shown below:

Event

The following table lists the events used in scrollspy. These events can be used as hooks in functions.

Event	Description	Example
activate.bs.scrollspy	This event is triggered whenever a new item is activated by the scrollspy.	$('#myScrollspy').on('activate.bs.scrollspy', function () { 　　//　Performing some actions... });

Online Examples

The following examples demonstrate activate.bs.scrollspy Usage of Events:

Online Examples

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example<　-　Scrollspy Plugin Event</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">Toggle Navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button">
			<a class="navbar-brand" href="#">Tutorial Name</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<small><a href="#" onclick="removeSection(this);">
			× Delete this section</a></small>
		</h4>
		<p>iOS is a mobile operating system developed and released by Apple Inc. Initially it was released in　2007　Year first released iPhone, iPod Touch, and Apple　
			TV. iOS is derived from OS X, and they share the Darwin foundation. OS X operating system is used on Apple computers, and iOS is Apple's mobile version.</p>
	</div>
	<div class="section">
		<h4　id="svn">SVN<small>/small>/h4>
		<p>Apache Subversion, usually abbreviated as SVN, is an open-source version control system software. Subversion was developed by CollabNet Inc.　2000 Year created. But now it has developed into a project of Apache Software Foundation, so it has a rich developer and user community.</p>
	</div>
	<div class="section">
		<h4　id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
			× Delete this section</a></small>
		</h4>
		<p>jMeter is an open-source testing software. It is　10100% pure Java application for load and performance testing.</p>
	</div>
	<div class="section">
		<h4　id="ejb">EJB</h4>
		<p>Enterprise JavaBeans (EJB) is a development architecture for creating highly scalable and robust enterprise-level applications, deployed on compatible application servers (such as JBOSS, Web Logic, etc.) on the J2EE.</p>
	</div>
	<div class="section">
		<h4　id="spring">Spring</h4>
		<p>The Spring Framework is an open-source Java platform that provides comprehensive infrastructure support for rapid development of powerful Java applications.</p>
		<p>The Spring Framework was originally written by Rod Johnson, in　2003　Year　6　Month first released on Apache　2.0 License.</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("Currently you are viewing　-　"　+　currentItem);
		});
});
</<script>
</body>
</html>

Test it out ‹/›

The result is as shown below:

More examples

Create horizontal scroll event listeners

The following examples demonstrate how to create horizontal scroll event listeners:

Online Examples

Example

<!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="#">WebSiteName</a>
		</div>
		<div>
			<div class="collapse navbar-collapse" id="myNavbar">
				<ul class="nav navbar-nav">
					<li><a href="#section1">Section　1</a></li>
					<li><a href="#section2">Section　2</a></li>
					<li><a href="#section3">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="#section41">Section　4-1</a></li>
							<li><a href="#section42">Section　4-2</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>　　　　
<div id="section1" class="container-fluid">
	<h1>Section　1</h1>
	<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
	<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
	</div>
	<div id="section2" class="container-fluid">
		<h1>Section　2</h1>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
	</div>
	<div id="section3" class="container-fluid">
		<h1>Section　3</h1>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
	</div>
	<div id="section41" class="container-fluid">
		<h1>Section　4　Submenu　1</h1>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
	</div>
	<div id="section42" class="container-fluid">
		<h1>Section　4　Submenu　2</h1>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
		<p>Try scrolling this section and observe the navigation bar while scrolling! Try scrolling this section, and observe the navigation bar while scrolling!/p>
</div>
</body>
</html>

Test it out ‹/›

How to create vertical scroll event listeners

The following examples demonstrate how to create vertical scroll event listeners:

Online Examples

Example

<!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="#section1">Section　1</a></li>
				<li><a href="#section2">Section　2</a></li>
				<li><a href="#section3">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="#section41">Section　4-1</a></li>
						<li><a href="#section42">Section　4-2</a></li>　　　　　　　　　　　　　　　　　　　　　
					</ul>
				</li>
			</ul>
			</div>	
			</div>		
		</nav>
		<div class="col-sm-9">
			<div id="section1">　　　　
				<h1>Section　1</h1>
				<p>Try to scroll this section and check the navigation list while scrolling!>/p>
			</div>
			<div id="section2">　
				<h1>Section　2</h1>
				<p>Try to scroll this section and check the navigation list while scrolling!>/p>
			</div>　　　　　　　　
			<div id="section3">　　　　　　　　　
				<h1>Section　3</h1>
				<p>Try to scroll this section and check the navigation list while scrolling!>/p>
			</div>
			<div id="section41">　　　　　　　　　
				<h1>Section　4-1</h1>
				<p>Try to scroll this section and check the navigation list while scrolling!>/p>
			</div>　　　　　　
			<div id="section42">　　　　　　　　　
				<h1>Section　4-2</h1>
				<p>Try to scroll this section and check the navigation list while scrolling!>/p>
			</div>
		</div>
	</div>
</div>
</body>
</html>

Test it out ‹/›

Bootstrap Tabs Plugin Bootstrap Dropdown Plugin