学一学bootstrap（2）

最新推荐文章于 2023-09-01 12:37:05 发布
最新推荐文章于 2023-09-01 12:37:05 发布
阅读量469 收藏
点赞数
分类专栏： bootstrap
--
本文链接：https://blog.csdn.net/qq_42177478/article/details/104347674
版权
22.导航栏
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		body {
			height: 4000px;
		}
	</style>
</head>

<body>
	<nav class="navbar navbar-expand-lg bg-light">
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>

		<ul class="navbar-nav">
			<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
			<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
			<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
			<li class="nav-item dropdown">
				<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">城市</a>
				<div class="dropdown-menu">
					<a href="#" class="dropdown-item">北京</a>
					<a href="#" class="dropdown-item">上海</a>
					<a href="#" class="dropdown-item">广州</a>
					<div class="dropdown-divider"></div>
					<a href="#" class="dropdown-item">深圳</a>
				</div>
			</li>
		</ul>

		<!-- <div class="navbar-nav">
			<a href="#" class="nav-item nav-link">入门</a>
			<a href="#" class="nav-item nav-link">布局</a>
			<a href="#" class="nav-item nav-link">内容</a>
			<a href="#" class="nav-item nav-link">组件</a>
		</div> -->
	</nav>

	<!-- 表单 -->
	<nav class="navbar bg-light mt-5">
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>

		<form action="#" class="form-inline">
			<!-- <input type="search" class="form-control mr-sm-2" placeholder="Search">
			<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button> -->

			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text">@</span>
				</div>
				<input type="search" class="form-control mr-sm-2" placeholder="Search">
			</div>
			<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
		</form>
	</nav>

	<!-- 添加文本 -->
	<nav class="navbar navbar-expand-lg bg-light mt-5">
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>

		<ul class="navbar-nav mr-auto">
			<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
			<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
			<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
		</ul>

		<span class="navbar-text">这是导航当中的文本</span>
	</nav>

	<!-- 颜色 -->
	<nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>

		<ul class="navbar-nav mr-auto">
			<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
			<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
			<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
		</ul>

		<form action="#" class="form-inline">
			<input type="search" class="form-control mr-sm-2" placeholder="Search">
			<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
		</form>
	</nav>

	<!-- 居中容器 -->
	<div class="container">
		<nav class="navbar navbar-expand-lg bg-dark navbar-dark mt-5">
			<a href="#" class="navbar-brand">
				<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
					class="align-top"> Bootstrap
			</a>

			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
				<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
				<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
			</ul>

			<form action="#" class="form-inline">
				<input type="search" class="form-control mr-sm-2" placeholder="Search">
				<button type="submit" class="btn btn-outline-success mt-2 mt-sm-0">Search</button>
			</form>
		</nav>
	</div>

	<!-- 定位 -->
	<!-- <nav class="navbar navbar-light bg-light fixed-top">
		<a href="#" class="navbar-brand">因定在顶部</a>
	</nav> -->
	<nav class="navbar navbar-light bg-light fixed-bottom">
		<a href="#" class="navbar-brand">因定在底部</a>
	</nav>
	<nav class="navbar navbar-light bg-light sticky-top">
		<a href="#" class="navbar-brand">粘性定位在浏览器的顶部</a>
	</nav>

	<!-- 响应式 -->
	<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
		<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbar">
			<a href="#" class="navbar-brand">
				<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
					class="align-top"> Bootstrap
			</a>
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
				<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
				<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
			</ul>

			<form action="#" class="form-inline">
				<input type="search" class="form-control mr-sm-2" placeholder="Search">
				<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
			</form>
		</div>
	</nav>
	<!-- 左侧是logo，右侧是按钮 -->
	<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>
		<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar1">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbar1">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
				<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
				<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
			</ul>

			<form action="#" class="form-inline">
				<input type="search" class="form-control mr-sm-2" placeholder="Search">
				<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
			</form>
		</div>
	</nav>
	<!-- 左侧是按钮，右侧是logo -->
	<nav class="navbar navbar-expand-md bg-success navbar-dark mt-5">
		<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar2">
			<span class="navbar-toggler-icon"></span>
		</button>
		<a href="#" class="navbar-brand">
			<img src="http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg" alt="" width="30"
				class="align-top"> Bootstrap
		</a>
		<div class="collapse navbar-collapse" id="navbar2">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item"><a href="#" class="nav-link">入门</a></li>
				<li class="nav-item"><a href="#" class="nav-link">布局</a></li>
				<li class="nav-item"><a href="#" class="nav-link">内容</a></li>
			</ul>

			<form action="#" class="form-inline">
				<input type="search" class="form-control mr-sm-2" placeholder="Search">
				<button type="submit" class="btn btn-outline-light mt-2 mt-sm-0">Search</button>
			</form>
		</div>
	</nav>





	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
