• 学习Bootstrap 5的第八天

    目录

    加载器

    彩色加载器

    实例

    闪烁加载器

    实例

    加载器大小

    实例

    加载器按钮

    实例

    分页

    分页的基本结构

    实例

    活动状态

    实例

    禁用状态

    实例

    分页大小

    实例

    分页对齐

    实例

    面包屑（Breadcrumbs）

    实例

    加载器

    彩色加载器

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>彩色加载器h1>
    13. 			  <div class="spinner-border text-muted">div>
    14. 			  <div class="spinner-border text-primary">div>
    15. 			  <div class="spinner-border text-success">div>
    16. 			  <div class="spinner-border text-info">div>
    17. 			  <div class="spinner-border text-warning">div>
    18. 			  <div class="spinner-border text-danger">div>
    19. 			  <div class="spinner-border text-secondary">div>
    20. 			  <div class="spinner-border text-dark">div>
    21. 			  <div class="spinner-border text-light">div>
    22. 		div>
    23. 	body>
    24. html>

    运行结果（动态的）

    闪烁加载器

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>闪烁加载器h1>
    13. 			<div class="spinner-grow text-muted">div>
    14. 			<div class="spinner-grow text-primary">div>
    15. 			<div class="spinner-grow text-success">div>
    16. 			<div class="spinner-grow text-info">div>
    17. 			<div class="spinner-grow text-warning">div>
    18. 			<div class="spinner-grow text-danger">div>
    19. 			<div class="spinner-grow text-secondary">div>
    20. 			<div class="spinner-grow text-dark">div>
    21. 			<div class="spinner-grow text-light">div>
    22. 		div>
    23. 	body>
    24. html>

    运行结果（动态的）

    加载器大小

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>闪烁加载器h1>
    13. 			<div class="spinner-border spinner-border-sm text-muted">div>
    14. 			<div class="spinner-border spinner-border-sm text-primary">div>
    15. 			<div class="spinner-border spinner-border-sm text-success">div>
    16. 			<div class="spinner-border text-info">div>
    17. 			<div class="spinner-grow text-warning">div>
    18. 			<div class="spinner-grow spinner-grow-sm text-danger">div>
    19. 			<div class="spinner-grow spinner-grow-sm text-secondary">div>
    20. 			<div class="spinner-grow spinner-grow-sm text-dark">div>
    21. 			<div class="spinner-grow spinner-grow-sm text-light">div>
    22. 		div>
    23. 	body>
    24. html>

    运行结果（动态的）

    加载器按钮

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

    实例

    1. html>
    2. <html lang="en">
    3. 	<head>
    4. 		<title>Bootstrap 实例title>
    5. 		<meta charset="utf-8">
    6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
    7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
    9. 	head>
    10. 	<body>
    11. 		<div class="container mt-3">
    12. 			<h1>加载器按钮h1>
    13. 			<button class="btn btn-primary">
    14. 				<span class="spinner-border spinner-border-sm">span>
    15. 				Loading..
    16. 			button>
    17. 			<button class="btn btn-primary">
    18. 				<span class="spinner-grow spinner-grow-sm">span>
    19. 				Loading..
    20. 			button>
    21. 			<button class="btn btn-primary" disabled>
    22. 				<span class="spinner-border spinner-border-sm">span>
    23. 				Loading..
    24. 			button>
    25. 			<button class="btn btn-primary" disabled>
    26. 				<span class="spinner-grow spinner-grow-sm">span>
    27. 				Loading..
    28. 			button>
    29. 		div>
    30. 	body>
    31. html>

    运行结果（动态的）

    分页

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

    分页的基本结构

    网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap 5 可以很简单的实现分页效果。要创建一个基本的分页可以在

      元素上添加 .pagination 类。然后在
    • 元素上添加 .page-item 类，
    • 元素的 标签上添加 .page-link 类:

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>分页的基本结构h1>
      13. 			<ul class="pagination">
      14. 				<li class="page-item"><a class="page-link" href="#">上一页a>li>
      15. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      16. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      17. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      18. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      19. 			ul>
      20. 		div>
      21. 	body>
      22. html>

      运行结果

      活动状态

      在Bootstrap中，可以通过在对应的

    • 元素上添加.active类来高亮显示当前页。

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>当前页页码状态h1>
      13. 			<ul class="pagination">
      14. 				<li class="page-item"><a class="page-link" href="#">上一页a>li>
      15. 				<li class="page-item active"><a class="page-link" href="#">1a>li>
      16. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      17. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      18. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      19. 			ul>
      20. 		div>
      21. 	body>
      22. html>

      运行结果

      禁用状态

      在Bootstrap中，可以通过在

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>禁用状态h1>
      13. 			<ul class="pagination">
      14. 				<li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页a>
      15. 				li>
      16. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      17. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      18. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      19. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      20. 			ul>
      21. 		div>
      22. 	body>
      23. html>

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

      运行结果

      分页大小

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>分页大小h1>
      13. 			<h2>默认大小：h2>
      14. 			<ul class="pagination">
      15. 				<li class="page-item"><a class="page-link" href="#">上一页a>
      16. 				li>
      17. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      18. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      19. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      20. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      21. 			ul>
      22. 			<h2>大型大小：h2>
      23. 			<ul class="pagination pagination-lg">
      24. 				<li class="page-item"><a class="page-link" href="#">上一页a>li>
      25. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      26. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      27. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      28. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      29. 			ul>
      30. 			<h2>小型大小：h2>
      31. 			<ul class="pagination pagination-sm">
      32. 				<li class="page-item"><a class="page-link" href="#">上一页a>li>
      33. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      34. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      35. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      36. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      37. 			ul>
      38. 		div>
      39. 	body>
      40. html>

      运行结果

      分页对齐

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>分页对齐h1>
      13. 			<h2>居中对齐：h2>
      14. 			<ul class="pagination justify-content-center">
      15. 				<li class="page-item"><a class="page-link" href="#">上一页a>
      16. 				li>
      17. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      18. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      19. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      20. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      21. 			ul>
      22. 			<h2>右对齐：h2>
      23. 			<ul class="pagination justify-content-end">
      24. 				<li class="page-item"><a class="page-link" href="#">上一页a>li>
      25. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      26. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      27. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      28. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      29. 			ul>
      30. 			<h2>左对齐：h2>
      31. 			<ul class="pagination justify-content-start">
      32. 				<li class="page-item"><a class="page-link" href="#">上一页a>li>
      33. 				<li class="page-item"><a class="page-link" href="#">1a>li>
      34. 				<li class="page-item"><a class="page-link" href="#">2a>li>
      35. 				<li class="page-item"><a class="page-link" href="#">3a>li>
      36. 				<li class="page-item"><a class="page-link" href="#">下一页a>li>
      37. 			ul>
      38. 		div>
      39. 	body>
      40. html>

      运行结果

      面包屑（Breadcrumbs）

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

      实例

      1. html>
      2. <html lang="en">
      3. 	<head>
      4. 		<title>Bootstrap 实例title>
      5. 		<meta charset="utf-8">
      6. 		<meta name="viewport" content="width=device-width, initial-scale=1">
      7. 		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
      8. 		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js">script>
      9. 	head>
      10. 	<body>
      11. 		<div class="container mt-3">
      12. 			<h1>面包屑导航h1>
      13. 			<nav aria-label="breadcrumb">
      14. 				<ol class="breadcrumb">
      15. 					<li class="breadcrumb-item"><a href="#">首页a>li>
      16. 					<li class="breadcrumb-item"><a href="#">部分a>li>
      17. 					<li class="breadcrumb-item active" aria-current="page">当前页面li>
      18. 				ol>
      19. 			nav>
      20. 		div>
      21. 	body>
      22. html>

      在这个例子中，.breadcrumb类被应用于

        元素，它表示面包屑导航的容器。每个
      1. 元素都使用.breadcrumb-item类，表示一个单独的面包屑链接。

        注意，在Bootstrap 5中，必须使用

  • 相关阅读:
    汉威科技光纤预警系统，守护油气长输管道“大动脉”
    101道算法JavaScript描述【二叉树】9
    爆肝3万字，最硬核丨Mysql 知识体系、命令全集 【建议收藏 】
    vue3 + vue-router + keep-alive缓存页面
    【Rust】快速教程——一直在单行显示打印、输入、文件读写
    SpringBoot-37-RPC概述
    大文件怎么实现切片上传？「硬核」
    [CSS]常见布局技巧
    antd4 icon使用svg
    400电话呼叫中心-佳音通讯400电话
  • 原文地址：https://blog.csdn.net/m0_74293254/article/details/132759195