Bootstrap中的轮播图&表单&列表组&图像

最新推荐文章于 2024-01-15 19:39:34 发布
最新推荐文章于 2024-01-15 19:39:34 发布
阅读量1.2k 收藏
点赞数
分类专栏： Java 文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63719049/article/details/124520249
版权

Bootstrap，今天我用了一下他的其他的代码，分享一下
在这里插入图片描述
实现的效果图如下：
在这里插入图片描述

在这里插入图片描述

如果单纯自己打的话可能打的时间有点久，因为样式要一个个调，但是使用Bootstrap前端框架就只需要修改一下就行，效率提升了非常多
下面的这些代码都是copy的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例四</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			.navbar-collapse{
				flex-grow: 0;
			}
			.input-group {
				
				margin-left: auto;
				margin-right: auto;
				margin-top: 30px;
			}
			.ss{
				height: 100px;
				margin-top: 30px;
				background-color: #0056B3;
			
			}
			.list-group,#carouselExampleIndicators{
				margin-top: 30px;
			}
			.carousel-indicators li{
				background-color: blue;
			}
			.xxx{
				margin-top: 30px;
				background-image: url(img/title_bj.png);
				background-repeat: no-repeat;
				color: white;
				font-size: 18px;
				padding-left: 20px;
				margin-bottom: 20px;
			}
		</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" 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 ">我的购物车</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- 三个 -->
		<div class="container">
			<div class="row ss">
				<div class="col" style="background-color: pink;">
					<!-- 搜索区-->
					<form class="form-inline">
						<div class="input-group mb-3">
							<input type="text" class="form-control" placeholder="关键字" aria-label="Recipient's username" aria-describedby="button-addon2">
							<div class="input-group-append">
								<button class="btn btn-primary" type="button" id="button-addon2">查询</button>
							</div>
						</div>
					</form>
				</div>

			</div>
			<div class="row">
				<div class="col-3">
					<div class="list-group">
						<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
							书籍分类
						</a>
						<a href="#" class="list-group-item list-group-item-action">爱情</a>
						<a href="#" class="list-group-item list-group-item-action">科幻</a>
						<a href="#" class="list-group-item list-group-item-action">系统</a>
						<a class="list-group-item list-group-item-action ">校园</a>
					</div>
				</div>
				<div class="col-9" >
					<!-- 新书上架等 -->
					<div class="row">
						<div class="col">
							<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
								<ol class="carousel-indicators">
									<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
									<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
								</ol>
								<div class="carousel-inner">
									<div class="carousel-item active">
										<img src="img/lb1.png" class="d-block w-100" alt="...">
									</div>
									<div class="carousel-item">
										<img src="img/lb2.jpg" class="d-block w-100" alt="...">
									</div>
									<div class="carousel-item">
										<img src="img/lb3.jpg" class="d-block w-100" alt="...">
									</div>
									<div class="carousel-item">
										<img src="img/lb4.jpeg" class="d-block w-100" alt="...">
									</div>

								</div>
								<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="sr-only">Previous</span>
								</button>
								<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="sr-only">Next</span>
								</button>
							</div>
						</div>

					</div>
					<div class="xxx">
						
						新书上架
					</div>
					
					<div class="row">
						<div class="col">
							<figure class="figure">
								<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/pic_c3.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/2.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/3.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/4.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>

					</div>
					
						<div class="xxx">
							热门书籍
						</div>

					
					<div class="row">
						<div class="col">
							<figure class="figure">
								<img src="img/6.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/7.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/8.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/9.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/pic_c10.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption">冷</figcaption>
							</figure>
						</div>

					</div>

				</div>

			</div>


		</div>

		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>
追梦梓辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap 布局图片列表
mao_mu_mu的博客
12-07 9801
  pageEncoding="UTF-8"%> http://java.sun.com/jsp/jstl/core"%>  String path = request.getContextPath();     String basePath = request.getScheme() + "://"   + request.getServerName() + ":" +
利用Bootstrap制作轮播图
H&B Blog
07-31 1万+
轮播图 轮播图，顾名思义就是指在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。之前自己用jQuery代码制作了轮播图，现在来看看怎样用Bootstrap框架制作轮播图。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="...
bootstrap轮播图
02-28 295
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-e...
轮播图 （Bootstrap）
海涛高软
05-03 1037
效果图如下： <div class="carousel slide" id="carousel2"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel2" class="a
Bootstrap轮播图
1071178244的博客
02-01 588
// An highlighted block &amp;amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;meta cha
全面解析多种Bootstrap图片轮播效果
11-22
在实际应用中，Bootstrap轮播还可以与其他组件结合，比如加入按钮、链接或表单元素，提供更丰富的用户体验。同时，轮播的响应式设计使其能在不同设备上自适应显示，确保在手机、平板电脑和桌面端都能良好工作。 总...
Bootstrap快速入门之第三章 轮播&画像&列表组&表单 简单案例
qq_61313896的博客
04-30 449
一：轮播-Carousel组件 这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。 轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。 在支持Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。 ...
Bootstrap图片轮播组件Carousel使用方法详解
09-01
Bootstrap的图片轮播组件Carousel是一个强大的功能，用于在网页上创建吸引人的动态图像展示。这个组件大大简化了创建轮播的复杂性，通过内置的CSS和JavaScript，开发者可以快速构建具有专业外观的轮播效果，而无需...
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
09-01
总的来说，通过结合Bootstrap Carousel和Hammer.js，我们可以创建一个支持触屏手势的幻灯片轮播图，提供更自然、直观的用户交互体验，特别适合移动设备用户。这样的实现方法既保留了Bootstrap的简洁性，又增强了其在...
Bootstrap3.3.4中文文档&API.rar
07-26
2. **组件**：Bootstrap提供了一系列预定义的UI组件，如按钮(.btn)、下拉菜单(.dropdown)、导航栏(.navbar)、表单控件(.form-control)、警告提示(.alert)、模态框(.modal)等，大大简化了网页元素的设计。 3. **...
BootStrap 实现轮播图
最新发布
christmassss的博客
01-15 2054
在下载好的文件夹中找到下面的文件，复制到自己的项目中并引入。复制下面的代码到我们的html页面中。添加自己的图片，就可以实现轮播图了。
Bootstrap之轮播图
yy228313的专栏
02-26 2998
代码 轮播图-bootstrap
Bootstrap 轮播图
博客
05-31 1638
&lt;div class="container"&gt; &lt;div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000"&gt; &lt;ol class="carousel-indicators"&gt; &amp
BootStrap轮播图 (自动轮播)
热门推荐
csdn_zy_的博客
09-30 4万+
下面的轮播图已经有了鼠标悬停停止轮播，左右导航，和下方圆点计数器、给图片添加标题，内容等功能 &lt;!--轮播图--&gt; &lt;div class="container" &gt; &lt;div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="200
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值