</body>

</html>
24.分页
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col">
				<ul class="pagination">
					<!-- <li class="page-item"><a href="#" class="page-link">上一页</a></li> -->
					<li class="page-item"><a href="#" class="page-link"><span>&laquo;</span></a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<!-- <li class="page-item"><a href="#" class="page-link">下一页</a></li> -->
					<li class="page-item"><a href="#" class="page-link"><span>&raquo;</span></a></li>
				</ul>
			</div>

			<!-- span标签代替a标签，激活以及禁用状态 -->
			<div class="col">
				<ul class="pagination">
					<li class="page-item disabled"><span class="page-link">上一页</span></li>
					<li class="page-item"><span class="page-link">1</span></li>
					<li class="page-item active"><span class="page-link">2</span></li>
					<li class="page-item"><span class="page-link">3</span></li>
					<li class="page-item"><span class="page-link">下一页</span></li>
				</ul>
			</div>
		</div>
		
		<!-- 尺寸 -->
		<div class="row mt-5">
			<div class="col">
				<ul class="pagination pagination-lg">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<ul class="pagination">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<ul class="pagination pagination-sm">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>

		<!-- 对齐方式 -->
		<div class="row mt-5">
			<div class="col">
				<ul class="pagination justify-content-end">
					<li class="page-item"><a href="#" class="page-link">上一页</a></li>
					<li class="page-item"><a href="#" class="page-link">1</a></li>
					<li class="page-item"><a href="#" class="page-link">2</a></li>
					<li class="page-item"><a href="#" class="page-link">3</a></li>
					<li class="page-item"><a href="#" class="page-link">下一页</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>

</html>
25.提示框与提示工具

提示框

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col">
				<button class="btn btn-danger" data-toggle="popover" title="这里放的是提示框的标题" data-content="这里放的是提示框的内容">提示框</button>
				
				<!-- 4个弹出方向 -->
				<button class="btn btn-secondary" data-toggle="popover" title="这个提示框没有标题，并且是在上面显示" data-placement="top">上面显示提示框</button>
				<button class="btn btn-info" data-toggle="popover" title="这个提示框没有标题，并且是在右侧显示" data-placement="right">右侧显示提示框</button>
				<button class="btn btn-primary" data-toggle="popover" title="这个提示框没有标题，并且是在下面显示" data-placement="bottom">下面显示提示框</button>
				<button class="btn btn-warning" data-toggle="popover" title="这个提示框没有标题，并且是在左侧显示" data-placement="left">左侧显示提示框</button>

				<button class="btn btn-dark" data-toggle="popover" title="这个提示框当焦点失去的时候就会隐藏" data-trigger="focus">失去焦点隐藏</button>

				<!-- 禁用元素弹出提示框 -->
				<span class="d-inline-block" data-toggle="popover" data-trigger="hover" data-content="禁用的元素想要弹出提示框，需要在外面添加一层，把交互的功能都加到这个层上">
					<button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按钮弹出提示框</button>
				</span>
			</div>
		</div>

		<div id="box"></div>

		<div class="row mt-5">
			<div class="col">
				<button class="btn btn-success" data-toggle="popover" title="这是<b>标题<b>" data-content="这是内容"
					data-animation="true"
					data-container='body'
					data-delay='{ "show": 1000, "hide": 2000 }'
					data-html='true'
					data-placement='top'
					data-template='<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
					data-trigger='hover'
					data-offset='120'
				>data-属性</button>
			</div>

			<!-- 方法与事件 -->
			<div class="col">
				<button class="btn btn-info" title="方法与事件" id="myPopover">方法与事件</button>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>
	<script>
		//初始化提示框，必需要写这一步
		$(function(){
			$('[data-toggle="popover"]').popover();
		});

		//方法
		//$('#myPopover').popover('show');	//显示提示框
		/* setTimeout(function(){
			$('#myPopover').popover('hide');	//隐藏提示框
		},1000); */

		/* $('#myPopover').popover('hide');
		$('#myPopover').popover('toggle');	//切换提示框 */


		//$('#myPopover').popover('enable');	//添加提示框功能
		$('#myPopover').popover('disable');	//取消提示框功能
		$('#myPopover').popover('toggleEnabled')	//切换（enable与disable的功能）


		//事件
		$('#myPopover').on('show.bs.popover',function(){
			console.log('提示框要显示了');
		});
		$('#myPopover').on('shown.bs.popover',function(){
			console.log('提示框已经完全显示了');
		});
		$('#myPopover').on('hide.bs.popover',function(){
			console.log('提示框要隐藏了');
		});
		$('#myPopover').on('hidden.bs.popover',function(){
			console.log('提示框已经完全隐藏了');
		});
		$('#myPopover').on('inserted.bs.popover',function(){
			console.log('提示框DOM已经插入到页面里了');
		});
	</script>
