Bootstrap完成前端简单界面

最新推荐文章于 2024-10-10 10:42:41 发布
最新推荐文章于 2024-10-10 10:42:41 发布
阅读量878 收藏 7
点赞数
文章标签： bootstarp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chiyangj/article/details/107071542
版权
本文档详细介绍了网上书城的界面设计与实现过程，包括登录、注册、主页、搜索和购物车等功能的HTML、CSS和JS代码，以及Bootstrap框架的使用。通过具体代码示例，展示了各页面的布局、样式和交互效果。
摘要由CSDN通过智能技术生成

这里写目录标题

所需js，css

个人css：
*{
	margin: 0;
	padding: 0;
}
/* 搜索栏 start */
.search-parent{
	position: relative;
	height: 100px;
	}
.search{
	position: absolute;
	background-color: #D6CCBB;
	width: 1140px;
	height: 90px;	
}
.search-parent input{
	position: absolute;
	top: 30px;
	left: 400px;
	z-index: 2;
}
.search-parent button{
	position: absolute;
	top: 27px;
	left: 575px;
	z-index: 2;
}
/* 搜索栏 end */

/* 主内容区 start*/

.bg-color1{
	background-color: #710503 ;
}
.bg-color2{
	background-color: #F7E4E4 ;
}
.bg-opacity{
	opacity: 0.3;
}
.c-category li{
	cursor: pointer;
	text-align: center;
}

.guangao>img{
	width: 725px;	
}
.l-content{
	padding-right: 0;
}
.r-content{
	padding: 0;
}

.tip{
	position: relative;
	height: 40px;
	width: 725px;
	background-color: #F7F6F6;
}
.tip>img{
	position: absolute;
}
.tip>h5{
	position: absolute;
	left: 20px;
}

.book img{
	width: 80px;
	height: 110px;
}
.book p{
	margin-bottom: 0;
}
.book>div{
	padding: 0;
}

.shop-table-tab{
	margin: 0 110px;
}
/* 主内容区 end*/

其余js,与css可用Bootstrap的

界面及效果

登录

<html>
<head>
    <title>网上书城登录</title>
    <link href="../bootstrap-4.5.0-dist/css/bootstrap.css" rel="stylesheet">
    <link href="../css/fg.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="bootstrap.js"></script>

</head>
<body class="text-center">
<form class="form-signin" action="${pageContext.request.contextPath}/user.action?methodName=login" method="post">
    <h1 class="h3 mb-3 font-weight-normal">用户登录</h1>
    <label for="name" class="sr-only">账号</label>
    <input type="text" id="name" name="name" class="form-control" placeholder="请输入账号" required autofocus>
    <label for="pwd" class="sr-only">密码</label>
    <input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required>
    <div class="checkbox mb-3">
        <label>
            <input type="checkbox" value="remember-me"> Remember me
        </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit" id="login">登录</button>
    <p class="mt-5 mb-3 text-muted">& 2017-2020</p>
</form>


</body>
</html>

在这里插入图片描述

注册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册界面</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<style>
			.form-signin{
				/* position: absolute;  绝对定位*/
				/* position: relative; 绝对定位*/
				position: relative;
				width: 400px;
				top: 100px;
				left: 50%;
				margin-left: -200px;
			}
		</style>
	</head>
	<body>
		<form class="form-signin" action="" method="post">
			<div class="text-center mb-4">
				<img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
				<h1 class="h3 mb-3 font-weight-normal">用户注册</h1>				
			</div>

			<div class="form-label-group">
				<input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名..." required autofocus>
			</div>

			<div class="form-label-group">
				<input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码..." required>
			</div>

			<div class="checkbox mb-3">
				<label>
					<input type="checkbox" value="remember-me"> Remember me
				</label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
			<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
		</form>

		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

在这里插入图片描述

