Bootstrap02

最新推荐文章于 2024-09-15 17:50:36 发布
最新推荐文章于 2024-09-15 17:50:36 发布
阅读量66 收藏
点赞数
分类专栏： Java 文章标签： p2p linq 网络协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65423584/article/details/124549910
版权

思维导图： 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例3:首页新书上架&热门书籍实现</title>
	    <!-- 引入Bootstrap的css(样式) -->
	    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">   
		<style type="text/css">
		    .navbar-collapse{
				flex-grow:0;/* 固定容器中 1代表弹性扩大占用父容器剩余空间 0代表不占用 */
			}
			.form-group{
				width:300px;/* 宽度 */
				margin-left:auto;/*左间距自适应 自动  */
				margin-right:auto;/*右间距自适应 自动  */
				margin-top:31px;/* 100-38=62/2=31px */
				margin-bottom:auto;
			}
			.input-group{
				margin-left:auto;
				margin-right:auto;
				width:300px;
				margin-top:30px;
			}	
			.ss{
				height:100px;/*高度 */
				margin-top:30px;/* 上间距 */
				background-color:#6F6E64;/* 背景颜色 */
			}
			/* 画像 文字居中 */
			.figure{
				text-align:center;
			}
		</style>
	</head>
	<body>
		<!-- 导航区域:导航条主件-->
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
		<a class="navbar-brand" href="#">您好,欢迎来到牛逼的屌丝书店</a>
		    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
		    <span class="navbar-toggler-icon"></span>
		   </button>
		   <div class="collapse navbar-collapse flost-right" id="navbarNav">
		   <ul class="navbar-nav">
		     <li class="nav-item active">
		      <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">登录</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link" href="#">注册</a>
		    </li>
		    <li class="nav-item">
		      <a class="nav-link href="#">我的购物车</a>
		    </li>
		  </ul>
		</div>	
			
		</div>
</nav>

<!--开始使用栅格搭建主页框架  -->
<div class="container">
	<!-- 第一行:搜索区域 一列-->
	<div class="row ss">
	 <div class="col">
		<!-- 搜索区域 -->
		<from>
		 <div clas="from-group">
			 <!--输入框组合 -->
			 <div class="input-group mb-3">
			 <input type="text" class="form-control" placeholder="书籍关键字"  placeholder="Recipient's username" aria-label="Recipient's username"></input>
		     <div class="input-group-append">
				<button class="btn btn-primary" type="button" id="button-addon2">查询</button>
	   </div>
	</div>
 </div>
		</from>
			
			
	  </div>
	 </div>
	 
	 <!-- 第二行-->
	 <div class="row" style="background-color:#26A4FF;">
	  <div class="col-3">
	 	左3为书籍分类
		</div>
		
		<div class="col-9" style="background-color:#FFE4A2;">
		<!-- 右9为 轮播图&新书上架&热门书籍 -->
		
		<!-- 右9中第一行 -->
		<div class="row" style="background-color:pink;">
		 <div class="col">
			轮播图
		</div>
	</div>		
		
		<!-- 右9中第二行 新书上架 5列 -->		
		<div class="row" style="background-color:#A4C9F6;">
			 <div class="col">
				<figure class="figure">
  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
</figure>
			</div>
			<div class="col">
				 <div class="col">
								<figure class="figure">
				  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
				  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
				</figure>
			</div>
			<div class="col">
				 
								<figure class="figure">
				  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
				  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
				</figure>
			</div>
			
				 <div class="col">
								<figure class="figure">
				  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
				  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
				</figure>
			</div>
		
				 <div class="col">
								<figure class="figure">
				  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
				  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
				</figure>
			</div>
		</div>		
			
			<!-- 右9中第三行 热门书籍 5列 -->		
			<div class="row" style="background-color:#F5A195s;">
				 <div class="col">
				 <div class="col">
								<figure class="figure">
				  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
				  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
				</figure>
				</div>
				<div class="col">
					 <div class="col">
									<figure class="figure">
					  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
					  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
					</figure>
				</div>
				<div class="col">
					
									<figure class="figure">
					  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
					  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
					</figure>
				</div>
				
					 <div class="col">
									<figure class="figure">
					  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
					  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
					</figure>
				</div>
				<div class="col">
					 <div class="col">
									<figure class="figure">
					  <img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
					  <figcaption class="figure-caption"><b>冷间谍</b></figcaption>
					</figure>
				</div>
			</div>	
				
	   </div>
	  </div>
	 
   </div>

		<!-- 引入jQuery的类库 -->
			<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		    <!-- 引入Bootstrap的类库-->
			<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

 效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例5:实现登录&注册页面</title>
		<!-- 支持手机端 -->
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<style type="text/css">
	     form{
			 width:300px;
			 text-align:center;
			 margin-left:auto;
			 margin-right:auto;
			 margin-top:100px;
		 }
				 form button{
					 width:300px;
					 margin-bottom:20px;
				 }
				 form h2{
					 margin-bottom:20px;
				 }
	 </style>
	</head>
	<body>
		<form>
			<h2>用户注册</h2>
  <div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>
  <div class="form-group">
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">注册</button>
  <div class="form-group">
    <label class="form-check-label" for="exampleCheck1">&copy;2017-2022</label>
  </div>