</body>

</html>

提示工具

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col">
				<button class="btn btn-secondary" data-toggle="tooltip" title="这个提示工具在上面显示" data-placement="top">上面弹出提示工具</button>
				<button class="btn btn-info" data-toggle="tooltip" title="这个提示工具在右侧显示" data-placement="right">右侧弹出提示工具</button>
				<button class="btn btn-primary" data-toggle="tooltip" title="这个提示工具在下面显示" data-placement="bottom">下面弹出提示工具</button>
				<button class="btn btn-warning" data-toggle="tooltip" title="这个提示工具在左侧显示" data-placement="left">左侧弹出提示工具</button>
			</div>
		</div>

		<div class="row mt-5">
			<p>Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.</p>
		</div>

		<div id="box"></div>

		<div class="row mt-5">
			<!-- 自定义HTML -->
			<div class="col">
				<button class="btn btn-success" data-toggle="tooltip" data-html="true" title="自<em>定</em>义<b>html</b>">自定义HTML</button>
			</div>
			<div class="col">
				<span class="d-inline-block" data-toggle="tooltip" title="禁用的元素弹出提示工具，需要在外面添加一个层，把交互的功能添加到这个层上">
					<button class="btn btn-primary" style="pointer-events: none;" disabled>禁用的按钮弹出提示工具</button>
				</span>
			</div>
			<div class="col">
				<button class="btn btn-success" data-toggle="tooltip" title="这是<em>标题</em>"
					data-animation='true'
					data-container='body'
					data-delay='{ "show": 1000, "hide": 2000 }'
					data-html="true"
				>data-属性</button>
			</div>
			<!-- 方法与事件 -->
			<div class="col">
				<button class="btn btn-info" title="方法与事件" id="myTooltip">方法与事件</button>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
		integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>

	<script>
		//初始化提示框，必需要写这一步
		$(function(){
			$('[data-toggle="tooltip"]').tooltip();
		});

		//方法
		/* $('#myTooltip').tooltip('show');	//显示提示框
		setTimeout(function(){
			$('#myTooltip').tooltip('hide');	//隐藏提示框
		},1000); */

		/* $('#myTooltip').tooltip('hide');
		$('#myTooltip').tooltip('toggle');	//切换提示框 */


		$('#myTooltip').tooltip('enable');	//添加提示框功能
		$('#myTooltip').tooltip('disable');	//取消提示框功能
		$('#myTooltip').tooltip('toggleEnabled')	//切换（enable与disable的功能）

		
		//事件
		$('#myTooltip').on('show.bs.tooltip',function(){
			console.log('提示工具要显示了');
		});
		$('#myTooltip').on('shown.bs.tooltip',function(){
			console.log('提示工具已经完全显示了');
		});
		$('#myTooltip').on('hide.bs.tooltip',function(){
			console.log('提示工具要隐藏了');
		});
		$('#myTooltip').on('hidden.bs.tooltip',function(){
			console.log('提示工具已经完全隐藏了');
		});
		$('#myTooltip').on('inserted.bs.tooltip',function(){
			console.log('提示工具DOM已经插入到页面里了');
		});
	</script>
</body>

</html>
进度条与滚动监听

进度条

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<div class="col">
				<!-- 基础class，变成了flex，并且给了高度1rem，背景，圆角 -->
				<div class="progress">	
					<!-- 
						.progress-bar	当前的进度
							1、弹性盒模型。还添加了过渡效果。需要给它指定一个宽度。通过行间样式或者预定义class都行
					 -->
					<div class="progress-bar" style="width: 25%"></div>	
				</div>
				<div class="progress mt-2">
					<div class="progress-bar w-50"></div>
				</div>

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

				<!-- 通过背景预定义class去修改颜色 -->
				<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>

				<!-- 多个进度条 -->
				<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>

				<!-- 条纹进度条 -->
				<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>
				<div class="progress mt-2">
					<div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
				</div>
				<div class="progress mt-2">
					<div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
				</div>

				<!-- 动画条纹进度条 -->
				<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>
			</div>
		</div>
	</div>
</body>

</html>

滚动监听

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
	<style>
		.scrollBody {
			position: relative;
			height: 200px;
			margin-top: .5rem;
			overflow-y: scroll;
		}
		.scrollBody2{
			position: relative;
			height: 350px;
			overflow-y: scroll;
		}
		.scrollBody3{
			position: relative;
			height: 200px;
			margin-top: .5rem;
			overflow: auto;	/* auto也是可以的 */
		}
	</style>
</head>