主页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.5.0-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/fg.css" />
	</head>
	<body>

		<div class="container">
			<!-- 横幅 -->
			<div class="row">
				<div class="col-sm-4">
					您好，欢迎来到网上书城！
				</div>
				<div class="col-sm-4 col-sm-offset-4" style="margin-left: 350px;">
					<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
				</div>
			</div>
			<!-- 搜索栏 -->
			<div class="row">
				<div class="col-sm-12 search-parent">
					<!-- 本来这里应该放一张背景图的 -->
					<div class="search"></div>
					<input type="text" id="book_name" name="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>
			</div>
			<!-- 主内容区 -->
			<div class="row content">
				<div class="col-sm-3 l-content">
					<ul class="list-group c-category ">
						<li class="list-group-item" style="color: white;">书籍分类</li>
						<li class="list-group-item">现代言情</li>
						<li class="list-group-item">古代言情</li>
						<li class="list-group-item">幻想仙侠</li>
						<li class="list-group-item">玄幻</li>
						<li class="list-group-item">都市</li>
						<li class="list-group-item">奇幻</li>
						<li class="list-group-item">军事</li>
						<li class="list-group-item">科幻</li>
						<li class="list-group-item">武侠</li>
						<li class="list-group-item">青春</li>
						<li class="list-group-item">竞技</li>
						<li class="list-group-item">历史</li>
						<li class="list-group-item">游戏</li>
						<li class="list-group-item">其他</li>
					</ul>
				</div>
				<div class="col-sm-9 r-content">
					<!-- 广告 -->
						<img src="img/banner.png" class="img-thumbnail" style="width: 1000px;height: 300px;" alt="...">

					<!-- 新书上架 -->
					<div class="news container">
						<div class="tip row">
							<img src="img/title_bj.png" />
							<h5 style="color: white;">新书上架</h5>
						</div>
						<div class="row book">
							<div class="col-sm-2">
								<img src="img/3.png" />
								<p>狂人日记</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/3.png" />
								<p>狂人日记</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/3.png" />
								<p>狂人日记</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/3.png" />
								<p>狂人日记</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-3">
								<img src="img/3.png" />
								<p>狂人日记</p>
								<b style="color: red;">￥12</b>
							</div>
							
						</div>
					</div>

					<!-- 热销 -->
					<div class="hots container">
						<div class="tip row">
							<img src="img/title_bj.png" />
							<h5 style="color: white;">热销图书</h5>
						</div>
						<div class="row book">
							<div class="col-sm-2">
								<img src="img/1.png" />
								<p>冷间谍</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/1.png" />
								<p>冷间谍</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/1.png" />
								<p>冷间谍</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/1.png" />
								<p>冷间谍</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/1.png" />
								<p>冷间谍</p>
								<b style="color: red;">￥12</b>
							</div>
							
						</div>
					</div>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					版权所有
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});
			})
		</script>
	</body>
</html>

在这里插入图片描述

搜索

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索页</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../css/fg.css" />
	</head>
	<body>

		<div class="container">
			<!-- 横幅 -->
			<div class="row">
				<div class="col-sm-4">
					您好，欢迎来到网上书城！
				</div>
				<div class="col-sm-4 col-sm-offset-4">
					<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
				</div>
			</div>
			<!-- 搜索栏 -->
			<div class="row">
				<div class="col-sm-12 search-parent">
					<!-- 本来这里应该放一张背景图的 -->
					<div class="search"></div>
					<input type="text" id="book_name" name="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>
			</div>
			<!-- 主内容区 -->
			<div class="row content">
				<div class="col-sm-3 l-content">
					<ul class="list-group c-category ">
						<li class="list-group-item" style="color: white;">书籍分类</li>
						<li class="list-group-item">现代言情</li>
						<li class="list-group-item">古代言情</li>
						<li class="list-group-item">幻想仙侠</li>
						<li class="list-group-item">玄幻</li>
						<li class="list-group-item">都市</li>
						<li class="list-group-item">奇幻</li>
						<li class="list-group-item">军事</li>
						<li class="list-group-item">科幻</li>
						<li class="list-group-item">武侠</li>
						<li class="list-group-item">青春</li>
						<li class="list-group-item">竞技</li>
						<li class="list-group-item">历史</li>
						<li class="list-group-item">游戏</li>
						<li class="list-group-item">其他</li>
					</ul>
				</div>
				<div class="col-sm-9">
					<div class="media">
						<img src="img/2.png" class="align-self-center mr-3" alt="...">
						<div class="media-body">
							<p>第一商会</p>
							<p>作者：</p>
							<p>价格：￥24</p>
							<p>出版社：丛恒文学</p>
							<p>简介：三天更一章</p>
							<p>
								<button class="btn btn-danger" style="width: 150px;">加入购物车</button>
								<button class="btn btn-danger" style="width: 150px;">去结算</button>
							</p>
						</div> 						
					</div>
					<div class="media">
						<img src="img/2.png" class="align-self-center mr-3" alt="...">
						<div class="media-body">
							<p>第一商会</p>
							<p>作者：</p>
							<p>价格：￥24</p>
							<p>出版社：丛恒文学</p>
							<p>简介：三天更一章</p>
							<p>
								<button class="btn btn-danger" style="width: 150px;">加入购物车</button>
								<button class="btn btn-danger" style="width: 150px;">去结算</button>
							</p>
						</div> 						
					</div>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					版权所有
				</div>
			</div>
		</div>
		<script src="jquery-3.3.1.js"></script>
		<script src="bootstrap.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});
			})
		</script>
	</body>