</form>
<!-- 引入bootstrap的css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
		<!-- 分别引入jQuery和bootstrap的类库 -->
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

 效果展示： 

 

 

 

 

半条O魚
关注
专栏目录
bootstrap02
hmjcxy的博客
04-28 1120
bootstrap图片轮播、首页实现书籍分类、新书和热门上的一个上架、以及实现登录的框架
BootStrap02
m0_67477525的博客
04-28 87
思维导图 课堂案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例4：首页整合</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" .
JAVA之bootstrap02
m0_62528678的博客
04-29 140
案例一到案例三：源码整合 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例4：首页整合</title> <!-- 支持手机端 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale
学习bootStrap02
qq_58635769的博客
04-19 199
1.第一步引入文件 <script src="../lib/jquery-3.2.1.js"></script> <link href="../lib/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.js"></script> 2.相关解释： tex
Bootstrap02——主页搭建
weixin_65975275的博客
05-06 871
bootstrap——如何主页搭建
【前端框架之Bootstrap02】布局与导航
03-02
我最近也使用了bootstrap来布局，来搞导航。但是效果很不理想，所以我这里先来系统的看看这两块，若是仍然一头雾水的话，那么。。。。我就再学习就完了。好了，废话结束，我们进入今天的学习吧。说道栅格系统，我们...
JavaWeb Bootstrap02主页搭建
weixin_62270300的博客
05-04 683
上期回顾 Bootstrap01基本使用https://blog.csdn.net/weixin_62270300/article/details/124547772?spm=1001.2014.3001.5501 目录 一、顶部页面 top.jsp(顶部代码) 二、首页 index.jsp(主页界面) 三、增加商品界面 insert.jsp(增加界面) 一、顶部页面 点击右边图标下拉出来的效果如下👇 点击哪个跳哪个界面 top.jsp(顶部代码) <%@...
P2P应用
SXXYNHHXX的博客
09-10 941
当谈论P2P（点对点）应用程序时，我们实际上是在讨论一种网络架构和通信模式，它允许设备（或节点）直接连接并共享资源，而无需传统的客户端-服务器模型。P2P应用程序在许多领域都有广泛的应用，包括文件共享、实时通信、区块链等。
SpringBoot用kafka.listener监听接受Kafka消息
qq_27860623的博客
09-12 305
【代码】SpringBoot用kafka.listener监听接受Kafka消息。
Kafka 消息丢失如何处理？
最新发布
java_121388的博客
09-15 715
监控是最基础的保障手段。很多时候，消息丢失的“锅”其实是消费者自己在消费时出了问题，明明没处理完却偷偷提交了 offset，让 Kafka 以为消息已经处理完毕了。最常见的是消费者拉取了消息，但是业务处理失败，或者消费后没有提交 offset，导致消息“看似”消费了，实际根本没处理。面试官顿时一愣，沉默了片刻后，可能有点不耐烦，说道：“这个你不用管，反正现在发现消息丢失了，你就说如何处理。这个方式虽然不能彻底避免消息丢失，但能保证消息不会轻易丢失，特别是一些重要业务场景中，消息的可靠性至关重要。
计算机网络的组成
song0789的博客
09-11 691
计算机网络是一个复杂的系统，由硬件、软件、协议、边缘部分和核心部分组成。硬件部分包括主机、通信设备和链路；软件部分包括操作系统和应用软件；协议部分定义了通信规则；工作方式上分为边缘部分和核心部分；逻辑功能上分为资源子网和通信子网。不同的组成部分和功能共同作用，实现了现代计算机网络的高效运作。
ros中地面站和无人机跨平台数据传递，使用 UDP 进行跨平台传输（python代码）
zhangzhao147的博客
09-13 519
1_GroundObject.msg 文件的内容应为： VEHICLE_OBJ_COOP.msg 文件的内容应为： 1.2 文件夹结构 1.3 CMakeLists.txt修改 在 CMakeLists.txt 中，需要确保自定义消息的生成和依赖性已经添加。 1.4 package.xml 在 package.xml 中，添加对 message_generation 和 message_runtime 的依赖： 2.UDP 发送代码（ground_udp_publisher.py） 2.1代码解释 s
计算机网络
weixin_44418828的博客
09-13 967
TCP设有一个保活计时器，服务器每收到一次客户端的请求后都会重新复位这个计时器，时间通常是设置为2小时，若两小时还没有收到客户端的任何数据，服务器就会发送一个探测报文段，以后每隔75秒发送一次。若一连发送10个探测报文仍然没反应，服务器就认为客户端出了故障，接着就关闭连接。
交换技术是一种在计算机网络和通信系统中广泛应用的关键技术，它主要通过交换设备（如交换机、路由器等）实现数据的转发和传输
weixin_45544617的博客
09-10 674
在互联网中，交换技术广泛应用于数据传输和通信，通过路由器和交换机等交换设备，数据能够在不同的互联网节点之间进行传输和交换，实现了全球范围内的互联通信。：软交换技术是一种基于软件实现的通信交换技术，它通过将呼叫控制和信令处理功能独立出来，并使用标准化的IP网络进行传输，在保证服务质量的同时实现了对多媒体业务和数据业务的支持。：电路交换是一种面向连接的交换技术，它在建立通信连接时，需要占用一定的通信资源（如带宽、传输线路等），并且在通信连接上保持一定的状态。二、交换技术的基本原理。
Linux: network: IPv6: ESP: UDP checksum error 一例
mzhan017的博客
09-11 538
最近遇到一个问题，操作系统的内核版本是：3.10.0-693.21.1.el7.x86_64 #1 SMP Wed Mar 7 19:03:37 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux。使用的是virtio-net虚拟网卡，设置网卡的MTU-1500，配置IP6的地址，用ESP加密UDP包，如果UDP内部数据的len是1451，发出去的包会被分片，而且发出去的包里UDP包头的checksum值是错误的。最好的方式就是从网上找是不是已知问题。升级系统到最新的版本。
webSocket
weixin_45836841的博客
09-11 761
他是除了http之外可以跟后端通信的方式。http协议是短链接，因为请求之后，都会关闭连接，下次重新请求数据，需要再次打开连接。WebSocket协议是一种长连接，只需要通过一次请求来初始化链接，然后所有的请求和响应都是通过这个TCP链接进行通信。
Vue3使用Websocket进行跨页面通信
weixin_72439307的博客
09-12 370
websocket跨页面通信
数据链路层/ARP协议
m0_74830524的博客
09-13 1125
当一个报文需要从一个主机转发到另一个主机的时候，表面上是 IP 报文的跨网络转发，但也并不是直接就将数据报转发到对应的主机了，而是从网络层更下面的数据链路层一跳一跳的转发到下一个链路层，数据链路层实现的是到达短距离目的地址的通信，而 IP 实现的是到达最终目标地址的通信。 本篇开始将详细的介绍有关数据链路层的相关知识，以及在链路层中的 ARP 协议。其中主要涉及的知识有：以太网和对应的帧格式、MAC 地址、MTU、交换机以及 ARP 协议。
Bootstrap 02：布局与导航详解 - 栅格系统与实践
在本篇关于【前端框架之Bootstrap02】布局与导航的文章中，作者首先提到自己近期在学习和应用Bootstrap过程中遇到困难，尽管年纪可能是个因素，但他决定通过逐步深入研究来提升自己的技能。Bootstrap栅格系统是文章...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值