Bootstrap-03 (前台开发框架)

最新推荐文章于 2023-09-13 18:31:13 发布
最新推荐文章于 2023-09-13 18:31:13 发布
阅读量140 收藏
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_67771954/article/details/124788041
版权
本文通过四个案例详细介绍了如何使用Bootstrap框架进行前台开发，包括利用媒体对象实现搜索书籍页面，用表格布局购物车页面，借助模态框展示订单信息，以及在项目中运用图标组件。
摘要由CSDN通过智能技术生成

一.案例1：实现搜索书籍页面 组件：媒体对象-Media object

<!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>
		<!-- link引入Bootstrap.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<!-- 导入jQuery类 -->
		<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
		<!-- 导入Bootstrap.js -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.navbar-collapse {
				/* 布局*/
				flex-grow: 0;
			}
 
			.form-group {
				/* 宽度*/
				width: 320px;
				/* 居中*/
				margin: 0 auto;
			}
 
			.book_type {
				border: 1px solid brown;
				height: 50px;
				text-align: center;
				line-height: 50px;
				font-weight: bold;
				font-size: 20px;
				background-color: #710503;
				color: white;
			}
 
			#title {
				background-image: url(img/title_bj.png);
				height: 30px;
				margin-top: 20px;
				margin-bottom: 10px;
				background-repeat: no-repeat;
				border: 1px solid gainsboro;
				color: white;
				font-weight: bold;
				padding-left: 15px;
				text-align: center;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
 
		<!-- 实现网站首页的导航条 -->
		<!-- Bootstrap 导航条 通过nav标签添加navbar导航条样式 -->
		<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>
				<!-- collapse 折叠组件-->
				<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="Demo5登录+注册.html">登录</a>
						<a class="nav-link" href="Demo5登录+注册.html">注册</a>
						<!-- disabled 禁用-->
						<a class="nav-link disabled">我的购物车</a>
					</div>
				</div>
			</div>
		</nav>
 
		<!-- 除去导航条 都需要借助栅格系统来实现 -->
		<div class="container">
			<!-- 第一行 显示搜索栏目 -->
			<div class="row" style="margin-top: 10px;">
				<!-- 栅格系统的列 col-->
				<div class="col">
					<div class="jumbotron">
						<!-- 表单模块-->
						<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-outline-secondary" type="button"
											id="button-addon2">搜索</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
 
 
			<!-- 第二行 显示左侧列表以及右侧的轮播图以及热门书籍 -->
			<div class="row">
				<div class="col-12 col-md-3">
					<!-- 左侧分类列表显示 -->
					<div class="book_type">书籍分类</div>
					<div class="list-group">
						<button type="button" class="list-group-item list-group-item-action active">
							惊悚
						</button>
						<button type="button" class="list-group-item list-group-item-action">喜剧</button>
						<button type="button" class="list-group-item list-group-item-action">战争</button>
						<button type="button" class="list-group-item list-group-item-action">科幻</button>
						<button type="button" class="list-group-item list-group-item-action">魔幻</button>
						<button type="button" class="list-group-item list-group-item-action">爱情</button>
						<button type="button" class="list-group-item list-group-item-action">哈哈</button>
						<button type="button" class="list-group-item list-group-item-action">呵呵</button>
						<button type="button" class="list-group-item list-group-item-action">嘿嘿</button>
						<button type="button" class="list-group-item list-group-item-action">嘻嘻</button>
						<button type="button" class="list-group-item list-group-item-action">霍霍</button>
 
					</div>
				</div>
				
						<div class="col-12 col-md-9">
							<div class="row">
								<div class="col-12">
                                <ul class="list-unstyled">
                                  <li class="media">
                                    <img class="mr-3" src="img/1.png" alt="Generic placeholder image">
                                    <div class="media-body">
                                     <!-- <h5 class="mt-0 mb-1">冷间谍</h5> -->
									  <p>冷间谍</p>
                                      <p>作者:天蚕土豆</p>
									  <p>价格:&yen;9.6</p>
									  <p>出版社:清华出版社</p>
									  <p>书籍简介:玄幻</p>
									  <button style="width: 150px;" type="button" class="btn btn-success">加入购物车</button>
									   <button style="width: 150px;" type="button" class="btn btn-danger">去结算</button>
									   <hr />
                                    </div>
									
                                  </li>
                                  <li class="media my-4">
                                    <img class="mr-3" src="img/2.png" alt="Generic placeholder image">
                                    <div class="media-body">
                                      <!-- <h5 class="mt-0 mb-1">List-based media object</h5> -->
                                    <p>第一商会</p>
                                    <p>作者:天蚕土豆</p>
                                    <p>价格:&yen;9.6</p>
                                    <p>出版社:清华出版社</p>
                                    <p>书籍简介:玄幻</p>
									<button style="width: 150px;" type="button" class="btn btn-success">加入购物车</button>
									 <button style="width: 150px;" type="button" class="btn btn-danger">去结算</button>
									 <hr />
                                    </div>
									
                                  </li>
                                  <li class="media">
                                    <img class="mr-3" src="img/3.png" alt="Generic placeholder image">
                                    <div class="media-body">
                                      <!-- <h5 class="mt-0 mb-1">List-based media object</h5> -->
                                     <p>狂人日记</p>
                                     <p>作者:鲁迅</p>
                                     <p>价格:&yen;9.6</p>
                                     <p>出版社:清华出版社</p>
                                     <p>书籍简介:玄幻</p>
									 <button style="width: 150px;" type="button" class="btn btn-success">加入购物车</button>
									  <button style="width: 150px;" type="button" class="btn btn-danger">去结算</button>
									  
                                    </div>
                                  </li>
                                </ul>
								<nav aria-label="Page navigation example">
								  <ul style="padding-left: 40%;" class="pagination">
								    <li class="page-item">
								      <a class="page-link" href="#" aria-label="Previous">
								        <span aria-hidden="true">&laquo;</span>
								        <span class="sr-only">Previous</span>
								      </a>
								    </li>
								    <li class="page-item"><a class="page-link" href="#">1</a></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>
								    <li class="page-item">
								      <a class="page-link" href="#" aria-label="Next">
								        <span aria-hidden="true">&raquo;</span>
								        <span class="sr-only">Next</span>
								      </a>
								    </li>
								  </ul>
								</nav>
							</div>
							</div>
						</div>
						
					</div>
				</div>
 
			</div>
 
 
	</body>
