Bootstrap【前端开发框架二】

已于 2022-05-09 18:09:29 修改
阅读量367 收藏 1
点赞数 2
分类专栏： Bootstrap 文章标签： bootstrap mvc 前端 html eclipse
于 2022-05-03 23:23:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64522859/article/details/124563697
版权

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<!-- js -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.navbar-collapse{
				flex-grow: 0;
			}
			.form-group{
				width: 280px;
				margin: 0 auto;
			}
		</style>
		
		<script type="text/javascript">
			// 轮播图自动播放
			$(function(){
				$('.carousel').carousel({
				  interval: 50
				})
			});
		</script>
		
	</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-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
				    <a class="nav-item nav-link" href="#">注册</a>
				    <a class="nav-item nav-link" href="#">登录</a>
				    <a class="nav-item nav-link disabled" href="#">我的购物车</a>
				  </div>
				</div>
			</div>
		</nav>
		<!-- 利用栅格系统实现搜索区域，左侧列表，轮播图，热门书籍 -->
		<div class="container">
			<!-- 第一行  row -->
			<div class="row" style="margin-top: 10px;">
				<div class="col">
					<div class="jumbotron">
						<!-- 表单组件 -->
						<form action = "" method = "post">
						  <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>
				
			<!-- 第二行  左3右9 -->
			<div class="row">
				<div class="col-md-3 col-12" style="background-color: pink;">
					左侧列表
				</div>
				<div class="col-md-9 col-12" style="background-color: skyblue;">
					<!-- 右侧区域 -->
					<!-- 第一行   轮播图 -->
					<!-- 轮播图的核心：carousel -->
					<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>
							  </ol>
							  <!-- carousel-inner  控制图片区域 -->
							  <div class="carousel-inner">
							    <div class="carousel-item active">
							      <img class="d-block w-100" src="img/banner/lb1.png" alt="First slide">
							    </div>
							    <div class="carousel-item">
							      <img class="d-block w-100" src="img/banner/lb2.jpg" alt="Second slide">
							    </div>
							    <div class="carousel-item">
							      <img class="d-block w-100" src="img/banner/lb3.jpg" alt="Third slide">
							    </div>
							  </div>
							  <!-- 2个标签用来实现左右切换 -->
							  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
							    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
							    <span class="sr-only">Previous</span>
							  </a>
							  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
							    <span class="carousel-control-next-icon" aria-hidden="true"></span>
							    <span class="sr-only">Next</span>
							  </a>
							</div>
						</div>
					</div>
					
					<!-- 第二行  热门书籍列表 -->
					
					
					
				</div>
				
			</div>
		</div>
		
		
		
	</body>
</html>

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

  1. 组件：列表组-List group

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<!-- js -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.navbar-collapse{
				flex-grow: 0;
			}
			.form-group{
				width: 280px;
				margin: 0 auto;
			}
		</style>
		
		<script type="text/javascript">
			// 轮播图自动播放
			$(function(){
				$('.carousel').carousel({
				  interval: 50
				})
			});
		</script>
		
	</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-item nav-link active" href="#">首页 <span class="sr-only">(current)</span></a>
				    <a class="nav-item nav-link" href="#">注册</a>
				    <a class="nav-item nav-link" href="#">登录</a>
				    <a class="nav-item nav-link disabled" href="#">我的购物车</a>
				  </div>
				</div>
			</div>
		</nav>
		<!-- 利用栅格系统实现搜索区域，左侧列表，轮播图，热门书籍 -->
		<div class="container">
			<!-- 第一行  row -->
			<div class="row" style="margin-top: 10px;">
				<div class="col">
					<div class="jumbotron">
						<!-- 表单组件 -->
						<form action = "" method = "post">
						  <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>
				
			<!-- 第二行  左3右9 -->
			<div class="row">
				<div class="col-md-3 col-12" style="background-color: pink;">
					<!-- 列表组的核心样式  list-group -->
					<div style="border: 1px solid red;height: 50px;text-align: center;line-height: 50px;font-weight: bold;font-size: 20px;background-color: orangered;color: white;">书籍分类</div>
					<div class="list-group">
					  <button type="button" class="list-group-item list-group-item-action ">
					   爱情
					  </button>
					  <button type="button" class="list-group-item list-group-item-action">恐怖</button>
					  &