<body>
	<!-- 
		1、滚动条组件只能用在导航与列表组当中
		2、如果滚动的是body以外的元素，需要给它身上添加height与overflow-y: scroll的样式
		3、需要用到js
	 -->
	<div class="container">
		<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 labore. Pitchfork yr enim lo-fi before they sold
						out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
						seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
						hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes
						anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
						consequat.</p>
					<h4 id="mdo">@mdo</h4>
					<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua
						cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby
						sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles
						non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
					</p>
					<h4 id="one">one</h4>
					<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights
						adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam.
						High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est
						adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus
						consectetur fanny pack iphone.</p>
					<h4 id="two">two</h4>
					<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats
						sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer.
						Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse.
						Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan
						tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf
						voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk
						brooklyn nesciunt.</p>
					<h4 id="three">three</h4>
					<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold
						out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit
						seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg
						hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes
						anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco
						consequat.</p>
					<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id
						assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them
						consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry
						richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan.
						Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit
						minim commodo ullamco thundercats.</p>
				</div>
			</div>
		</div>
		<!-- 写完第1个后，演示一下。按钮点击后内容滚动到相应位置。滚动的时候，按钮会自动被选中。可以把下拉菜单打开，并滚动看看效果 -->


		<!-- 嵌套的导航 -->
		<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 occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
					<h5 id="item-1-1">Item 1-1</h5>
					<p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.</p>
					<h5 id="item-1-2">Item 1-2</h5>
					<p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.</p>
					<h4 id="item-2">Item 2</h4>
					<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
					<h4 id="item-3">Item 3</h4>
					<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
					<h5 id="item-3-1">Item 3-1</h5>
					<p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.</p>
					<h5 id="item-3-2">Item 3-2</h5>
					<p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.</p>
				</div>
			</div>
		</div>

		<!-- 列表组 -->
		<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 occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.</p>
					<h4 id="list-item-2">Item 2</h4>
					<p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.</p>
					<h4 id="list-item-3">Item 3</h4>
					<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
					<h4 id="list-item-4">Item 4</h4>
					<p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.</p>
				</div>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>

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

</html>
27.旋转加载与推送消息框
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row mt-5">
			<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>

			<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>

			<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>
		</div>

		<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>
	</div>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="bg-danger">
		<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 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>

	<!-- 位置 -->
	<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>

	<!-- data-选项 -->
	<div class="toast mt-5" data-autohide="true" data-animation="true" data-delay="5000">
		<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>

	<!-- 方法与事件 -->
	<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 src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
		</script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
		integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
		crossorigin="anonymous"></script>

	<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('消息框已经隐藏了');
		});
	</script>
</body>

</html>
29.buttons库
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<link rel="stylesheet" href="css/buttons.css">
	<title></title>
	<style>
		body {
			padding-bottom: 1000px;
		}
	</style>
</head>

