Bootstrap02——主页搭建

最新推荐文章于 2023-07-25 16:58:28 发布
最新推荐文章于 2023-07-25 16:58:28 发布
阅读量871 收藏
点赞数 4
分类专栏： bootstrap 文章标签： bootstrap html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65975275/article/details/124611298
版权

hello，家人们，我来更新咱们的小知识啦~

上次讲了bootstrap的基本使用，今天我们来说说bootstrap的主页搭建.

对了，在项目的同时，也要记得导入专属bootstrap的文件夹哦！

目录

一.top.jsp(最顶端的代码，使用jsp中的include 方法插入)

二.index.jsp(主页代码)

三.增加界面的代码（insert.jsp）

一.top.jsp(最顶端的代码，使用jsp中的include 方法插入)

<%--
  User: hgh
  Date: 2022/5/3
  Time: 15:33
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--导航栏--%>
<nav class="navbar navbar-dark bg-primary mb-2">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            源星球🌌🌌
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#linkText"
                aria-controls="navbarText" aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="linkText">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="index.jsp" id="index">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="insert.jsp" id="insert">增加商品</a>
                </li>
            </ul>
            <script>
                $("#<%=request.getParameter("type")%>").addClass("active")
            </script>
        </div>
    </div>
</nav>
</body>
</html>

效果如下：

 

二.index.jsp(主页代码)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<!-- 引入jquery的库 必须在Bootstrap库之前 -->
<script src="jquery/jquery-3.3.1.js"></script>
<!-- Bootstrap CSS -->
<link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css"
	rel="stylesheet">
<!-- Bootstrap JS -->
<script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
 
<style>
.carousel-item img {
	height: 500px;
}
</style>
</head>
<body>
	<jsp:include page="top.jsp">
		<jsp:param value="index" name="type" />
	</jsp:include>
	<div class="container">
		<%--轮播图 --%>
		<div id="myCarousel" class="carousel slide mb-3"
			data-bs-ride="carousel" data-bs-interval="1000">
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#myCarousel"
					data-bs-slide-to="0" class="active"></button>
				<button type="button" data-bs-target="#myCarousel"
					data-bs-slide-to="1"></button>
				<button type="button" data-bs-target="#myCarousel"
					data-bs-slide-to="2"></button>
			</div>
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="mikey/c.jpg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>First slide label</h5>
						<p>Some representative placeholder content for the first
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="mikey/d.jpg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>First slide label</h5>
						<p>Some representative placeholder content for the first
							slide.</p>
					</div>
				</div>
				<div class="carousel-item">
					<img src="mikey/e.jpg" class="d-block w-100" alt="...">
					<div class="carousel-caption d-none d-md-block">
						<h5>First slide label</h5>
						<p>Some representative placeholder content for the first
							slide.</p>
					</div>
				</div>
 
			</div>
			<%--轮播图切换上下图片按钮 --%>
			<button class="carousel-control-prev" type="button"
				data-bs-target="#myCarousel" data-bs-slide="prev">
				<span class="carousel-control-prev-icon"></span>
			</button>
			<button class="carousel-control-next" type="button"
				data-bs-target="#myCarousel" data-bs-slide="next">
				<span class="carousel-control-next-icon"></span>
			</button>
		</div>
		
		<div class="row">
        <div class="col-3">
            <div class="input-group mb-3">
                <label class="input-group-text" for="rows">显示个数</label>
                <select class="form-select" id="rows">
                    <option value="4">4</option>
                    <option value="8">8</option>
                    <option value="12">12</option>
                </select>
            </div>
        </div>
        <div class="col-3">
            <div class="input-group mb-3">
                <label class="input-group-text" for="rows">排序规则</label>
                <select class="form-select" >
                    <option value="4">根据商品价格</option>
                    <option value="8">根据商品库存</option>
                    <option value="12">根据商品销量</option>
                </select>
            </div>
        </div>
        <div class="col-3">
            <div class="input-group mb-3">
                <label class="input-group-text" for="rows">搜索商品</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
		<%--商品网格显示 --%>
		<div class="row">
			<%--每一行占4个商品 每个card 占用三个格子 --%>
			<div class="card col-md-3 mb-2">
				<img src="mikey/a.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">佐野万次郎</h5>
					<p class="card-text">东京万字会会长</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
			<div class="card col-md-3 mb-2">
				<img src="mikey/b.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">东万元长</h5>
					<p class="card-text">东京万字会的核心</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
			<div class="card col-md-3 mb-2">
				<img src="mikey/a.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">佐野万次郎</h5>
					<p class="card-text">东京万字会会长</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
			<div class="card col-md-3 mb-2">
				<img src="mikey/b.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">东万元长</h5>
					<p class="card-text">东京万字会的核心</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
			<div class="card col-md-3 mb-2">
				<img src="mikey/a.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">佐野万次郎</h5>
					<p class="card-text">东京万字会会长</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
			<div class="card col-md-3 mb-2">
				<img src="mikey/b.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">东万元长</h5>
					<p class="card-text">东京万字会的核心</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
			<div class="card col-md-3 mb-2">
				<img src="mikey/a.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">佐野万次郎</h5>
					<p class="card-text">东京万字会会长</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
			<div class="card col-md-3 mb-2 ">
				<img src="mikey/b.jpg" class="card-img-top">
				<div class="card-body">
					<h5 class="card-title">东万元长</h5>
					<p class="card-text">东京万字会的核心</p>
					<div class="btn-group" role="group">
						<button type="button" class="btn btn-primary">🔍</button>
						<button type="button" class="btn btn-warning">🛒</button>
						<button type="button" class="btn btn-danger">🙅‍</button>
					</div>
				</div>
			</div>
 
		
				<ul class="pagination pagination-lg justify-content-center">
					<li class="page-item active" aria-current="page"><span
						class="page-link">1</span></li>
					<li class="page-item"><a class="page-link" href="#">2</a></li>
					<li class="page-item"><a class="page-link" href="#">3</a></li>
				</ul>
 
		</div>
	</div>
