Bootstarp（二）——进度条，分页，列表组，下拉菜单，折叠（手风琴demo）

一、进度条

1.创建一个基本的进度条

<div class = "progress">
	<div class = "progress-bar" style = "width:70%"></div>
</div>

2.进度条不同样式demo

进度条高度默认为 16px，可以在进度条内添加文本，默认情况下进度条为蓝色，Bootstrap4 还提供了.bg-success,.bg-info,.bg-warning,.bg-danger四种颜色，可以使用 .progress-bar-striped类来设置条纹进度条，使用.progress-bar-animated 类可以为进度条添加动画。执行以下代码：

<div class="container">
	<div class = "progress">
		<div class = "progress-bar" style = "width:70%"></div>
	</div>
	<br>
	<div class = "progress">
		<div class = "progress-bar" style = "width:55%;" id = "d">带文本的进度条</div>
	</div>
	<br>
	<div class = "progress">
		<div class = "progress-bar bg-danger" style = "width:70%;">带文本的进度条</div>
	</div>
	<br>
	<div class = "progress">
		<div class = "progress-bar bg-danger text-primary" style = "width:70%;">带文本的进度条</div>
	</div>
	<br>
	<div class = "progress">
		<div class = "progress-bar-striped bg-danger text-primary" style = "width:70%;">带文本的进度条</div>
	</div>
	<br>
	<div class = "progress">
		<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
	</div>
	<br>
	<div class = "progress">
		<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%">20%</div>
		<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 70%">55%</div>
		<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 90%">100%</div>
	</div>
</div>

二、分页

1.创建一个基本的分页

<div class="container">
	<ul class="pagination">
		<li class="page-item"><a class="page-link" href="#">Previous</a></li>
		<li class="page-item"><a class="page-link" href="#">1</a></li>
		<li class="page-item"><a class="page-link" href="#">2</a></li>
		<li class="page-item"><a class="page-link" href