<body>

	<div class="container">
		<!-- 形状 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button">默认形状</button>
				<button class="button button-rounded">长形圆角</button>
				<button class="button button-pill">胶囊</button>
				<button class="button button-square">方形</button>
				<button class="button button-box">圆角</button> <!-- 方形圆角 -->
				<button class="button button-circle">圆形</button>
			</div>
		</div>

		<!-- 微小尺寸，默认颜色(灰色) -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-tiny">Go</button>
				<button class="button button-tiny button-rounded">Go</button>
				<button class="button button-tiny button-pill">Go</button>
				<button class="button button-tiny button-square">Go</button>
				<button class="button button-tiny button-box">Go</button>
				<button class="button button-tiny button-circle">Go</button>
			</div>
		</div>

		<!-- 小尺寸，蓝色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-small button-primary">Go</button>
				<button class="button button-small button-primary button-rounded">Go</button>
				<button class="button button-small button-primary button-pill">Go</button>
				<button class="button button-small button-primary button-square">Go</button>
				<button class="button button-small button-primary button-box">Go</button>
				<button class="button button-small button-primary button-circle">Go</button>
			</div>
		</div>

		<!-- 正常尺寸，绿色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-action">Go</button>
				<button class="button button-action button-rounded">Go</button>
				<button class="button button-action button-pill">Go</button>
				<button class="button button-action button-square">Go</button>
				<button class="button button-action button-box">Go</button>
				<button class="button button-action button-circle">Go</button>
			</div>
		</div>

		<!-- 大尺寸，黄色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-large button-highlight">Go</button>
				<button class="button button-large button-highlight button-rounded">Go</button>
				<button class="button button-large button-highlight button-pill">Go</button>
				<button class="button button-large button-highlight button-square">Go</button>
				<button class="button button-large button-highlight button-box">Go</button>
				<button class="button button-large button-highlight button-circle">Go</button>
			</div>
		</div>

		<!-- 特大尺寸，红色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-jumbo button-caution">Go</button>
				<button class="button button-jumbo button-caution button-rounded">Go</button>
				<button class="button button-jumbo button-caution button-pill">Go</button>
				<button class="button button-jumbo button-caution button-square">Go</button>
				<button class="button button-jumbo button-caution button-box">Go</button>
				<button class="button button-jumbo button-caution button-circle">Go</button>
			</div>
		</div>

		<!-- 巨大尺寸，深蓝色背景 -->
		<div class="row">
			<div class="col">
				<button class="button button-giant button-royal">Go</button>
				<button class="button button-giant button-royal button-rounded">Go</button>
				<button class="button button-giant button-royal button-pill">Go</button>
				<button class="button button-giant button-royal button-square">Go</button>
				<button class="button button-giant button-royal button-box">Go</button>
				<button class="button button-giant button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 边框按钮 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-circle button-large button-border button-primary">Go</button>
				<button class="button button-box button-large button-border button-primary">Go</button>
			</div>
		</div>

		<!-- 3D 按钮 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-3d">Go</button>
				<button class="button button-3d button-primary button-rounded">Go</button>
				<button class="button button-3d button-action button-pill">Go</button>
				<button class="button button-3d button-highlight button-square">Go</button>
				<button class="button button-3d button-caution button-box">Go</button>
				<button class="button button-3d button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 突起样式的按钮 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-raised">Go</button>
				<button class="button button-raised button-primary button-rounded">Go</button>
				<button class="button button-raised button-action button-pill">Go</button>
				<button class="button button-raised button-highlight button-square">Go</button>
				<button class="button button-raised button-caution button-box">Go</button>
				<button class="button button-raised button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 长阴影 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-longshadow-right">Go</button>
				<button class="button button-longshadow-right button-primary button-rounded">Go</button>
				<button class="button button-longshadow-right button-action button-pill">Go</button>
				<button class="button button-longshadow-right button-highlight button-square">Go</button>
				<button class="button button-longshadow-right button-caution button-box">Go</button>
				<button class="button button-longshadow-right button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 光晕效果 -->
		<div class="row mt-5">
			<div class="col">
				<button class="button button-glow">Go</button>
				<button class="button button-glow button-primary button-rounded">Go</button>
				<button class="button button-glow button-action button-pill">Go</button>
				<button class="button button-glow button-highlight button-square">Go</button>
				<button class="button button-glow button-caution button-box">Go</button>
				<button class="button button-glow button-royal button-circle">Go</button>
			</div>
		</div>

		<!-- 带下拉菜单的按钮 -->
		<div class="row mt-5">
			<div class="col">
				<div class="button-dropdown" data-buttons='dropdown'>
					<button class="button button-rounded button-royal button-giant">城市</button>
					<ul class="button-dropdown-list">
						<li><a href="#">北京</a></li>
						<li><a href="#">上海</a></li>
						<li class="button-dropdown-divider"><a href="#">广州</a></li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 按钮组 -->
		<div class="row mt-5">
			<div class="col">
				<div class="button-group">
					<button class="button button-primary">首页</button>
					<button class="button button-primary">关于我们</button>
					<button class="button button-primary">联系我们</button>
					<div class="button-dropdown" data-buttons='dropdown'>
						<button class="button button-primary">城市</button>
						<ul class="button-dropdown-list">
							<li><a href="#">北京</a></li>
							<li><a href="#">上海</a></li>
							<li class="button-dropdown-divider"><a href="#">广州</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="button-group">
					<button class="button button-pill button-action">首页</button>
					<button class="button button-pill button-action">关于我们</button>
					<button class="button button-pill button-action">联系我们</button>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col">
				<div class="button-group">
					<button class="button button-raised button-highlight">首页</button>
					<button class="button button-raised button-highlight">关于我们</button>
					<button class="button button-raised button-highlight">联系我们</button>
				</div>
			</div>
		</div>

		<!-- 堆叠按钮 -->
		<div class="row mt-5">
			<div class="col">
				<a href="#" class="button button-block mt-1 button-large button-rounded">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-primary">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-action">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-highlight">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-caution">Go</a>
				<a href="#" class="button button-block mt-1 button-large button-rounded button-royal">Go</a>
			</div>
		</div>

		<!-- 额外的环绕效果 -->
		<div class="row mt-5">
			<div class="col">
				<span class="button-wrap">
					<button class="button button-circle m-2"></button>
				</span>
				<span class="button-wrap">
					<button class="button button-circle m-2 button-primary"></button>
				</span>
				<span class="button-wrap">
					<button class="button button-pill m-2"></button>
				</span>
				<span class="button-wrap">
					<button class="button button-pill m-2 button-primary"></button>
				</span>
			</div>
		</div>

		<!-- 表单按钮 -->
		<div class="row mt-5">
			<div class="col">
				<input type="submit" class="button button-pill button-primary" value="Go">
				<button type="submit" class="button button-pill button-primary">Go</button>
				<a href="#" class="button button-pill button-primary">Go</a>

				<input type="submit" disabled class="button button-pill button-primary" value="Go">
				<button type="submit" disabled class="button button-pill button-primary">Go</button>
				<a href="#" class="button button-pill button-primary disabled">Go</a>
			</div>
		</div>

		<!-- 文字样式 -->
		<div class="row mt-5">
			<div class="col">
				<a href="#" class="button button-primary button-uppercase">uppercase</a>	<!-- 转大写 -->
				<a href="#" class="button button-primary button-lowercase">LOWERCASE</a>	<!-- 转小写 -->
				<a href="#" class="button button-primary button-capitalize">capitalize</a>	<!-- 首字母转大小 -->
				<a href="#" class="button button-primary button-small-caps">small caps</a>	<!-- 转大写，但字号会变小 -->
			</div>
		</div>


	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="js/buttons.js"></script>