</body>
</html>

效果如下：

 

三.增加界面的代码（insert.jsp）

<%--
  User: hgh
  Date: 2022/5/3
  Time: 15:12
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css">
    <script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
</head>
<body>
<jsp:include page="top.jsp">
    <jsp:param name="type" value="insert"/>
</jsp:include>
<form action="" class="container">
    <div class="mb-3">
        <label for="name" class="form-label">商品名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入商品的名称">
    </div>
    <div class="mb-3">
        <label for="topic" class="form-label">商品类别</label>
        <select id="topic" class="form-select">
            <option value="1">服装</option>
            <option value="2">家具</option>
            <option value="3">家电</option>
        </select>
    </div>
    <div class="mb-3">
        <label for="price" class="form-label">商品价格: $<span>500</span></label>
        <input type="range" value="500" min="1" max="1000" class="form-range" id="price">
    </div>
    <div class="mb-3">
        <label for="stock" class="form-label">商品库存: <span>250</span>件</label>
        <input type="range" value="250" min="1" max="500" class="form-range" id="stock">
    </div>
    <div class="mb-3">
        <label for="cover" class="form-label">商品封面</label>
        <input type="file" class="form-control" id="cover" placeholder="请输入商品的名称">
    </div>
    <div class="mb-3">
        <label for="describe" class="form-label">商品描述</label>
        <textarea class="form-control" id="describe" rows="3"></textarea>
    </div>
    <div class="form-check form-switch mb-3">
        <input class="form-check-input" type="checkbox" role="switch" id="disabled">
        <label class="form-check-label" for="disabled">当前商品是否上架</label>
    </div>
    <div class="mb-3">
        <button type="submit" class="btn btn-primary">增加</button>
        <button type="reset" class="btn btn-danger">重置</button>
    </div>
</form>
<script>
    $("#price,#stock").mousemove(function () {
        $(this) //标签自己
            .parent() //父元素
            .find("span") //找span
            .text($(this).val())
    })
</script>
</body>
</html>

效果如下：

 

好啦，今天的代码就分享到这里啦~下次见！

今天也要记得微笑呀.

