Bootstrap（书籍搜索&表格实现购物车）

最新推荐文章于 2024-03-30 03:34:48 发布

Bugxiu_fu

最新推荐文章于 2024-03-30 03:34:48 发布

阅读量929

点赞数 1

文章标签： bootstrap javascript css

本文链接：https://blog.csdn.net/Bugxiu_fu/article/details/124882720

版权

前言：亲爱的读者们，今天给一些代码小白分享一下两个案例。

话不多说，直接上代码。

导入依赖：

        <!-- 引入Bootstrap css类库 -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <!-- 引入jQuery类库 -->
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
        <!-- 引入Bootstrap类库 -->
        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

案例01：表格实现购物车

<!--购物车-->
				<div class="col-md-9">
					<!-- 表格 table-striped-->
					<table class="table table-striped">
						<thead>
							<tr class="bg-primary text-white">
								<th scope="col">
									<input type="checkbox">全选
								</th>
								<th scope="col">商品名称</th>
								<th scope="col">图片</th>
								<th scope="col">单价</th>
								<th scope="col">数量</th>
								<th scope="col">总价格</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
						<tbody>
							<!-- 名称导航条背景 -->
							<tr class="bg-primary text-white">
							<tr>
								<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
								<td>章游那悲惨的爱情故事</td>
								<td><img src="img/2.png"></td>
								<td>￥1.00</td>
								<td>
									<!-- 数量  输入框组 -->
									<div class="input-group mb-3" style="width: 120px;">
										<div class="input-group-append">
											<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
										</div>
										<input type="text" class="form-control" placeholder="Recipient's username" 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>
								</td>
								<td>￥1.00</td>
								<td><button type="button" class="btn btn-danger">移除</button></td>
							</tr>
							</tr>
							<tr>
								<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
								<td>章游那悲惨的爱情故事</td>
								<td><img src="img/2.png"></td>
								<td>￥1.00</td>
								<td>
									<!-- 数量  输入框组 -->
									<div class="input-group mb-3" style="width: 120px;">
										<div class="input-group-append">
											<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
										</div>
										<input type="text" class="form-control" placeholder="Recipient's username" 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>
								</td>
								<td>￥1.00</td>
								<td><button type="button" class="btn btn-danger">移除</button></td>
							</tr>
							<tr>
								<th scope="row"><input type="checkbox" name="" id="" value="" /></th>
								<td>章游那悲惨的爱情故事</td>
								<td><img src="img/2.png"></td>
								<td>￥1.00</td>
								<td>
									<!-- 数量  输入框组 -->
									<div class="input-group mb-3" style="width: 120px;">
										<div class="input-group-append">
											<button class="btn btn-outline-secondary" type="button" id="button-addon2">-</button>
										</div>
										<input type="text" class="form-control" placeholder="Recipient's username" 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>
								</td>
								<td>￥1.00</td>
								<td><button type="button" class="btn btn-danger">移除</button></td>
							</tr>
						</tbody>
					</table>

按钮样式：

<p id="btn" class="text-center">
				<button type="button" class="btn-warning">清空购物车</button>
				<button type="button" class="btn-success">返回购物车</button>
				<button type="button" class="btn-danger">结算</button>
</p>

02案例：媒体对象实现搜索书籍输入框

<!-- 搜索输入框-->
<div class="input-group mb-3">
		<input type="text" class="form-control" 
   placeholder="搜索书籍" aria-label="Recipient's username"
									 aria-describedby="basic-addon2">
<div class="input-group-append">
	<span class="btn btn-primary" id="basic-addon2">
搜索</span>

	</div>
</div>