</body>

</html>
30
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
		integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	<link rel="stylesheet" href="css/bootstrap-datetimepicker.css">
	<title></title>

</head>

<body>
	<!-- 
		官网：https://www.malot.fr/bootstrap-datetimepicker/ 
		中文翻译：https://www.bootcss.com/p/bootstrap-datetimepicker/
	 -->

	<div class="container">
		<div class="row">
			<div class="col">
				<div class="form-group form-inline">
					<label for="datetime">日期：</label>
					<input type="text" class="form-control datetime" id="datetime">
				</div>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
		integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
		crossorigin="anonymous"></script>
	<script src="js/bootstrap-datetimepicker.js"></script>

	<script>
		; (function ($) {
			$.fn.datetimepicker.dates['zh-CN'] = {
				days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
				daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
				daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
				months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
				monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
				today: "今天",
				suffix: [],
				meridiem: ["上午", "下午"]
			};
		}(jQuery));


		$('.datetime').datetimepicker({
			//格式化日期
			format: 'yyyy-mm-dd',
			format: 'yyyy-mm-dd hh:ii',
			format: 'yyyy-mm-ddThh:ii',
			format: 'yyyy-mm-dd hh:ii:ss',
			format: 'yyyy-mm-dd hh:ii:ssZ',
			format: 'yyyy-mm-dd hh:ii:ss P',
			format: 'yyyy-mm-dd H:ii:ss p',
			format: 'yyyy-mm-dd',

			weekStart: 1,	//一周从哪一天开始，0-6（周日-周六）
			/* startDate:new Date(),	//能够选择到的开始日期
			endDate:new Date(2020,1,1),	//能够选择到的结束日期 */
			daysOfWeekDisabled: [1, 3, 5],	//一周里周几不能选择到
			daysOfWeekDisabled: [],	//一周里周几不能选择到
			autoclose: true,	//当选择到一个日期后，是否自动关闭日期选择器

			startView: 0,	//0或者'hour'：从小时视图开始，选分
			startView: 1,	//1或者'day'：从天视图开始，选小时
			startView: 2,	//2或者'month'：从月视图开始，选天（这是默认的）
			startView: 3,	//3或者'year'：从年视图开始，选月
			startView: 4,	//4或者'decade'：从十年视图开始，选年
			startView: 2,	//还原

			//日期时间选择器最低能够选择到的日期类型
			minView: 0,		//0或者'hour'：能选择到分（这是默认的）		
			minView: 1,		//1或者'day'：能选择到小时		
			minView: 2,		//2或者'month'：能选择到天		
			minView: 3,		//3或者'year'：能选择到月		
			minView: 4,		//4或者'decade'：能选择到年
			minView: 0,		//还原

			//最大能够选择到的日期类型。是通过点击头部的日期来选择。演示234就够了，最大的值权限为2了
			maxView: 0,		//0或者'hour'：能选择到分	
			maxView: 1,		//1或者'day'：能选择到小时		
			maxView: 2,		//2或者'month'：能选择到天		
			maxView: 3,		//3或者'year'：能选择到月		
			maxView: 4,		//4或者'decade'：能选择到年（这是默认的）

			todayBtn: true,	//是否显示回到今天的按钮
			keyboardNavigation: true,	//是否可以通过键盘选择日期
			language: 'zh-CN',	//语言选择

			minuteStep: 10,	//最小分钟间隔数，默认为5
			pickerPosition: 'bottom-right',		//日期组件显示的位置
			showMeridian: true,	//在日期界面上是否显示上下午
		});

		//方法
		/* $('.datetime').datetimepicker('remove');	//移除日期时间选择器组件 
		$('.datetime').datetimepicker('show');	//显示日期时间选择器组件 
		setTimeout(function(){
			$('.datetime').datetimepicker('hide');	//隐藏日期时间选择器组件 
		},5000); */

		$('.datetime').datetimepicker('setStartDate', '2019-10-01');//设置日期选择器的起始日期
		$('.datetime').datetimepicker('setEndDate', '2020-10-01');//设置日期选择器的结束日期
		$('.datetime').datetimepicker('setDaysOfWeekDisabled', [0, 6]);//设置不可选的星期


		//事件
		$('.datetime').datetimepicker()
			//日期选择器显示事件
			.on('show', function () {
				console.log('日期选择器组件显示了');
			})
			//日期选择器隐藏事件
			.on('hide', function () {
				console.log('日期选择器组件隐藏了');
			})
			//日期变动事件
			.on('changeDate', function () {
				console.log('日期变动了');
			})
			//年份变动事件
			.on('changeYear', function () {
				console.log('年份变动了')
			})
			//月份变动事件
			.on('changeMonth', function () {
				console.log('月份变动了')
			})
			//超出选择日期范围事件
			.on('outOfRange', function () {
				console.log('你选择的日期超出范围了')
			})
	</script>
