学习Bootstrap 5的第八天

已于 2023-09-08 19:00:23 修改
阅读量537 收藏 2
点赞数 2
分类专栏： Bootstrap 文章标签： 学习 bootstrap 前端
于 2023-09-08 19:00:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74293254/article/details/132759195
版权

目录

加载器

彩色加载器

实例

闪烁加载器

实例

加载器大小

实例

加载器按钮

实例

分页

分页的基本结构

实例

活动状态

实例

禁用状态

实例

分页大小

实例

分页对齐

实例

面包屑（Breadcrumbs）

实例

加载器

彩色加载器

在 Bootstrap 5 中，要创建一个加载效果，可以使用 .spinner-border 类。这个类会创建一个基本的加载动画，可以使用它来指示数据正在加载或处理中。注意：可以使用文本颜色类设置不同的颜色。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>彩色加载器</h1>
			  <div class="spinner-border text-muted"></div>
			  <div class="spinner-border text-primary"></div>
			  <div class="spinner-border text-success"></div>
			  <div class="spinner-border text-info"></div>
			  <div class="spinner-border text-warning"></div>
			  <div class="spinner-border text-danger"></div>
			  <div class="spinner-border text-secondary"></div>
			  <div class="spinner-border text-dark"></div>
			  <div class="spinner-border text-light"></div>
		</div>
	</body>
</html>

运行结果（动态的）

闪烁加载器

可以使用Bootstrap提供的.spinner-grow类来创建一个“增长”效果的加载器。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>闪烁加载器</h1>
			<div class="spinner-grow text-muted"></div>
			<div class="spinner-grow text-primary"></div>
			<div class="spinner-grow text-success"></div>
			<div class="spinner-grow text-info"></div>
			<div class="spinner-grow text-warning"></div>
			<div class="spinner-grow text-danger"></div>
			<div class="spinner-grow text-secondary"></div>
			<div class="spinner-grow text-dark"></div>
			<div class="spinner-grow text-light"></div>
		</div>
	</body>
</html>

运行结果（动态的）

加载器大小

在Bootstrap中，设置加载效果的大小可以通过使用不同的spinner类来实现，Bootstrap 5 提供.spinner-border-sm或.spinner-grow-sm类来改变加载效果的大小。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>闪烁加载器</h1>
			<div class="spinner-border spinner-border-sm text-muted"></div>
			<div class="spinner-border spinner-border-sm text-primary"></div>
			<div class="spinner-border spinner-border-sm text-success"></div>
			<div class="spinner-border text-info"></div>
			<div class="spinner-grow text-warning"></div>
			<div class="spinner-grow spinner-grow-sm text-danger"></div>
			<div class="spinner-grow spinner-grow-sm text-secondary"></div>
			<div class="spinner-grow spinner-grow-sm text-dark"></div>
			<div class="spinner-grow spinner-grow-sm text-light"></div>
		</div>
	</body>
</html>

运行结果（动态的）

加载器按钮

可以向按钮添加加载器，无论是否带有文本。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>加载器按钮</h1>
			<button class="btn btn-primary">
				<span class="spinner-border spinner-border-sm"></span>
				Loading..
			</button>
			<button class="btn btn-primary">
				<span class="spinner-grow spinner-grow-sm"></span>
				Loading..
			</button>
			<button class="btn btn-primary" disabled>
				<span class="spinner-border spinner-border-sm"></span>
				Loading..
			</button>
			<button class="btn btn-primary" disabled>
				<span class="spinner-grow spinner-grow-sm"></span>
				Loading..
			</button>
		</div>
	</body>
</html>

运行结果（动态的）

分页

Bootstrap 5中的分页功能相对于Bootstrap 4在功能和性能上都有所提升。

分页的基本结构

网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap 5 可以很简单的实现分页效果。要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类，<li> 元素的 <a> 标签上添加 .page-link 类:

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>分页的基本结构</h1>
			<ul class="pagination">
				<li class="page-item"><a class="page-link" href="#">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果

