JAVA之bootstrap02

最新推荐文章于 2022-12-22 14:51:18 发布
最新推荐文章于 2022-12-22 14:51:18 发布
阅读量132 收藏
点赞数
分类专栏： bootstrap 文章标签： webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62528678/article/details/124504392
版权

案例一到案例三：源码整合

<!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" />
		<!-- 引入bootstrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			.navbar-collapse {
				flex-grow: 0;
				/* 1代表弹性扩大占用父容器剩余空间 0代表不占用 */
			}

			.ss {
				height: 100px;
				/* 高度 */
				background-color: #DCDCDC;
				/* 背景颜色 */
				margin-top: 20px;
				/* 上间距 */
			}

			.form-group {
				width: 300px;
				/* 宽度 */
				margin-left: auto;
				/* 左间距 自适应 */
				margin-right: auto;
				/* 右间距 自适应 */
				margin-top: 31px;
				/* (100-38)/2 */
			}

			/* 画像 */
			.figure {
				text-align: center;/* 水平居中 */
				margin-top: 20px;/* 上间距 */
			}
			/* 列表组 轮播图*/
			.list-group,#carouselExampleIndicators{
				margin-top: 30px;/* 上间距 */
			}
			/* 指示灯样式 */
			.carousel-indicators li{
				background-color: blue;
			}
			/* 新书上架=热门书籍样式 */
			.xxx{
				background-image: url(img/title_bj.png);/* 背景图片 */
				background-repeat: no-repeat;/* 不平铺 */
				color: white;/* 字体颜色 */
				font-size: 18px;/* 字体大小 */
				margin-top: 20px;/* 上间距 */
				padding-left: 18px;/* 左内间距 */
			}
		</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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup"
				 aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
					<div class="navbar-nav">
						<a class="nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
						<a class="nav-link" href="#">登录</a>
						<a class="nav-link" href="#">注册</a>
						<a class="nav-link" href="#">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
		<!-- 栅格系统实现首页框架 -->
		<div class="container">
			<!-- 第一行:搜索区域 -->
			<div class="row ss">
				<div class="col">
					<form>
						<div class="form-group">
							<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>
						</div>
					</form>
				</div>
			</div>
			<!-- 第二行 -->
			<div class="row">
				<div class="col-3" style="background-color: pink;">
					<!-- 左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 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 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 href="#" class="list-group-item list-group-item-action">动漫</a>
					</div>
				</div>

				<div class="col-9">
					<!-- 右9-轮播图&新书上架&热门书籍 -->

					<div class="row">
						<div class="col">
							<!-- 右9中第一行轮播图 -->
							<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">
						<!-- 右9中第二行新书上架 -->
						<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/3.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/4.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>
					
					<div class="xxx">
						热门书籍
					</div>

					<div class="row">
						<!-- 右9中第二行新书上架 -->
						<div class="col">
							<figure class="figure">
								<img src="img/5.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/2.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/7.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/2.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/9.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>第一商会</b></figcaption>
							</figure>
						</div>
					</div>

				</div>

			</div>

		</div>
		<!-- 分别引入jQuery的js和Bootstrap的js -->
		<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>

登录注册

<!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" />
		<!-- 引入bootstrap的CSS -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<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;/* 下间距 */
			}
		</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>
		<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>

思维导图：