最低0.47元/天 解锁文章
云彩123
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于bootstrap的前段框架，可以用作二次开发
04-13
这是一套公司内部的开源web框架，里面有数据库表结构，可以用作web端系统开发，机遇ssh，简单明了，适合初学者使用。
bootstrap二次开发环境
weixin_34419321的博客
06-25 248
为什么80%的码农都做不了架构师？>>> ...
基于 Spring Boot+Bootstrap 的迷你天猫商城项目,可二次开发接私活！
程序员闪充宝
10-23 254
今天给大家分享一个不错的开源商城项目，基于Spring Boot的迷你天猫商城，快速部署运行，所用技术：SpringBootMySQLDruidLog4j2MavenEchartsBoot...
真流弊，基于Spring Boot的迷你天猫商城
java思维导图
08-22 385
今天给大家分享一个不错的开源商城项目，基于Spring Boot的迷你天猫商城，快速部署运行，所用技术：SpringBoot/MySQL/Druid/Log4j2/Maven/Echart...
boostrap轮播图
lin1072368472的博客
02-16 296
创建轮播图步骤 1.创建 div.carousel [data-ride=“carousel”](可选） 自己定义一个id名字 等会让data-target使用 data-ride 当文件加载完自动轮播 轮播间隔好像是5秒 <!--carousel声明轮播 slide两个切换有一个平滑效果 id给后面指示器使用--> <!--data-ride 自动轮播 间隔5...
前端开发框架bootstrap3教程
05-25
《前端开发框架bootstrap3教程》将介绍Bootstrap3的基本概念和使用方法，包括网格系统、表单、导航、按钮、图标等常用组件的使用。通过学习本教程，您将能够掌握Bootstrap3的核心技术，为您的Web开发工作提供便利和...
Bootstrap前端框架 4.4.1
02-17
Bootstrap前端框架4.4.1是开发者们广泛使用的HTML、CSS和JavaScript库，它极大地简化了Web开发过程，尤其在创建响应式、移动优先的网站时。这个版本的Bootstrap不仅继承了其先前版本的优点，还引入了一些新的特性和...
Bootstrap 前端开源框架
08-15
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布
Bootstrap前端开发框架 v3.3.0
04-04
Bootstrap是简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。
前端开发框架介绍.pdf
最新发布
05-28
二、主流前端开发框架介绍 Bootstrap 基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架。 提供了优雅的HTML和CSS规范，由动态CSS语言Less写成。 适用于快速开发响应式布局和移动设备优先的Web项目。...
前端学习第十三天
A2483778869的博客
07-28 98
H5新增语法： 头部标签<header></header> 导航栏标签<nav></nav> 底部标签<footer></footer> 内容块标签<section></section> 辅助信息标签<aside></aside> 文章标签<article></article> 媒体插入标签<embed src=路径></embed> 独
Bootstrap[前端开发框架-1]
weixin_66202611的博客
05-02 883
Bootstrap是什么？ ①.诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 ②.是一个用于快速开发Web应用程序和网站的前端框架 ③.Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 为什么要使用Bootstrap？ ①.响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机） ②.移动设备优.
关于Bootstrap轮播图自定义焦点图片
m0_48079732的博客
12-02 535
这是Bootstrap中关于轮播图的代码： <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class.
感觉很有特色的几部文学小说
xiaoyangger的专栏
04-11 2991
      也看过不少文学小说，感觉各有特色。但给人印象深刻的有几部：      1、《红与黑》，这本书可以说是在心理描写方面的一个巅峰，我看过的书中也没有见过有如此多的心理描写的。也许看本国的小说看多了，因为本国的小说基本上写得好的原因不是因为它的场面刻画的好，就是因为人物刻画的到位，没有见到有多少以心理描写而见长的。所以开始看这本书的时候感觉很繁琐，因为在很多章节里基本上写的是于连和德莱拉
BootStrap实现轮播图的自动播放和设置播放间隔时间
热门推荐
江西师范大学-20届-吴悠
12-19 1万+
BootStrap实现轮播图的自动播放和设置播放间隔时间 参考链接：https://blog.csdn.net/rui512777/article/details/52670173?utm_source=blogxgwz5 轮播图代码如下： &amp;lt;div class=&quot;container-fluid text-left&quot; data-spy=&quot;scroll&quot; data-target=&quot;#nav
Bootstrap4学习笔记1
笨笨D幸福 - 后花园
02-04 6003
Bootstrap4 学习笔记1 初始模板 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> link rel="stylesheet" h
【前端开发】bootstrap4常用组件
`雾博客
10-14 461
该.active级需要被添加到一个幻灯片否则转盘将不可见。还要确保id在.carousel可选控件上设置唯一的，尤其是当您在单个页面上使用多个轮播时。控制和指示元件必须具有一个data-target属性（或href相匹配的中的链接）id的的.carousel元件。因此，您可能需要使用其他实用程序或自定义样式来适当调整内容大小。虽然轮播支持上一个/下一个控件和指示器，但它们不是明确要求的。根据您的需要添加和自定义。用于指示当前页面在导航层级中的位置，并通过 CSS 为各导航条目之间自动添加分隔符。
4. Bootstrap - intermediate
weixin_40094284的博客
04-04 639
一、Bootstrap Carousel
bootstrap4-Carousel 轮播
qq_44563258的博客
05-17 817
开发工具与关键技术：Visual Studio 2015 作者：杨灵武 撰写时间：2019/05/17 1.这是一个循环滚动的幻灯片组件，可以使用文本、图象水平不间断滚动，如同旋转木马一般。 点击的id=“carouselIndicators"要和”#carouselIndicators"相对应 将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行（展现）。 下面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值