</html>

在这里插入图片描述

购物车

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="../bootstrap-4.5.0-dist/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/fg.css" />
	</head>
	<body>

		<div class="container">
			<!-- 横幅 -->
			<div class="row">
				<div class="col-sm-4">
					您好，欢迎来到网上书城！
				</div>
				<div class="col-sm-4 col-sm-offset-4">
					<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
				</div>
			</div>
			<!-- 搜索栏 -->
			<div class="row">
				<div class="col-sm-12 search-parent">
					<!-- 本来这里应该放一张背景图的 -->
					<div class="search"></div>
					<input type="text" id="book_name" name="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>
			</div>
			<!-- 主内容区 -->
			<div class="row content">
				<div class="col-sm-3 l-content">
					<ul class="list-group c-category ">
						<li class="list-group-item" style="color: white;">书籍分类</li>
						<li class="list-group-item">现代言情</li>
						<li class="list-group-item">古代言情</li>
						<li class="list-group-item">幻想仙侠</li>
						<li class="list-group-item">玄幻</li>
						<li class="list-group-item">都市</li>
						<li class="list-group-item">奇幻</li>
						<li class="list-group-item">军事</li>
						<li class="list-group-item">科幻</li>
						<li class="list-group-item">武侠</li>
						<li class="list-group-item">青春</li>
						<li class="list-group-item">竞技</li>
						<li class="list-group-item">历史</li>
						<li class="list-group-item">游戏</li>
						<li class="list-group-item">其他</li>
					</ul>
				</div>
				<div class="col-sm-9">
					<table class="table">
						<thead class="thead-dark">
							<tr style="background-color: papayawhip;">
								<th scope="col">书名</th>
								<th scope="col">单价</th>
								<th scope="col">数量</th>
								<th scope="col">小计</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Mark</td>
								<td>Otto</td>
								<td>@mdo</td>
								<td>Mark</td>
								<td>
									<a href="#">删除</a>&nbsp;&nbsp;
									<a href="#">更新</a>
								</td>
							</tr>
							<tr>
								<td>Mark</td>
								<td>Otto</td>
								<td>@mdo</td>
								<td>Mark</td>
								<td>
									<a href="#">删除</a>&nbsp;&nbsp;
									<a href="#">更新</a>
								</td>
							</tr>
							<tr>
								<td colspan="5" >
									<div class="btn btn-danger" style="width: 180px;">清空购物车</div>
									<div class="btn btn-danger shop-table-tab" style="width: 180px;">继续购物</div>
									<div class="btn btn-danger" style="width: 180px;">去结算</div>
								</td>  
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					Copyright 2020 教育，版权所有
				</div>
			</div>
		</div>
		<script src="jquery-3.3.1.js"></script>
		<script src="../bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});
			})
		</script>
	</body>
</html>

在这里插入图片描述