活动状态

在Bootstrap中，可以通过在对应的<li>元素上添加.active类来高亮显示当前页。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>当前页页码状态</h1>
			<ul class="pagination">
				<li class="page-item"><a class="page-link" href="#">上一页</a></li>
				<li class="page-item active"><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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果

禁用状态

在Bootstrap中，可以通过在<li>元素上添加.disabled类来使分页链接不可点击。这对于那些由于某种原因（例如，没有更多的页面可显示）而禁用的链接是非常有用的。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>禁用状态</h1>
			<ul class="pagination">
				<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
		</div>
	</body>
</html>

在这个例子中，上一页链接已经被禁用，用户无法点击它。注意tabindex="-1"和aria-disabled="true"这两个属性：它们是为了确保禁用的链接无法通过键盘导航到达，并且辅助技术（如屏幕阅读器）知道这个链接已经被禁用。 

运行结果

分页大小

Bootstrap 5允许通过添加特定的类来改变分页条目的大小。.pagination-lg类可以使分页条目变大，而.pagination-sm类可以使分页条目变小。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>分页大小</h1>
			<h2>默认大小：</h2>
			<ul class="pagination">
				<li class="page-item"><a class="page-link" href="#">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
			<h2>大型大小：</h2>
			<ul class="pagination pagination-lg">
				<li class="page-item"><a class="page-link" href="#">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
			<h2>小型大小：</h2>
			<ul class="pagination pagination-sm">
				<li class="page-item"><a class="page-link" href="#">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果

分页对齐

在Bootstrap中，可以使用一些实用工具类来改变分页的对齐方式。例如，可以使用.justify-content-center（居中对齐），.justify-content-end（右对齐）或.justify-content-start（左对齐）类来改变分页条目的水平对齐方式。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>分页对齐</h1>
			<h2>居中对齐：</h2>
			<ul class="pagination justify-content-center">
				<li class="page-item"><a class="page-link" href="#">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
			<h2>右对齐：</h2>
			<ul class="pagination justify-content-end">
				<li class="page-item"><a class="page-link" href="#">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
			<h2>左对齐：</h2>
			<ul class="pagination justify-content-start">
				<li class="page-item"><a class="page-link" href="#">上一页</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="#">3</a></li>
				<li class="page-item"><a class="page-link" href="#">下一页</a></li>
			</ul>
		</div>
	</body>
</html>

运行结果

面包屑（Breadcrumbs）

在Bootstrap中，可以使用.breadcrumb和.breadcrumb-item类来创建一个面包屑导航。面包屑导航是一种在网站上显示用户当前位置的方法，通常显示在页面顶部或底部。

实例

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Bootstrap 实例</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		<div class="container mt-3">
			<h1>面包屑导航</h1>
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">首页</a></li>
					<li class="breadcrumb-item"><a href="#">部分</a></li>
					<li class="breadcrumb-item active" aria-current="page">当前页面</li>
				</ol>
			</nav>
		</div>
	</body>
</html>

在这个例子中，.breadcrumb类被应用于<ol>元素，它表示面包屑导航的容器。每个<li>元素都使用.breadcrumb-item类，表示一个单独的面包屑链接。

注意，在Bootstrap 5中，必须使用<nav>和<ol>元素来创建面包屑导航，这是与早期版本的Bootstrap的一个主要区别。在<nav>元素上，应该使用aria-label属性提供一个对于屏幕阅读器用户有用的描述。在.breadcrumb-item上，可以添加active类来表示当前页面，也可以添加aria-current="page"属性来帮助辅助技术用户理解哪个页面是当前页面。

运行结果