</html>

二.案例2：实现购物车页面布局 页面内容：表格-Table

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 支持手机端 -->
		<meta name="viewport"
最低0.47元/天 解锁文章
还记得以前
关注
Bootstrap-01 (前台开发框架)
m0_65208075的博客
05-06 258
Bootstrap Bootstrap是什么? (1).诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 (2).是一个用于快速开发Web应用程序和网站的前端框架 (3).Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 ② 为什么使用Bootstrap? (1).响应式设计（Bootstrap的响应...
bootstrap3 框架
06-25
1.bootstrap搭的框架 2.适合管理系统 3.可直接运行html查看效果
bootstrap3框架
aiwujiangjie_job的博客
07-25 419
1、bootstrap自力更生的 2、来自Twitter，是目前最受欢迎的前端框架。Bootstrap是基于html、css、javascript的，它简洁灵活，使得web开发更加快捷。 3、
【学习笔记】Bootstrap3 - 基于HTML、CSS、JavaScript的前端开发框架
shawxlee的CSDN博客
09-13 411
Bootstrap CSS 一、移动设备优先 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap网页标题&l
优秀的bootstrap3的后台界面框架
01-16
找了很久才找到的，一个不错的源码，各种页面都已经做好。基于Bootstrap3.1.1制作，兼容PC端和手机移动端，全套模板，包括仪表盘、登录、布局、UI元素、组件、媒体库、字体、邮箱、表格、图表、数据表、地图等52个后台模板页面。
Bootstrap-02 (前台开发框架)
m0_67785100的博客
05-03 404
一.案例 ① 轮播图 <!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-s...
bootstrap-angular前台分页插件demo
08-30
Bootstrap Angular 前台分页插件是一款专为Angular开发的高效、易用的分页组件，它使得在前端实现分页功能变得极其简便，无需依赖后端进行任何分页处理。这款插件的设计理念是简化开发流程，提高项目的可维护性和可...
Bootstrap前端开发框架03（完结）
weixin_65479202的博客
05-03 462
Bootstrap前端开发框架是新手必学知识！！！超级简单易学！！！
bootstrap-3.3.7前端框架
04-17
bootstrap-3.3.7前端框架
bootstrap3框架写的5个后台管理模板
01-30
matrix-admin00到matrix-admin04共5个bootstrap后台管理模板
Bootstrap3(一)
勤能补拙，孰能生巧
07-13 1846
1.Bootstrap 简介 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 移动设备优先自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持所有的主流浏览器都支持 Bootstrap。 容易上手只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习...
Bootstrap03之主页优化
m0_64043477的博客
05-06 480
Bootstrap03.主页优化
bootstap V3框架总结
weixin_43343144的博客
01-08 383
准备工作：使用Bootstap第一步：要导入bootstrap.css 和 bootstrap.js以外，必须在&lt;head&gt;&lt;/head&gt;标签内必须添加：（不然显示窗口可能就不正常！） &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; Bootstrap框架的三大核心：...
Bootstrap框架（组件）
passerby的博客
07-27 2052
根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片 这一章我们来讲一下一些组件无处不在的字体图标 如图： 它们在APP页面底部、网站导航条、登录页面或注册页面 Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上 按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离 在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式 翻页只能实现
Bootstrap3（1）8.15
weixin_68597796的博客
08-15 474
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。网页设计中的网格用于组织内容，让网站易于浏览，并降低用户端的负载。响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 类名：container左右留白（指最外部的div）类名：containe
mb-3 bootstrap
softuse的博客
06-05 9338
问：什么是mb-0？ 最佳答案: Bootstrap具有广泛的响应边距和填充实用程序类。它们适用于所有断点： xs(< = 576px)，sm(> = 576px)，md(> = 768px)，lg(> = 992px)或xl(> = 1200px)) 这些类的格式如下： {property} {sides} – {size} for xs& ...
Bootstrap03
m0_68761656的博客
04-03 338
目录： 1.实现搜所功能 2.实现购物车页面布局 3.实现购物车页面订单信息 1.实现搜所功能 <div class="media"> <img src="..." class="mr-3" alt="..."> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p>Standing on the frontline when...
javaweb网上蛋糕商城--前台开发实验思路
最新发布
06-14
在Java Web上开发一个网上蛋糕商城的前台，主要分为用户界面设计、交互功能实现和数据展示等几个关键部分。以下是前台开发的一般实验思路： 1. **需求分析**: - 确定商城的主要功能，如商品浏览、搜索、购物车管理、订单流程（添加、确认、支付）和用户登录注册等。 - 明确界面风格，如响应式设计以适应不同设备。 2. **界面设计**: - 使用HTML/CSS构建静态页面布局，包括导航栏、轮播图、商品列表页、详情页和用户个人中心等。 - 利用Bootstrap或其他前端框架进行快速样式搭建。 3. **JavaScript或jQuery**: - 实现动态效果，如图片轮播、下拉菜单、按钮点击事件处理等。 - 利用AJAX异步加载数据，提升用户体验，避免页面刷新。 4. **UI组件化**: - 使用前端框架提供的组件库，比如React、Vue或Angular，提高开发效率并保证代码复用。 5. **用户认证与权限管理**: - 使用session或JWT进行用户身份验证，确保用户只能访问自己的数据。 - 设计用户权限系统，如管理员能查看和修改所有数据，普通用户只能查看和购买。 6. **数据绑定和模型驱动**: - 如果使用MVVM架构，如Angular，利用双向数据绑定连接视图和模型。 7. **前端状态管理**: - 使用Redux或Vuex管理应用状态，保证状态的一致性和可预测性。 8. **SEO优化**: - 为搜索引擎优化考虑，确保页面元素有正确的元信息和结构。 9. **性能优化**: - 压缩和合并CSS/JS文件，减少HTTP请求。 - 利用CDN加速资源加载。 10. **测试**: - 编写单元测试和集成测试，确保各个功能正常工作。 - 进行用户验收测试，收集用户反馈。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值