</body>

</html>
31.
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<!-- 
		https://www.layui.com/laydate/
	 -->

	<div class="container">
		<div class="row mt-5">
			<div class="col">
				<div class="form-group form-inline">
					<label for="date">日期：</label>
					<div type="text" class="form-control w-50" placeholder="请选择日期" id="date"></div>
				</div>
			</div>
		</div>
	</div>

	<script src="laydate/laydate.js"></script>
	<script>
		var layDemo=laydate.render({	//初始化方法
			//绑定元素
			elem: '#date',

			//控件选择类型
			type: 'year',
			type: 'month',
			type: 'date',
			type: 'time',
			type: 'datetime',

			//开启左右面板范围选择
			//range:'*',

			//自定义格式
			format: 'yyyy-MM-dd HH:mm:ss',
			format: 'yyyy年MM月dd日 HH时mm分ss秒',
			format: 'yyyyMMdd',
			format: 'dd/MM/yyyy',
			format: 'yyyy年M月',
			format: 'M月d日',
			format: '北京时间：HH点mm分',
			format: 'yyyy年的M月某天晚上，大概H点',
			format: '亲，还记得yyyy年的M月d号那一天么？',
			format: 'yyyy-MM-dd',

			//初始值
			/* value:'2008-08-08',
			value:new Date(2008,7,8),
			isInitValue :false, */

			//最小/大范围内的日期时间值
			/* min: '2019-1-1',
			max: '2019-12-31',

			min: '2019-12-11 12:30:00',
			max: '2019-12-18 12:30:00',

			min: -7,
			max: 7,

			min: '09:30:00',
			max: '17:30:00', */

			//自定义弹出控件的事件
			trigger :'focus',


			//默认显示
			show:false,

			//定位方式
			position:'abolute',

			//层叠顺序
			zIndex:66666666,

			//是否显示底部栏
			showBottom :true,

			//工具按钮
			btns :['now', 'clear',  'confirm'],

			//语言
			lang:'cn',

			//主题
			theme :'default',
			theme :'molv',
			theme :'#f00',
			theme :'grid',
			theme :'kaivon',

			// 是否显示公历节日
			calendar:true,

			//标注重要日子
			mark :{
				'0-5-3':'生日',
				'0-9-1':'开学',
				'0-0-10':'工资',
				'2019-12-6':'入职',
			},

			//方法
			//控件初始打开的回调
			ready:function(date){
				console.log(date);
			},


			//日期时间被切换后的回调
			change:function(value,date,endDate){
				console.log(value);
				console.log(date);
				console.log(endDate);

				layDemo.hint(value);
			},

			//控件选择完毕后的回调
			done:function(value,date,endDate){
				console.log(value);
				console.log(date);
				console.log(endDate);
			},
		});

		console.log(layDemo);

		var endDay=laydate.getEndDate();
		var endDay=laydate.getEndDate(2,2035);

		console.log(endDay);
	</script>
</body>