不落飞行
关注
简单网页设计前端（入门）
wyy
04-10 7787
简单网页设计前端（入门） 按照下面的成品设计网页： 其中包括：  文本框 密码框 提示文字 单选按钮 复选按钮 上传文件 上传图片 等。。。 无标题文档 #name,#psd{ background-color:#09F; background:#FC9; } fieldset{ width:180px;} 账 号:
基于bootstrap的前端网站设计
04-21
通过学习和应用Bootstrap，开发者可以快速构建专业级的前端界面，同时也能提升对于响应式设计和移动优先策略的理解。对于初学者和学生来说，这是一个很好的起点，可以帮助他们快速入门Web开发，并能轻松应对课程设计...
一款bootstrap完整的前台页面
01-18
前台该有的页面都有~~可直接进行开发。也适合感兴趣的同学学习用。
一个简单的前端页面
mycomdet的专栏
03-12 1293
<html> <head> <script> function myFunction(x,y) { z = x + y; str = x + " + " + y + " = " + z; alert(str);
使用BootStrap搭建一个简单的网页界面
最新发布
weixin_65921319的博客
10-10 397
网页是分成12份的，对应不同的屏幕，使用不同的栅格系统类前缀。比如在
一个简单漂亮的前端聊天界面
2401_84437604的博客
07-12 692
* 标准的语法 */width: 60%;.friend {background: url(“…/img/圣诞.jpg”) no-repeat;设置高度滚动条才有效最大宽度不能太长，不然布局会混乱三.JS代码//判断左右//左右浮动。
基于bootstrap的简洁登录界面Html
03-28
基于bootstrap的简洁登录界面，可以直接下载使用~内置css+js
【Java技术】教你用Bootstrap开发漂亮的前端界面.pdf
09-15
本教程将深入探讨如何使用Bootstrap来创建美观的前端界面。 首先，理解Bootstrap的基础架构至关重要。它基于一个12列的栅格系统，允许开发者灵活地布局内容，确保页面在各种屏幕尺寸下都能自适应。在创建页面布局时...
基于Bootstrap的新闻前端界面
12-20
这个"基于Bootstrap的新闻前端界面"项目提供了一套完整的静态页面，包括主页、注册页面和新闻详情页面，旨在帮助开发者或设计师快速搭建类似大公新闻网的网站外观。 在深入探讨这个项目之前，让我们先了解一下关键...
使用BootStrap实现用户登录界面UI
09-01
Bootstrap 是一个流行的前端框架，主要用于快速开发响应式和移动优先的网页。在本文中，我们将深入探讨如何使用 Bootstrap 创建一个用户登录界面UI，这个界面采用了左右各一半的布局风格。 首先，Bootstrap 的核心...
bootstrap纯前端作业设计
12-08
在这个"bootstrap纯前端作业设计"中，你可能会看到如何将这些元素组合在一起，创建出一个具有吸引力且用户友好的界面。初学者可以通过研究这些文件，了解如何将Bootstrap的预定义类应用到HTML元素中，以及如何利用...
bootstrap前台界面模板
10-14
丰富的模板界面参考
非常好看的BOOTSTRAP 整站前台模板
08-13
此模板为 BOOTSTRAP 前台模板，非常好看，为红色和黑色作为主题，高端大气上档次，拿来就可以使用的模板，可以作为企业网站，个人网站等
bootstrap快速搭建简洁美观的页面
12-08
这是一个漂亮美观的bootstrap页面，可以直接使用与你的项目中，开箱即用。
史上最经典的Bootstrap前台模板
10-18
史上最经典的Bootstrap前台模板，大图轮播、仿京东商城，白色主题、高端大气。
最好用的前台模板，纯html页面+css+bootstrap
08-16
本压缩包里面包含html+css+bootstrap的源码，不牵扯到后台代码，适合一个人写一些小型的项目。
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 6万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
从0到1，编写一个简单的前端页面
持续学习中
04-30 1354
作者：谭东 从0到1，编写一个简单的前端页面。 ...即将完善
vue 下拉框_前端页面的简单学习与项目搭建（主要针对HTML和VUE的学习）
weixin_39564368的博客
12-11 219
备注：只是本人的自学与备注，自己本身不是做前端的，只是简单搭建一些前端的东西，自己玩的。一、HTML简单的回顾（一）HTML 基本结构<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <!-- he...
Bootstrap Wordpress前端模板_网站UI界面设计
总而言之，该资源是一个包含了Bootstrap框架的WordPress前端源码模板，旨在帮助用户快速搭建具有专业外观的网站UI界面主题。通过使用这个模板，用户可以避免复杂的前端编码工作，专注于内容创建和网站功能的开发，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值