• 学习Bootstrap 5的第十一天

    目录

    折叠

    基础的折叠

    实例

    Accordion（手风琴）

    实例

    导航

    导航菜单

    实例

    导航对齐方式

    实例

    垂直导航栏

    实例

    动态选项卡

    实例

    胶囊状动态选项卡

    实例

    等宽的选项卡/胶囊的下拉菜单

    实例

    导航栏

    基础的导航栏

    实例

    垂直导航栏

    实例

    居中对齐的导航栏

    实例

    不同颜色导航栏

    实例

    品牌/Logo

    实例

    折叠导航栏

    实例

    下拉菜单导航栏

    实例

    导航栏菜单和按钮

    实例

    导航栏文本

    实例

    固定导航栏

    实例

    导航栏案例

    实例

    折叠

    基础的折叠

    在 Bootstrap 5 中，折叠效果可以通过添加特定的属性和类来轻松实现内容的显示和隐藏。具体步骤如下：

    1、创建一个可折叠的元素，通常使用

    标签，并为其添加 .collapse 类，以指示它是可折叠的。

    1. <div class="collapse" id="demo">
    2.   
    3.   ...
    4. div>

    2、在按钮或链接中添加 data-bs-toggle="collapse" 属性，以触发折叠效果，并使用 data-bs-target="#id" 或 href="#id" 属性将按钮或链接与要折叠的元素关联起来。

    1. <button type="button" data-bs-toggle="collapse" data-bs-target="#demo">
    2.   点击我
    3. button>

    或者，也可以使用 元素代替

  • 可以通过添加其他 HTML 元素或类来自定义表单和按钮的样式和功能。例如，可以添加标签、图标或其他类名来修饰并扩展表单和按钮的外观和行为。

    • 注意：也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签。

    实例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>Bootstrap5 实例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. 			
    13. 			<nav class="navbar navbar-expand-lg navbar-light bg-light">
    14. 				<div class="container-fluid">
    15. 					<a class="navbar-brand" href="#">品牌a>
    16. 					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
    17. 						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    18. 						<span class="navbar-toggler-icon">span>
    19. 					button>
    20. 					<div class="collapse navbar-collapse" id="navbarNav">
    21. 						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
    22. 							<li class="nav-item">
    23. 								<a class="nav-link active" aria-current="page" href="#">首页a>
    24. 							li>
    25. 							<li class="nav-item">
    26. 								<a class="nav-link" href="#">链接a>
    27. 							li>
    28. 							<li class="nav-item dropdown">
    29. 								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
    30. 									data-bs-toggle="dropdown" aria-expanded="false">
    31. 									下拉菜单
    32. 								a>
    33. 								<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    34. 									<li><a class="dropdown-item" href="#">操作a>li>
    35. 									<li><a class="dropdown-item" href="#">另一个操作a>li>
    36. 									<li>
    37. 										<hr class="dropdown-divider">
    38. 									li>
    39. 									<li><a class="dropdown-item" href="#">其他内容a>li>
    40. 								ul>
    41. 							li>
    42. 							<li class="nav-item">
    43. 								<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用a>
    44. 							li>
    45. 						ul>
    46. 						
    47. 						<form class="d-flex">
    48. 							<span class="input-group-text" id="basic-addon1">@span>
    49. 							<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
    50. 							<button class="btn btn-outline-success" type="submit">Searchbutton>
    51. 						form>
    52. 					div>
    53. 				div>
    54. 			nav>
    55. 		div>
    56. 	body>
    57. html>

    运行结果

    导航栏文本

    在 Bootstrap 5 中，可以使用 .navbar-text 类来设置导航栏中的非链接文本。这个类可以应用于 或

    等元素上，以确保文本在水平方向上对齐，并与导航栏中其他元素具有相同的颜色和内边距。

    实例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>Bootstrap5 实例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. 			<nav class="navbar navbar-expand-lg navbar-light bg-light">
    13. 				<div class="container-fluid">
    14. 					<a class="navbar-brand" href="#">品牌a>
    15. 					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
    16. 						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    17. 						<span class="navbar-toggler-icon">span>
    18. 					button>
    19. 					<div class="collapse navbar-collapse" id="navbarNav">
    20. 						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
    21. 							<li class="nav-item">
    22. 								<a class="nav-link active" aria-current="page" href="#">首页a>
    23. 							li>
    24. 							<li class="nav-item">
    25. 								<a class="nav-link" href="#">链接a>
    26. 							li>
    27. 						ul>
    28. 						
    29. 						<span class="navbar-text">
    30. 							欢迎登录
    31. 						span>
    32. 					div>
    33. 				div>
    34. 			nav>
    35. 		div>
    36. 	body>
    37. html>

    运行结果

    固定导航栏

    在 Bootstrap 5 中，可以使用以下类来实现固定导航栏：

    • 要将导航栏固定在页面的顶部，可以使用.fixed-top类。例如： 
      1. <nav class="navbar fixed-top navbar-light bg-light">
      2.   
      3. nav>

            这样导航栏就会固定在页面的顶部。

    • 要将导航栏固定在页面的底部，可以使用.fixed-bottom类。例如： 
      1. <nav class="navbar fixed-bottom navbar-light bg-light">
      2.   
      3. nav>
      这样导航栏就会固定在页面的底部。
    • 如果想要导航栏在滚动经过它时固定在页面的顶部（sticky效果），可以使用.sticky-top类。例如： 
      1. <nav class="navbar sticky-top navbar-light bg-light">
      2.   
      3. nav>
      这样导航栏会在滚动经过它时固定在页面的顶部。

    需要注意的是，.sticky-top类在 IE11 及更早版本中不起作用，IE11 将其视为position:relative。但在现代浏览器中，这个类应该能够实现预期的效果。

    实例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>Bootstrap5 实例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 style="height:1500px">
    11. 		<div class="container mt-3">
    12. 			<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    13. 				<div class="container">
    14. 					<a class="navbar-brand" href="#">固定顶部导航栏a>
    15. 				div>
    16. 			nav><br>
    17. 			<div class="container-fluid" style="margin-top:80px">
    18. 				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。p>
    19. 				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。p>
    20. 				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。p>
    21. 				<p>一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。p>
    22. 			div>
    23. 			<nav class="navbar fixed-bottom navbar-expand-lg navbar-light bg-light">
    24. 				<div class="container">
    25. 					<a class="navbar-brand" href="#">固定底部导航栏a>
    26. 				div>
    27. 			nav>
    28. 		div>
    29. 	body>
    30. html>

    运行结果

    导航栏案例

    实例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>Bootstrap5 实例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. 		<style>
    10. 			.search-form {
    11. 				display: flex;
    12. 				align-items: center;
    13. 			}
    14.  
    15. 			.search-input {
    16. 				width: 200px;
    17. 				margin-right: 10px;
    18. 			}
    19. 		style>
    20. 	head>
    21. 	<body>
    22. 		<div class="container mt-3">
    23. 			
    24. 			<nav class="navbar navbar-expand-lg navbar-light bg-light">
    25. 				<div class="container-fluid">
    26. 					<a class="navbar-brand" href="#">品牌a>
    27. 					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
    28. 						aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    29. 						<span class="navbar-toggler-icon">span>
    30. 					button>
    31. 					<div class="collapse navbar-collapse" id="navbarNav">
    32. 						<ul class="navbar-nav me-auto mb-2 mb-lg-0">
    33. 							<li class="nav-item">
    34. 								<a class="nav-link active" aria-current="page" href="#">首页a>
    35. 							li>
    36. 							<li class="nav-item">
    37. 								<a class="nav-link" href="#">关于a>
    38. 							li>
    39. 							<li class="nav-item">
    40. 								<a class="nav-link" href="#">服务a>
    41. 							li>
    42. 							<li class="nav-item dropdown">
    43. 								<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
    44. 									data-bs-toggle="dropdown" aria-expanded="false">
    45. 									子产品
    46. 								a>
    47. 								<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    48. 									<li><a class="dropdown-item" href="#">子产品1a>li>
    49. 									<li><a class="dropdown-item" href="#">子产品2a>li>
    50. 									<li>
    51. 										<hr class="dropdown-divider">
    52. 									li>
    53. 									<li><a class="dropdown-item" href="#">子产品3a>li>
    54. 								ul>
    55. 							li>
    56. 							<li class="nav-item">
    57. 								<a class="nav-link" href="#" tabindex="-1" aria-disabled="true">联系我们a>
    58. 							li>
    59. 						ul>
    60. 						
    61. 						<form class="d-flex search-form">
    62. 							<input id="search-input" class="form-control search-input" type="search"
    63. 								placeholder="Search" aria-label="Search">
    64. 							<button id="search-btn" class="btn btn-primary" type="button">搜索button>
    65. 						form>
    66. 					div>
    67. 				div>
    68. 			nav>
    69. 		div>
    70. 		<script>
    71. 			// 获取搜索框和按钮元素
    72. 			var searchInput = document.getElementById('search-input');
    73. 			var searchBtn = document.getElementById('search-btn');
    74.  
    75. 			// 点击搜索按钮时触发跳转到百度搜索结果页
    76. 			searchBtn.addEventListener('click', function() {
    77. 				var searchText = searchInput.value;
    78. 				if (searchText.trim() !== '') {
    79. 					var url = 'https://www.baidu.com/s?wd=' + encodeURIComponent(searchText);
    80. 					window.location.href = url;
    81. 				}
    82. 			});
    83. 		script>
    84. 	body>
    85. html>

    运行结果

  • 相关阅读:
    Docker 网络与Cgroup资源限制
    【WIFI】【WPS】基础介绍（主要根据sniffer log角度和kernel log去介绍）
    Nacos集群配置以及在springboot中使用
    线程 yield()方法有什么用?
    百亿积木市场，能跑出一个“中国乐高”？
    【2024全新版】程序员必会英语词汇表
    《数据结构与算法》之十大基础排序算法
    企业架构LNMP学习笔记29
    Vue 网络处理 - axios 异步请求的使用，请求响应拦截器（最佳实践）
    java数组应用(栈和队列以及酒店模拟)
  • 原文地址：https://blog.csdn.net/m0_74293254/article/details/132795190