devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Bootstrap【前端开发框架二】_img class=d-block w-10是什么意思

作者：Monodyee | 2024-03-21 21:01:06

赞

踩

img class=d-block w-10是什么意思

如需温习上一节内容，请点击下方链接进行跳转：

Bootstrap01【前端开发框架】_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之AJAX快速入门_云彩123的博客-CSDN博客如需温习上一节内容，请点击下方链接进行跳转。JavaWEB之MVC购物车_云彩123的博客-CSDN博客1.引入问题1：先有servlet还是先有jsp？先有servletweb发展史：HTML静态页面---serlvet----jsp问题2：web开发模式发展：模型1 模型2只有静态页面的时候： HTML+css出现servlet之后：可以进行交互模型1：第一代----把所有的代码（java+.https://blog.csdn.net/m0_64522859/article/details/124506442

目录

Bootstrap02——实现以下五个案例为本节内容重点：

案例一：首页轮播图的实现：

案例二：首页书籍分类实现：

案例三：首页新书上架&热门书籍实现：

页面内容：画像-Figure

案例四：首页整合：

案例五：实现登录7注册页面：

Bootstrap02——实现以下五个案例为本节内容重点：

  1. 组件：轮播-Carousel
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<!-- 支持手机端 -->
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<title></title>
  9. 		<!-- css -->
  10. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  11. 		<!-- js -->
  12. 		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  13. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  14. 		<style type="text/css">
  15. 			.navbar-collapse{
  16. 				flex-grow: 0;
  17. 			}
  18. 			.form-group{
  19. 				width: 280px;
  20. 				margin: 0 auto;
  21. 			}
  22. 		</style>
  23. 		
  24. 		<script type="text/javascript">
  25. 			// 轮播图自动播放
  26. 			$(function(){
  27. 				$('.carousel').carousel({
  28. 				  interval: 50
  29. 				})
  30. 			});
  31. 		</script>
  32. 		
  33. 	</head>
  34. 	<body>
  35. 		
  36. 		<!-- 导航条的设置 -->
  37. 		<nav class="navbar navbar-expand-lg navbar-light bg-light">
  38. 			<!-- 固定容器 -->
  39. 			<div class="container">
  40. 				<a class="navbar-brand" href="#">您好！欢迎来到屌丝商城</a>
  41. 				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  42. 				  <span class="navbar-toggler-icon"></span>
  43. 				</button>
  44. 				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  45. 				  <div class="navbar-nav">
  46. 				    <a class="nav-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
  47. 				    <a class="nav-item nav-link" href="#">注册</a>
  48. 				    <a class="nav-item nav-link" href="#">登录</a>
  49. 				    <a class="nav-item nav-link disabled" href="#">我的购物车</a>
  50. 				  </div>
  51. 				</div>
  52. 			</div>
  53. 		</nav>
  54. 		<!-- 利用栅格系统实现搜索区域，左侧列表，轮播图，热门书籍 -->
  55. 		<div class="container">
  56. 			<!-- 第一行  row -->
  57. 			<div class="row" style="margin-top: 10px;">
  58. 				<div class="col">
  59. 					<div class="jumbotron">
  60. 						<!-- 表单组件 -->
  61. 						<form action = "" method = "post">
  62. 						  <div class="form-group">
  63. 							  <!-- 输入框组 -->
  64. 							  <div class="input-group mb-3">
  65. 							    <input type="text" class="form-control" placeholder="书籍名" aria-label="Recipient's username" aria-describedby="button-addon2">
  66. 							    <div class="input-group-append">
  67. 							      <button class="btn btn-primary" type="button" id="button-addon2">搜索</button>
  68. 							    </div>
  69. 							  </div>
  70. 						  </div>
  71. 						</form>
  72. 					</div>
  73. 				</div>
  74. 			</div>
  75. 				
  76. 			<!-- 第二行  左3右9 -->
  77. 			<div class="row">
  78. 				<div class="col-md-3 col-12" style="background-color: pink;">
  79. 					左侧列表
  80. 				</div>
  81. 				<div class="col-md-9 col-12" style="background-color: skyblue;">
  82. 					<!-- 右侧区域 -->
  83. 					<!-- 第一行   轮播图 -->
  84. 					<!-- 轮播图的核心：carousel -->
  85. 					<div class="row">
  86. 						<div class="col">
  87. 							<!-- 轮播图 -->
  88. 							<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  89. 								<!-- 小按钮 -->
  90. 							  <ol class="carousel-indicators">
  91. 							    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
  92. 							    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
  93. 							    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  94. 							  </ol>
  95. 							  <!-- carousel-inner  控制图片区域 -->
  96. 							  <div class="carousel-inner">
  97. 							    <div class="carousel-item active">
  98. 							      <img class="d-block w-100" src="img/banner/lb1.png" alt="First slide">
  99. 							    </div>
  100. 							    <div class="carousel-item">
  101. 							      <img class="d-block w-100" src="img/banner/lb2.jpg" alt="Second slide">
  102. 							    </div>
  103. 							    <div class="carousel-item">
  104. 							      <img class="d-block w-100" src="img/banner/lb3.jpg" alt="Third slide">
  105. 							    </div>
  106. 							  </div>
  107. 							  <!-- 2个标签用来实现左右切换 -->
  108. 							  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
  109. 							    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  110. 							    <span class="sr-only">Previous</span>
  111. 							  </a>
  112. 							  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
  113. 							    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  114. 							    <span class="sr-only">Next</span>
  115. 							  </a>
  116. 							</div>
  117. 						</div>
  118. 					</div>
  119. 					
  120. 					<!-- 第二行  热门书籍列表 -->
  121. 					
  122. 					
  123. 					
  124. 				</div>
  125. 				
  126. 			</div>
  127. 		</div>
  128. 		
  129. 		
  130. 		
  131. 	</body>
  132. </html>

  • 案例二：首页书籍分类实现：

  1. 组件：列表组-List group
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. 	<head>
  5. 		<meta charset="utf-8">
  6. 		<!-- 支持手机端 -->
  7. 		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8. 		<title></title>
  9. 		<!-- css -->
  10. 		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  11. 		<!-- js -->
  12. 		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
  13. 		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
  14. 		<style type="text/css">
  15. 			.navbar-collapse{
  16. 				flex-grow: 0;
  17. 			}
  18. 			.form-group{
  19. 				width: 280px;
  20. 				margin: 0 auto;
  21. 			}
  22. 		</style>
  23. 		
  24. 		<script type="text/javascript">
  25. 			// 轮播图自动播放
  26. 			$(function(){
  27. 				$('.carousel').carousel({
  28. 				  interval: 50
  29. 				})
  30. 			});
  31. 		</script>
  32. 		
  33. 	</head>
  34. 	<body>
  35. 		
  36. 		<!-- 导航条的设置 -->
  37. 		<nav class="navbar navbar-expand-lg navbar-light bg-light">
  38. 			<!-- 固定容器 -->
  39. 			<div class="container">
  40. 				<a class="navbar-brand" href="#">您好！欢迎来到屌丝商城</a>
  41. 				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  42. 				  <span class="navbar-toggler-icon"></span>
  43. 				</button>
  44. 				<div class="collapse navbar-collapse" id=
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/282719
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号