一、进度条
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列表组上使用。
当需要对<body>以外的元素进行监控时，请确保具有 height 高度值和 overflow-y: scroll; 属性。
锚点 (<a>)是必须的，并且必须指向一个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);
})
1454
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
