Bootstrap组件——进度条、滚动监控

一、进度条

1.基础

使用 .progress 容器来指定进度条的最大值。
使用 .progress-bar 来表示当前的进度。
.progress-bar 要求的内嵌样式，使用全局实用CSS或自定义CSS来设置其宽度。

<div class="progress">	
	<!-- 
		.progress-bar	当前的进度
			1、弹性盒模型。还添加了过渡效果。需要给它指定一个宽度。通过行间样式或者预定义class都行
		-->
	<div class="progress-bar" style="width: 25%"></div>	
</div>

2.高度

我们只在.progress上设置了一个height值，所以如果你改变了这个值，那么内部的 .progress-bar 高度会自动调整大小。

<!-- 通过父级添加高度后，子级也会继承使用 -->
<div class="progress mt-2" style="height: 50px;">
	<div class="progress-bar" style="width: 75%"></div>
</div>

3.背景

<div class="progress mt-2">
	<div class="progress-bar bg-success" style="width: 90%"></div>
</div>
<div class="progress mt-2">
	<div class="progress-bar bg-danger" style="width: 90%"></div>
</div>

4.多进度条进度（嵌套）

<div class="progress mt-2" style="height: 50px;">
	<div class="progress-bar" style="width: 15%"></div>
	<div class="progress-bar bg-warning" style="width: 30%"></div>
	<div class="progress-bar bg-info" style="width: 20%"></div>
</div>

5.条纹进度指示

<div class="progress mt-5">
	<div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress mt-2">
	<div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress mt-2">
	<div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>

6.动画条纹进度条

<div class="progress mt-5">
	<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>
<div class="progress mt-2">
	<div class="progress-bar progress-bar-striped progress-bar-animated bg-info" style="width: 55%"></div>
</div>

二、滚动监听

必须在Bootstrap nav 导航组年 或 list group列表组上使用。
当需要对 以外的元素进行监控时，请确保具有 height 高度值和 overflow-y: scroll; 属性。
锚点 ()是必须的，并且必须指向一个id上。

1.在navbar导航中

<div class="row mt-5">
	<div class="col">
		<!-- 在导航当中的滚动 -->
		<nav class="navbar navbar-light bg-light" id="scroll1">	<!-- 这个id是要与下面的内容相对应 -->
			<a href="#" class="navbar-brand">Navbar</a>
			<ul class="nav nav-pills">	<!-- 胶囊式导航 -->
				<li class="nav-item">
					<a class="nav-link" href="#fat">@fat</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#mdo">@mdo</a>
				</li>
				<li class="nav-item dropdown">
					<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Dropdown</a>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="#one">one</a>
						<a class="dropdown-item" href="#two">two</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#three">three</a>
					</div>
				</li>
			</ul>
		</nav>
		<!-- 
			滚动元素
				1、它不是body元素，所以身上要添加两条样式，heigh与overflow-y
				2、data-spy="scroll"。让这个元素具有滚动监听的js功能
				3、data-target="#scroll1"	监听的那个导航的id
				4、data-offset="0"	计算滚动位置时的偏移量。值为0，就表示从0的位置就开始计算
				5、上面结构中每一个导航都有一个#id。那在这块的内容区域就需要有一个标题具有一个id，与上面的值一一对应的
			-->
		<div class="scrollBody" data-spy="scroll" data-target="#scroll1" data-offset="0">
			<h4 id="fat">@fat</h4>
			<p>Ad leggings keytar, brunch id art party dolor </p>
			<h4 id="mdo">@mdo</h4>
			<p>Veniam marfa mustache skateboard, adipisicing</p>
			<h4 id="one">one</h4>
			<p>Occaecat commodo aliqua delectus. Fap craft</p>
			<h4 id="two">two</h4>
			<p>In incididunt echo park, officia deserunt </p>
			<h4 id="three">three</h4>
			<p>Ad leggings keytar, brunch id art party dolor </p>
		</div>
	</div>
</div>

2.嵌套的导航

<div class="row mt-5">
	<div class="col-4">
		<nav class="navbar navbar-light bg-light flex-column" id="scroll2">
			<a class="navbar-brand" href="#">Navbar</a>
			<nav class="nav nav-pills flex-column">
				<a class="nav-link" href="#item-1">Item 1</a>
				<nav class="nav nav-pills flex-column">
					<a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
					<a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
				</nav>
				<a class="nav-link" href="#item-2">Item2</a>
				<a class="nav-link" href="#item-3">Item3</a>
				<nav class="nav nav-pills flex-column">
					<a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
					<a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
				</nav>
			</nav>
		</nav>
	</div>
	<div class="col-8">
		<div class="scrollBody2" data-spy="scroll" data-target="#scroll2" data-offset="0">
			<h4 id="item-1">Item 1</h4>
			<p>Ex consequat commodo adipisicing exercitation aute excepteur </p>
			<h5 id="item-1-1">Item 1-1</h5>
			<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea</p>
			<h5 id="item-1-2">Item 1-2</h5>
			<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate </p>
			<h4 id="item-2">Item 2</h4>
			<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate</p>
			<h4 id="item-3">Item 3</h4>
			<p>Quis anim sit do amet fugiat dolor velit sit ea ea do</p>
			<h5 id="item-3-1">Item 3-1</h5>
			<p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim </p>
			<h5 id="item-3-2">Item 3-2</h5>
			<p>Labore sit culpa commodo elit adipisicing sit aliquip elit </p>
		</div>
	</div>
</div>

3.列表组

<div class="row mt-5">
	<div class="col-4">
		<div class="list-group" id="list-example">
			<!-- .list-group-item-action，这个是提供了链接的颜色以及hover时的颜色  -->
			<a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
			<a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
			<a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
			<a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
		</div>
	</div>
	<div class="col-8">
		<div class="scrollBody3" data-spy="scroll" data-target="#list-example" data-offset="0">
			<h4 id="list-item-1">Item 1</h4>
			<p>Ex consequat commodo adipisicing exercitation aute excepteur </p>
			<h4 id="list-item-2">Item 2</h4>
			<p>Quis magna Lorem anim amet ipsum do mollit sit cillum </p>
			<h4 id="list-item-3">Item 3</h4>
			<p>Quis anim sit do amet fugiat dolor velit sit ea ea do</p>
			<h4 id="list-item-4">Item 4</h4>
			<p>Quis anim sit do amet fugiat dolor velit sit ea ea do </p>
		</div>
	</div>
</div>
</div>

4.事件

每当新项目被滚动激活时，该事件就会在滚动元素上触发。

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
	// 每当滚动到一项的时候，就会触发
	console.log(1);
})