正在奋斗的程序猿
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap模板加载条动画
2304_76550555的博客
05-15 389
关于</li><li class="breadcrumb-item active" aria-current="page">我的
Bootstrap炫酷多彩渐变进度条动画特效
06-12
一款使用渐变色来制作，效果非常炫酷的Bootstrap多彩渐变进度条动画特效代码。
Bootstrap中的动画和图形效果
Wangxinlei_King的博客
09-20 2736
圆角 现在，所有现代浏览器都支持不带厂商前缀的 border-radius属性了。有鉴于此，我们没有提供 .border-radius()mixin，但是，Bootstrap does 提供...
Bootstrap加载图标动画特效
07-24
Bootstrap加载图标动画特效是一款基于css3属性绘制12种网页loading加载图标ui动画。
12Bootstrap5加载效果
醉瑾_的博客
12-10 875
12Bootstrap5加载效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5加载效果</title> <link rel=
Bootstrap网页loading加载图标动画特效
06-11
Bootstrap网页loading加载图标动画特效，一组基于css3属性绘制的加载动画特效，共有12种动画效果。
BootStrap入门学习第一篇
08-29
BootStrap 入门学习第一篇 BootStrap 是一个广泛使用的前端框架，可以帮助开发者快速构建响应式的 Web 应用程序。下面是 BootStrap 入门学习第一篇的知识点总结： 环境搭建 在开始学习 BootStrap 之前，需要先...
Bootstrap5响应式在线教育课程学习平台网站模板
07-12
8. **JavaScript插件**：Bootstrap5内置了一些基于jQuery的JavaScript插件，如模态、下拉菜单、滚动spy等，这些可以增强网站的动态效果和交互性。 9. **自定义和扩展**：虽然模板提供了一套完整的结构，但开发者还...
Bootstrap零基础学习第一课之模板
09-02
在本篇【Bootstrap零基础学习第一课之模板】中，我们将深入探讨Bootstrap这一流行的前端开发框架，特别是针对初学者的基础知识。Bootstrap是一个基于HTML、CSS和JavaScript的工具包，旨在帮助开发者快速创建响应式和...
Bootstrap5
04-01
Bootstrap5是中国最流行的前端开发框架之一，由Moshiur Rahman和Bootstrap团队精心打造，它极大地简化了网页设计和开发过程。...通过学习和掌握Bootstrap5，开发者可以高效地创建出响应式、高性能的现代网站。
页面加载等待 loading 特效
06-01
自己写了个 易懂 简单明了 加的都有注释
页面loading插件
09-04
对于AJAX，异步传输数据，那肯定是要等待服务器的数据返回，对于客户来说，等待数据会让他们失去耐心，一种加载动画的方式，可以让客户知道，这是需要一点时间的，客户体验比较友好。
一个适合做页面 “加载中” 效果的插件 jquery-loading
10-26
一个适合做页面 “加载中” 效果的插件 jquery-loading 非常简单实用！！
Bootstrap图标动画选项卡特效.zip
07-11
Bootstrap图标动画选项卡特效
Bootstrap 表格td中放动态图标或者动态图片
wen_284334906的博客
07-02 1386
Html <div class="table-responsive"> <table class="table"> <thead> <tr> <th>entry</th> <th>status</th> </tr&g
Bootstrap 动画过渡（Transitions）
soindy
03-24 9437
整理自慕课笔记 动画过渡（Transitions）: 源文件：transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法： * 调用统一编译的bootstrap.js； * 调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）。 tr
Bootstrap4 加载效果
o1jkfd3a的博客
01-23 346
要创建加载中效果可以使用 .spinner-border 类:<div class="spinner-border"></div>
Bootstrap 5 加载效果
最新发布
lly202406的博客
07-03 311
加载效果是在网页或应用程序中用于指示内容正在加载的视觉提示。它们可以提高用户体验，因为在内容完全加载之前，用户会知道系统正在处理中。
Bootstrap 4深度学习：第二版
"Learning.Bootstrap.4.2nd.Edition - 这是一本关于Bootstrap 4的第二版教程，由作者Matt Lambert编写，由Packt Publishing出版。这本书旨在帮助读者利用Bootstrap 4创建响应式且美观的现代网页，涵盖了最新的Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

正在奋斗的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值