BootStrap-书籍搜索列表&购物车&订单结算&form表单&分页&图标

最新推荐文章于 2024-01-09 17:32:57 发布

_十二.

最新推荐文章于 2024-01-09 17:32:57 发布

阅读量999

点赞数 1

文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_57287269/article/details/124107320

版权

1. 用BootStrap实现案例

1.1 搜索列表

实现效果

实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入jQuery库 -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!-- 引入 bootstrap 的 js 库 -->
		<script type="text/javascript" src="js/bootstrap-5.0.2/dist/js/bootstrap.js"></script>
		<!-- 引入 bootstrap 的 css 库 -->
		<link rel="stylesheet" type="text/css" href="js/bootstrap-5.0.2/dist/css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
		  <!-- 第一行：导航 -->
		  <div class="row">
		    <div class="col">
		      <img src="img/zkinglogo.png" />
		    </div>
		    <div class="col text-end mt-4">
		      <a href="">注册</a> |
		      <a href="">登录</a> |
		      <a href="">我的购物车</a> |
		      <a href="">网站首页</a>
		    </div>
		  </div>
		  
		  <!-- 第二行 ：搜索区域-->
		  <div class="row btn-info" style="height: 60px; width: 1127px;">
			  <div class="col mt-3 text-center">
				  <input type="text" />
				  <button class="btn btn-danger">查询</button>
			  </div>
		  </div>
		  
		  <!-- 第三行：主要内容区 -->
		  <div class="row">
			  <!-- 第一列 -->
			  <div class="col-3">
				  <!-- 第一行：书籍分类 -->
				  <div class="row" style="background-color: #7E0000; color: white; font-size: 20px;">
					  书籍分类
				  </div>
				  <!-- 第二行：书籍分类列表 -->
				  <div class="list-group row">
				    <a href="#" class="list-group-item list-group-item-action"> 文艺</a>
				    <a href="#" class="list-group-item list-group-item-action list-group-item-primary"> 小说</a>
				    <a href="#" class="list-group-item list-group-item-action list-group-item-secondary"> 青春</a>
				    <a href="#" class="list-group-item list-group-item-action list-group-item-success"> 童书</a>
				    <a href="#" class="list-group-item list-group-item-action list-group-item-danger"> 励志</a>
				    <a href="#" class="list-group-item list-group-item-action list-group-item-warning"> 生活</a>
				    <a href="#" class="list-group-item list-group-item-action list-group-item-info"> 科技<

最低0.47元/天解锁文章

_十二.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BootStrap-书籍搜索列表&购物车&订单结算&form表单&分页&图标

目录1. 用BootStrap实现案例1.1 搜索列表1.2 购物车&订单结算1.3form表单&分页&图标1. 用BootStrap实现案例1.1 搜索列表实现效果实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入jQuery..
复制链接

扫一扫