</html>
啥时候能干全栈
关注
专栏目录
蓝色导航CSS实现
拓
03-19 19万+
代码 New Document <!--/***********************************************//* 快速连接导航栏 *//***********************************************/ #nav {
jquery+Bootstrap作品实现教程
热门推荐
qq_58705070的博客
11-13 6万+
关于我用jQuery写了自己喜欢的东西
蓝色导航条
08-15
jquery类似flash效果动感滑动背景导航菜单
蓝色导航企业网站管理系统 v1.0.rar
07-05
蓝色导航企业网站管理系统 v1.0   管理员地址：www.xxx.com/admin/admin_login.asp 管理员账号：admin 管理员密码：admin
Ext JS 6学习文档–第1章–ExtJS入门指南
weixin_30525825的博客
08-24 1641
Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的，因为 ExtJS 6 目前的中文学习资料还很少。google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example]。这份资料在PACKT上卖 35.99 刀的，当然了万能的 google 还是帮我下载到了 PDF 文档。大概看了一下，讲的很详细，例子...
学习Bootstrap 5的第一天
m0_74293254的博客
09-01 1118
Bootstrap 简介Bootstrap 简介什么是 Bootstrap 5？Bootstrap 5 是 Bootstrap 的最新版本，它是最流行的 HTML、CSS 和 JavaScript 框架，用于创建响应式、移动优先的网站。Bootstrap5 与3 & 4的对比总体对比：具体对比：Bootstrap 3、4和5之间存在一些显著的区别。
BootStrap简单学习
秋雨绵绵
03-04 1365
本文是关于BootStrap的简单学习，适合后端开发者查阅。
BootStrap入门学习第一篇
12-02
Bootstrap是世界上最受欢迎的前端开发框架之一，用于快速构建响应式和移动优先的网站。这篇“BootStrap入门学习第一篇”旨在引导初学者了解如何开始使用这个强大的工具。以下是主要的知识点： 1. **环境搭建**： -...
详解Bootstrap 学习（一）入门
10-17
2. **预定义的组件**：Bootstrap 提供了一系列预先设计的组件，如导航栏、按钮、表单、模态框、下拉菜单等，这些组件可以快速组合成复杂的页面结构。 3. **CSS 样式**：Bootstrap 的 CSS 部分定义了大量的全局样式...
bootstrap详细学习课件文档
11-12
目前比较流行的 Bootstrap 版本有三种，分别是 Bootstrap2、Bootstrap3、Bootstrap4。Bootstrap2 是比较旧的版本，在 HTML4 中的网页很多地方都是可以使用 Bootstrap2 作为前端框架的，但是主要是针对台式机网页开发...
bootstrap学习使用（导航条、下拉菜单、轮播、栅格布局等）
01-19
本文算是bootstrap学习使用的年底大总结，供大家参考，具体内容如下 bootstrap框架 BootStrap学习从现在开始，前端开发框架Bootstrap，可大大简化网站开发过程，从而深受广大开发者的喜欢。 <!DOCTYPE html> &lt...
Ace Admin前端框架笔记二导航栏Navba
whaleluo的博客
05-28 4394
1.布局HTML页面中导航栏的默认布局是：1 toggle buttons: come before brand text container(.navbar-header) or inside it. 切换按钮：出现在品牌文本容器（导航头）之前或内部2 .navbar-header: brand text container. 导航头：品牌文本容器3 .navbar-menu: o...
用Django全栈开发——12. 重构前端页面编写文章详情页
皮克啪的铲屎官
07-20 1467
大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，是最后一节关于前端的教程。 Peekpa.com的官方地址：http://peekpa.com 上一节我们把Login的逻辑打通完毕，其中涉及到了一点内容，就是把之前gulp写的页面的相对资源路径，改为了Django模板的路径，这一节我们需要对我们的前端页面进行重构，还有文章详情页的编写。 重构分析 首先，要知道为什么我们要重构页面？是因为Django有一个叫做template的东西：
用Bootstrap实现GitHub的登录界面效果
快乐的小小程序猿
06-28 3256
用Bootstrap写一个类似于GitHub的登录界面 Bootstrap中文链接：https://code.z01.com/v4/ Bootstrap英文链接：https://getbootstrap.com/ logo来源：阿里巴巴矢量图标库：https://www.iconfont.cn/search/index?searchType=icon&q=github 代码： <...
高逼格Log日志，可以导航跳转的log
hnsugar的博客
02-26 1万+
不管是Android开发还是java开发，Log日志一直是很重要的辅助调试工具，日志只能用来看吗？当然不是，还能用来导航跳转。友情提示：本文只提供提高逼格方法方式，基础知识请自行学习。不要问我原理，工具就是那么设计的。简书上IT平头哥是我，没有抄袭。不知道大家会不会利用java提供的StackTraceElement，利用这个可以打印堆栈信息，不知道请自行查阅相关文档。可以获取类名方法名和行号等等...
MATLAB公路裂缝检测系统面板GUI.zip
11-02
圣诞树
Flask-2.1.3.tar.zip
最新发布
11-02
Flask-2.1.3.tar.zip
Flask-0.12.4.tar.zip
11-02
Flask-0.12.4.tar.zip
基于LangChain的QQ邮件智能收发工具
11-02
基于LangChain的QQ邮件智能收发工具
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值