洛洛虎虎生威
关注
专栏目录
Netty 的引导器Bootstrap —— 从搭建HTTP服务器讲起
悟已往之不谏，知来者之可追
11-04 363
我们在使用 Netty 编写网络应用程序的时候，一定会从引导器 Bootstrap开始入手。Bootstrap 作为整个 Netty 客户端和服务端的程序入口，可以把 Netty 的核心组件像搭积木一样组装在一起。本文会从 Netty 的引导器Bootstrap出发，带你学习如何使用 Netty 进行最基本的程序开发。 文章目录从一个简单的 HTTP 服务器开始服务端启动类服务端业务逻辑处理类 从一个简单的 HTTP 服务器开始 HTTP 服务器是我们平时最常用的工具之一。同传统 Web 容器 Tomcat
BootStrap框架——制作BootStrap中文网首页
weixin_30756499的博客
10-02 779
小女感觉自己好久没有好好写博客了，蹲在墙角反思中... 今天通过一个实例给大家介绍一款实用又好用的框架——Bootstrap框架！ 什么是Bootstrap呢？ Bootstrap 是最受欢迎的一款 HTML、CSS 和 JS 框架，一般多用于开发响应式布局、移动设备优先的Web项目。 而，Bootstrap框架的栅格系统 是其响应式布局的核心内容。 今天，小女要通过模仿制作B...
【Bootstrap】学习笔记（一）——栅格系统
ZhShy
01-18 1689
工作原理 .container：左右各有15px内边距，支持响应式设计，针对不同设备的宽度不同 .row：内可设定最多12个column，行左右各-15px外边距，抵消.container的内边距 .column：左右各15px内容边距，可以保证内容不贴边，相邻column有30px间距 .col-md-num：可以通过设置num的值来设置元素所占列数 使用方法 列偏移： col-(size...
使用BootStrap搭建主页
qq_1114382703的博客
05-04 1355
使用Bootstrap来搭建主页
Bootstrap02.制作主页
github_67177094的博客
05-06 261
回顾：https://blog.csdn.net/github_67177094/article/details/124573594?spm=1001.2014.3001.5501 目录 top.jsp index.jsp insert.jsp 首先导入bootstrap的css和js <link href="bootstrap5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootst.
超漂亮的bootstrap网站首页模板
05-03
一款非常好看的基于bootstrap的首页模板
bootstrap 基本页面元素，代码，列表
weixin_34095889的博客
10-01 123
bootstrap 基本页面元素，代码，列表 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;link rel="stylesheet" type=&quot
经典的Bootstrap个人主页博客模板
10-18
一个经典的Bootstrap个人主页模板，含登录页面、图表，界面简洁大气。
BootStrap-Table——没用过bootStrap，想用BootStrap-Table做个表格 BootStrap-Table搭建
梦若辰宇的博客
11-29 1627
一、思想 第一：为什么要用bootstrap-table来构建table？ 第二：bootstrap是前端框架，他的思路或者说优势（特点）是什么？ 第三：要以一种什么样的角度去实现用bootstrap-table来构建table？ 也就是说在用bootstrap-table来构建table的时候，我们必须要有想法，要对bootstrap的思路和实现有个简单的了解，这样，思维的角度和高度一致了...
最新版Bootstrap5教程——Bootstrap5基础
m0_61684063的博客
05-20 4672
  Bootstrap是由推特设计师Mark Otto和Jacob Thornton合作开发的一款基于HTML、CSS、JavaScript的前端开源框架，使用简洁灵活，让web开发更加快速简单。  Bootstrap现在最新的版本为v5.2.0-beta1，现在介绍一下Bootstrap5相对于以前版本的改变。
基于bootstrap的网站首页
04-25
运用bootstrap框架排版的企业网站首页
一款bootstrap完整的前台页面
01-18
前台该有的页面都有~~可直接进行开发。也适合感兴趣的同学学习用。
Bootstrap源代码
03-18
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap布局的网站首页DEMO
10-03
用bootstrap前端框架搭建的简洁风格网站首页。框架首页：http://www.bootcss.com/
登录界面Html（bootstrap）源码
05-05
简单的登录界面的实现，现在分享我写的源码供大家参考，对初学者来说应该挺有帮助，希望可以对大家有帮助
tomcat源码阅读（一）——环境搭建
04-20
本篇将聚焦于"Tomcat源码阅读（一）——环境搭建"，探讨如何搭建一个适合源码学习的开发环境。 首先，我们需要了解Tomcat是什么。Tomcat是一款开源的Java Servlet容器，由Apache软件基金会维护，实现了Java EE中的...
用bootStrap开发一个index首页
weixin_41049260的博客
05-21 2174
利用bootStrap的栅格系统给Blog首页开发一个首页的功能 数据有序的放入div中利用后台的交互用EL表达式取来放入其中 代码布局 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun...
BootStrap之——网站首页整体设计思路
艾夏SEO
12-12 1383
整体架构一般而言首页设计几乎等同与整个网站设计，那么首页中到底应该放些什么内容才好呢？这要看网站有哪些主要的元素。本教程里要设计的网站首页是一个多用户博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给其他用户。所以，首页中的板块包括这些应该是恰当的：1.整站导航条2.文章（博客）展示板块3.图书展示板块4.用户（会员）展示板块5.脚注——footer部分 其中导航条和脚注是整个网站中都要
使用bootstrap完成网页布局
qcsnssdn的博客
07-25 249
注意js引用的顺序，和js所在的文件位置。
javascript制作银行管理
最新发布
12-19
JavaScript是一种强大的脚本语言，可以用来创建各种类型的应用程序，包括银行管理系统。 首先，对于银行管理系统，JavaScript可以用来创建交互式的用户界面，方便客户和银行工作人员进行操作和管理。通过JavaScript，可以设计出简洁、直观的用户界面，让客户可以轻松地进行存款、取款、转账等操作。 其次，JavaScript也可以用来处理银行系统中的逻辑和计算部分。例如，可以使用JavaScript来计算利息、管理账户余额、验证用户身份等功能。通过JavaScript的脚本编程，可以实现灵活、高效的逻辑运算，保证银行系统的正常运行。 另外，JavaScript还可以用来进行数据验证和交互式表单设计。银行管理系统中有很多需要用户输入的信息，使用JavaScript可以对用户输入的数据进行实时验证，确保数据的准确性和完整性。同时，还可以设计交互式的表单，提高用户体验。 总之，JavaScript在银行管理系统的开发中扮演着非常重要的角色。它可以帮助设计出功能完善、操作便捷的用户界面，实现系统中的各种逻辑计算和数据验证，提高银行管理系统的效率和用户体验。通过JavaScript的应用，可以实现一套功能全面、性能可靠的银行管理系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值