Bootstrap组件——加载、推送

一、加载

1.基础

<div class="col">
	<div class="spinner-border"></div>
	<div class="spinner-border text-primary"></div>
	<div class="spinner-border text-secondary"></div>
	<div class="spinner-border text-success"></div>
	<div class="spinner-border text-danger"></div>
	<div class="spinner-border text-warning"></div>
	<div class="spinner-border text-info"></div>
	<div class="spinner-border text-light"></div>
	<div class="spinner-border text-dark"></div>
</div>

2.圆型

<div class="col">
	<div class="spinner-grow"></div>
	<div class="spinner-grow text-primary"></div>
	<div class="spinner-grow text-secondary"></div>
	<div class="spinner-grow text-success"></div>
	<div class="spinner-grow text-danger"></div>
	<div class="spinner-grow text-warning"></div>
	<div class="spinner-grow text-info"></div>
	<div class="spinner-grow text-light"></div>
	<div class="spinner-grow text-dark"></div>
</div>

3.尺寸

<div class="col">
	<!-- 小尺寸 -->
	<div class="spinner-border spinner-border-sm"></div>
	<div class="spinner-grow spinner-grow-sm"></div>

	<!-- 大尺寸，通过行间样式设置 -->
	<div class="spinner-border text-info" style="width: 3rem; height: 3rem;"></div>
	<div class="spinner-grow text-info" style="width: 3rem; height: 3rem;"></div>
</div>

4.填充

<div class="row mt-5">
	<div class="col">
		<button class="btn btn-primary" disabled>
			<span class="spinner-border spinner-border-sm"></span>
		</button>
		<button class="btn btn-primary ml-2" disabled>
			<span class="spinner-border spinner-border-sm"></span>
			loadding...
		</button>

		<button class="btn btn-primary ml-2" disabled>
			<span class="spinner-grow spinner-grow-sm"></span>
		</button>
		<button class="btn btn-primary ml-2" disabled>
			<span class="spinner-grow spinner-grow-sm"></span>
			loadding...
		</button>
	</div>
</div>

二、推送

1.基础

<div class="toast" data-autohide="false">
	<div class="toast-header">
		<strong class="mr-auto">Bootstrap</strong>
		<small>11 mins ago</small>
		<button class="close ml-2 mb-1" data-dismiss="toast">
			<span>&times;</span>
		</button>
	</div>
	<div class="toast-body">
		Hello, world! This is a toast message.
	</div>
</div>

2.位置

<div class="d-flex mt-5 bg-dark p-5 justify-content-center">
	<div class="toast" data-autohide="false">
		<div class="toast-header">
			<strong class="mr-auto">Bootstrap</strong>
			<small>11 mins ago</small>
			<button class="close ml-2 mb-1" data-dismiss="toast">
				<span>&times;</span>
			</button>
		</div>
		<div class="toast-body">
			Hello, world! This is a toast message.
		</div>
	</div>
</div>

3.data选项

<div class="toast mt-5" data-autohide="true" data-animation="true" data-delay="5000">
	//data-autohide是否自动消失，data-delay配合data-autohide
	<div class="toast-header">
		<strong class="mr-auto">data-选项</strong>
		<small>11 mins ago</small>
		<button class="close ml-2 mb-1" data-dismiss="toast">
			<span>&times;</span>
		</button>
	</div>
	<div class="toast-body">
		Hello, world! This is a toast message.
	</div>
</div>

4.方法与事件

<div class="toast mt-5" data-autohide="false" id="myToast">
	<div class="toast-header">
		<strong class="mr-auto">方法与事件</strong>
		<small>11 mins ago</small>
		<button class="close ml-2 mb-1" data-dismiss="toast">
			<span>&times;</span>
		</button>
	</div>
	<div class="toast-body">
		Hello, world! This is a toast message.
	</div>
</div>
<script>
	//初始化推送消息框，必需要写这一步
	$(function () {
		$('.toast').toast('show');
	});

	//方法
	// $(function () {
	// 	$('#myToast').toast('show');
	// 	setTimeout(function(){
	// 		$('#myToast').toast('hide');
	// 	},3000);
	// });
	//事件
	$('#myToast').on('show.bs.toast', function () {
		console.log('消息框要显示了');
	});
	$('#myToast').on('shown.bs.toast', function () {
		console.log('消息框已经显示了');
	});
	$('#myToast').on('hide.bs.toast', function () {
		console.log('消息框要隐藏了');
	});
	$('#myToast').on('hidden.bs.toast', function () {
		console.log('消息框已经隐藏了');
	});