案例一.搜索书籍页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
a:hover{
background-color: white;
color: #0056B3;
}
.carousel-control-prev-icon{
background-color: #007BFF;
}
.carousel-control-next-icon{
background-color: #007BFF;
}
p:hover{
color: #007BFF;
}
h5:hover{
color: #17A2B8;
}
#xssj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
#rmsj{
background-image:url(img/title_bj.png) ;
height: 30px;
background-repeat: no-repeat;
margin-top: 10px;
margin-bottom: 10px;
border: 2px #7ABAFF solid;
background-color: #F7F6F6;
color: whitesmoke;
padding-left: 20px;
line-height: 30px;
}
</style>
</head>
<body>
<!-- 都需要包裹在一个container固定容器中 -->
<div class="container" style=" padding-left: 200px;">
<!-- 第一行 --------------------------------------------------------------------- -->
<div class="row" style="margin-top:10px;">
<!-- nav导航... -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">欢迎来到我的图书世界</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">登录 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">注册</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
首页
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">购物车</a>
<a class="dropdown-item" href="#">分类</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">个人中心</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">退出</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="书籍名称或作者姓名" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<!-- 第二行.3分类 --------------------------------------------------------------------- -->
<div class="row"style="margin-top:10px;">
<!-- 背景颜色 -->
<div class="col-md-3 col-12" style="background-color: wheat; width: 400px;">
分类
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
书籍分类
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
科幻
</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">真的C</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" disabled>打电话问和热饿饿</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
没有分类
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
婚礼
</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">真的C</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" disabled>打电话问和热饿饿</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
<!-- 背景颜色 -->
<!-- 第二行.9，商城首页的书籍搜索页 -->
<div class="col-md-9 col-12"style="background-color: #005CBF; width: 400px;">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3 align-self-center" src="img/tpsj/1.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">我的世界</h5>
<p>作者：阿阿斯顿</p>
<p>价格：111</p>
<p>出版社：中华人民出版社</p>
<p>简介：真的C</p>
<button style="width: 130px;" type="button" class=" btn btn-outline-danger">加入购物车</button>
<button style="width: 130px;" type="button" class=" btn btn-outline-warning">结算</button>
</div>
</li>
<hr >
<li class="media my-4">
<img class="mr-3 align-self-center" src="img/tpsj/2.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">孔融让梨</h5>
<p>作者：阿斯顿</p>
<p>价格：222</p>
<p>出版社：中华出版社</p>
<p>简介：真的是C</p>
<button style="width: 130px;" type="button" class=" btn btn-outline-danger">加入购物车</button>
<button style="width: 130px;" type="button" class=" btn btn-outline-warning">结算</button>
</div>
</li>
<hr >
<li class="media">
<img class="mr-3 align-self-center" src="img/tpsj/3.png" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1">好看看看</h5>
<p>作者：萨达</p>
<p>价格：333</p>
<p>出版社：kk出版社</p>
<p>简介：完结</p>
<button style="width: 130px;" type="button" class=" btn btn-outline-danger">加入购物车</button>
<button style="width: 130px;" type="button" class=" btn btn-outline-warning">结算</button>
</div>
</li>
</ul>
</div>
<!-- 分页 -->
<nav aria-label="Page navigation example" style="margin-left: 400px; margin-top: 20px;">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</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">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<!-- 第三行 版权信息 start
<div class="row" style="margin: 0 auto; padding: 200px; margin-top: 10px;">
<div class="col">
<br><br><br>
<div class="text-center" >©所有版权信息归卓京教育所有</div>
</div>
</div> -->
</div>
</div>
<!-- 第三行 版权信息 start -->
<div class="row" style="margin: 20px 0px;border-top: 1px solid gainsboro;">
<div class="col">
<div class="text-center">©所有版权信息归卓京教育所有</div>
</div>
</div>
<!-- 大的固定容器div -->
</div>
</body>
</html>
这是一个关于Bootstrap的快速入门教程，通过一个搜索书籍页面的案例，展示了如何使用Bootstrap的媒体对象、表格、模态框和分页组件。页面包括导航栏、分类展示和商品列表，以及分页功能。页面样式进行了定制，提供了友好的交互体验。
扫一扫
1911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