卡特琳同志
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb--------BootStrap基础
詹煜彪9527
03-07 8096
一. Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 为什么使用 Boots...
Bootstrap2
weixin_63692854的博客
05-01 328
利用Bootstrap中的轮播组件Carousel 列表组件List group 画像Figure 实现了书城主界面（首页）的搭建： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例4：首页导航&搜索区域Bootstrap实现&搭首页框架</title> <!-- 引入boot样式 --> <link re
JAVA bootstrap
simplezhao的博客
07-29 1392
简介 Bootstrap，基于HTML、cSS、JAVASCRIPT的前端框架。 该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效）。 开发人员只需要编写HTML结构,添加 bootstrap固定的class样式,就可以轻松完成指房效果的实现。 作用: Bootstrap使得Web开发更加快捷，高效。 BootStrap,支持响应式开发，解决了移动互联网前端开发问题 响应式布局 响应式布局:一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独
JavaWeb——BootStrap
ZhangJiawen的博客
12-12 216
个人觉得，基础知识掌握之后，后面一些简单模块的实现，可以直接参考官方文档 BootStrap官网 一、BootStrap 简述 BootStrap，基于 HTML、CSS、JavaScript 的前端框架； 该框架已经预先定义好了一套 CSS 样式与相对应的 JS 代码；开发人员只需要编写 HTML 结构，添加 BootStrap 固定的 class 样式，就可以完成指定的效果； 作用： BootStrap 使得 Web 开发更加快捷、高效； BootStrap 支持响应式开发，解决了移动互
【Java学习笔记（三十一）】之Bootstrap介绍与使用，响应式布局的使用
开发小鸽
08-30 668
本文章由公号【开发小鸽】发布！欢迎关注！！！ 老规矩–妹妹镇楼： 一． Bootstrap （一） 概述        一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 （二） 优势        1. Bootstrap框架定义了很多的css样式和js插件，
Java bootstrap-3.4.1-dist 前端框架
最新发布
03-18
1. **栅格系统**：Bootstrap的核心特性之一是其灵活的栅格系统，它允许开发者创建响应式的网页布局。通过使用行(row)和列(column)类，可以轻松地定义元素在不同屏幕尺寸下的显示方式，适应各种设备，从手机到桌面...
java-bootstrap:Java项目的Bootstrap
03-07
Java项目的引导程序实用程序库，... 专案内容描述依赖项管理版本Bootstrap父POMMaven本地存储库安装$ git clone https://github.com/mllopis11/java-bootstrap.git$ cd java-bootstrap$ mvn clean install软件安装去做
书城项目_java实战_bootstrap_
10-03
在这个项目中，开发者将有机会深入理解和应用Java后端技术栈，同时体验到Bootstrap前端框架在构建响应式网页设计中的优势。 1. **Java SSM框架**： - **Spring**：作为核心容器，负责管理对象（bean）的生命周期和...
Bootstrap和Java分页实例第一篇
08-31
Bootstrap和Java分页实例主要涉及前端UI框架Bootstrap与后端Java技术相结合，实现网页的分页功能。Bootstrap是一个流行的开源前端框架，它提供了一系列预先设计的样式和组件，用于快速构建响应式、移动设备优先的...
collecting:Java+Bootstrap问卷平台
05-01
"collecting:Java+Bootstrap问卷平台"是一个基于Java技术和Bootstrap前端框架开发的在线问卷调查系统。这个项目的主要目的是提供一个简单易用的平台，让用户能够创建、发布问卷，并且能够收集和下载问卷的结果。 ...
【java初学】BootStrap
九离的博客
04-06 211
今日内容 1. Bootstrap Bootstrap： 1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 2. 响应式布局。 * 同一套
bootstrap 2.3版与3.0版的使用区别
热门推荐
小鹰信息技术服务部
05-23 1万+
bootstrap已经推出了3.0的新版，看起来2.3.x版本也不会再更新了。那么bootstrap 2.3版与3.0版的区别在哪里呢？下面我们就来介绍一下。Bootstrap 3.0增加了一些新的特性，对于一些类也进行了调整…… bootstrap已经推出了3.0的新版，看起来2.3.x版本也不会再更新了。那么bootstrap 2.3版与3.0版的区别在哪里呢？下面我们就来介绍一
bootstrap版本2与3区别总结
dandan_351的博客
02-21 2689
1bootstrap2与3的区别  bootstrap 2 ：bootstrap.css   bootstrap-response.css 前者存放珊格，后者实现响应式布局 bootstrap3：不存在response只有bootstrap.css即可。 在 Bootstrap 2 中，对框架中的某些关键部分增加了对移动设备友好的样式。 而在 Bootstrap 3 中，重写了整
bootstrap java_Bootstrap和Java分页实例第一篇
weixin_28886649的博客
02-12 173
关于此文bootstrap是前端很流行的框架，正在开发的项目，用bootstrap搭建起来的页面，自我感觉很完美，终于告别了苍白无力的白花花的难看的……的页面了。哈哈。现在遇到了bootstrap的分页与Java后台结合起来的分页封装问题，对于我这个Java菜鸟来说，包装分页还没玩过。故此，在网上找了这个。觉得很不错，所以决定记录到博客里面。还没有实践，决定写完博客去实践。在上图。祝我成功吧！此人...
bootstrapFX
weixin_35757191的博客
12-22 1067
Bootstrap 是一个用于网站和 Web 应用程序开发的前端框架。它包含了 HTML 和 CSS 样式，以及可重用的 JavaScript 插件，帮助开发者快速构建响应式布局、视觉美观的网站和应用。BootstrapFX 是一个使用 Java 编写的库，可以帮助开发者在 JavaFX 应用程序中使用 Bootstrap 样式。它允许你使用 Bootstrap 的 CSS 类来设置 JavaFX...
Java学习笔记之框架bootstrap
qq_41145193的博客
02-11 244
一、概念 一个前端开发的框架，Bootstrap，来自Twitter，是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的，它简介灵活，使得web开发更加快捷。 框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码。 好处： （1）定义了很多的CSS样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。 （2）响应式布局。...
重温java之bootstrap类加载原理
mno2330的博客
09-29 1133
让我们一起跟随ClassLoader里的本地方法 findBootstrapClass()， 进入jvm执行启动类加载器加载类的内部实现。 java 代码 1.private Class findBootstrapClass0(String name) 2. throws ClassNotFoundException 3. { ...
JavaWeb(Springboot)项目使用bootstrap
楊帥
05-27 1586
导入依赖包 <!-- bootstrap --> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>3.3.5</version> </depe...
java如何实现Bootstrap框架
03-04
Java可以通过使用Bootstrap框架的CSS和JavaScript文件来实现Bootstrap框架。具体步骤包括： 1. 下载Bootstrap框架的CSS和JavaScript文件，并将它们添加到Java项目中。 2. 在Java代码中引用Bootstrap框架的CSS和JavaScript文件，以便在网页中使用Bootstrap样式和功能。 3. 使用Java代码编写HTML页面，并在页面中使用Bootstrap的CSS类和JavaScript插件，以实现响应式布局、表单验证、模态框等功能。 4. 在Java代码中处理用户的请求和响应，以实现与Bootstrap框架交互的功能，如表单提交、Ajax请求等。 总之，Java可以通过结合Bootstrap框架的CSS和JavaScript文件，来实现响应式、美观、易用的Web应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值