案例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 rel="stylesheet" type="text/css" href="css/bootstrap.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">
.navbar-collapse {
/* 流式布局 */
flex-grow: 0;
}
.form-group {
/* 宽度 */
width: 320px;
/* 居中 */
margin: 0 auto;
}
#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;
}
.form-group{
width:300px;
margin: 0 auto;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(function(){
$('.carousel').carousel({
interval: 2000
})
});
</script>
</head>
<body>
<!-- 实现导航栏区域 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<!-- 导航条的标题-->
<a class="navbar-brand" href="#">您好!欢迎来到碰哒鬼网上书城✨✨✨</a>
<!-- 按钮：如果的页面在不同端的区域显示 会有按钮出现-->
<!-- collapse 折叠组件 通过data-toggle属性控制显示与隐藏（必须引入Bootstrap.js） -->
<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="login.html">登录</a>
<a class="nav-link" href="register.html">注册</a>
<!-- disabled 禁用 -->
<a class="nav-link disabled">我的购物车</a>
<!-- wifi图标 -->
<svg class="bi bi-wifi" width="25px" height="25px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.858 11.858A1.991 1.991 0 0 1 8 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z"/>
<path fill-rule="evenodd" d="M7.731 12.024l.269.269.269-.269a1.507 1.507 0 0 0-.538 0zm-1.159-.576A2.49 2.49 0 0 1 8 11c.53 0 1.023.165 1.428.448a.5.5 0 0 1 .068.763l-1.142 1.143a.5.5 0 0 1-.708 0L6.504 12.21a.5.5 0 0 1 .354-.853v.5l-.286-.41zM8 9.5a4.478 4.478 0 0 0-2.7.9.5.5 0 0 1-.6-.8c.919-.69 2.062-1.1 3.3-1.1s2.381.41 3.3 1.1a.5.5 0 0 1-.6.8A4.478 4.478 0 0 0 8 9.5zm0-3c-1.833 0-3.51.657-4.814 1.748a.5.5 0 0 1-.642-.766A8.468 8.468 0 0 1 8 5.5c2.076 0 3.98.745 5.456 1.982a.5.5 0 1 1-.642.766A7.468 7.468 0 0 0 8 6.5z"/>
<path fill-rule="evenodd" d="M8 3.5c-2.657 0-5.082.986-6.932 2.613a.5.5 0 1 1-.66-.75A11.458 11.458 0 0 1 8 2.5c2.91 0 5.567 1.081 7.592 2.862a.5.5 0 1 1-.66.751A10.458 10.458 0 0 0 8 3.5z"/>
</svg>
</div>
</div>
</div>
</nav>
<!-- 除去导航条 都需要借助栅格系统来实现 -->
<div class="container">
<!-- 第一行 显示搜索栏目 -->
<div class="row" style="margin-top: 10px;">
<div class="col">
<div class="jumbotron">
<!-- 表单模块 -->
<form>
<div class="form-group">
<!-- 输入框组件 -->
<div class="input-group mb-3">
<input style="" type="text" class="form-control" placeholder="书籍名"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="btn btn-danger" id="basic-addon2">搜索</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 第二行 显示左侧列表以及右侧的轮播图以及热门书籍 -->
<div class="row">
<div class="col-12 col-md-3">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne" style="text-align:center;line-height: 50px;">
<h2 class="mb-0">
<button style="font-weight: bold;font-size: 20px;"
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">
<ul class="list-group">
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">文艺
<span class="badge badge-primary badge-pill">5W+</span>
</li>
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">小说
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-secondary d-flex justify-content-between align-items-center">青春
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-success d-flex justify-content-between align-items-center">童书
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">励志/成功
<span class="badge badge-primary badge-pill">1W+</span>
</li>
<li class="list-group-item list-group-item-warning d-flex justify-content-between align-items-center">生活
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-center">人文社科
<span class="badge badge-primary badge-pill">999+</span>
</li>
<li class="list-group-item list-group-item-light d-flex justify-content-between align-items-center">经管
<span class="badge badge-primary badge-pill">999+</span>
</li>
<li class="list-group-item list-group-item-dark d-flex justify-content-between align-items-center">科技
<span class="badge badge-primary badge-pill">1W+</span>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo" style="text-align:center;line-height: 50px;">
<h2 class="mb-0">
<button style="font-weight: bold;font-size: 20px;"
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>
</div>
<div class="card">
<div class="card-header" id="headingThree" style="text-align:center;line-height: 50px;">
<h2 class="mb-0">
<button style="font-weight: bold;font-size: 20px;"
class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
我收藏😍
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
收藏😀
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-9">
<div class="row">
<div class="col">
<div class="media">
<img class="align-self-center mr-3" src="img/1.png" alt="Generic placeholder image">
<div class="media-body">
<dd class="right">
<h4>冷间谍</h4>
<p><strong>作者：</strong>亨宁曼凯尔</p>
<p><strong>价格：</strong>¥28.50</p>
<p><strong>出版社：</strong>江苏文艺出版社</p>
<p><strong>书籍简介：</strong>东野圭吾最钦佩的欧洲犯罪小说大师力作。把“哈利波特”拉下畅销榜榜首的侦探小说。最匪夷所思的历史真相、最错综复杂的政治斗争、最神秘莫测的间谍形象，最完美的罪犯与最完美的犯罪，结局你永远猜不到</p>
<p class="mt10"><a href="#"><img src="img/btn_shopping.png" /></a> <a href="#"><img src="im
g/btn_accounts.png" /></a> </p>
</dd>
</div>
</div>
<hr />
<div class="media">
<img class="align-self-center mr-3" src="img/2.png" alt="Generic placeholder image">
<div class="media-body">
<dd class="right">
<h4>第一商会</h4>
<p><strong>作者：</strong>寒川子</p>
<p><strong>价格：</strong>¥24.80</p>
<p><strong>出版社：</strong>北京联合出版公司</p>
<p><strong>书籍简介：</strong>超级畅销书作家寒川子创作历时三年全新力作！讲述财富与权力“离不开，靠不住”的明暗法则</p>
<p class="mt10"><a href="#"><img src="img/btn_shopping.png" /></a> <a href="#"><img src="img/btn_accounts.png" /></a> </p>
</dd>
</div>
</div>
<hr />
<div class="media">
<img class="align-self-center mr-3" src="img/3.png" alt="Generic placeholder image">
<div class="media-body">
<dd class="right">
<h4>狂人摄影日记</h4>
<p><strong>作者：</strong>阿刘</p>
<p><strong>价格：</strong>¥115.30</p>
<p><strong>出版社：</strong>电子工业出版社</p>
<p><strong>书籍简介：</strong>风光大师段岳衡作序，凯斯.沃克尔、罗伊.莱姆赛、大卫.迪尔邦、佐尔坦.坎威尔、云漫、吴海辰、范朝亮、张焰八位中外摄影名家联名推荐</p>
<p class="mt10"><a href="#"><img src="img/btn_shopping.png" /></a> <a href="#"><img src="img/btn_accounts.png" /></a> </p>
</dd>
</div>
</div>
<hr />
<div class="media">
<img class="align-self-center mr-3" src="img/4.png" alt="Generic placeholder image">
<div class="media-body">
<dd class="right">
<h4>伊文思与纪录电影</h4>
<p><strong>作者：</strong>孙红云(译)</p>
<p><strong>价格：</strong>¥39.60</p>
<p><strong>出版社：</strong>吉林出版集团有限责任公司</p>
<p><strong>书籍简介：</strong>本书收录了世界各国著名学者（如比尔·尼克斯等）和伊文思研究专家（如吴沃·托马斯等）从社会、审美等方面研究伊文思纪录电影的15篇文章。文章的研究范围从伊文思创作的第一阶段“电影诗人”时期的《桥》、《雨》一直到封镜之作《风的故事》。书中还收入伊文思1931—1963年间写作的9篇文章，这些论文在欧洲也属于首次整理发表。本书还附录了伊文思的生平与创作年表等资料</p>
<p class="mt10"><a href="#"><img src="img/btn_shopping.png" /></a> <a href="#"><img src="img/btn_accounts.png" /></a> </p>
</dd>
</div>
</div>
<hr />
<div class="media">
<img class="align-self-center mr-3" src="img/5.png" alt="Generic placeholder image">
<div class="media-body">
<dd class="right">
<h4>Python自动化运维</h4>
<p><strong>作者：</strong>刘天斯</p>
<p><strong>价格：</strong>¥58.60</p>
<p><strong>出版社：</strong>刘天斯</p>
<p><strong>书籍简介：</strong>中国运维领域偶像级专家、腾讯高级系统工程师在天涯社区和腾讯近10年运维实践的经验和智慧结晶不仅详尽介绍了服务监控、数据报表、系统安全等基础模块，而且深入讲解了自动化操作、系统管理、配置管理、集群管理及大数据应用等高级功能，包含4个完整的综合案例</p>
<p class="mt10"><a href="#"><img src="img/btn_shopping.png" /></a> <a href="#"><img src="img/btn_accounts.png" /></a> </p>
</dd>
</div>
</div>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</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="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">99</a></li>
<li class="page-item"><a class="page-link" href="#">100</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
<hr />
<div class="form-group" style="margin-top: 30px;">
<p>©所有版权信息归碰哒鬼集团所有</p>
</div>
</div>
</body>
</html>
案例2：实现购物车页面布局
页面内容：表格-Table
<!-- 购物车 -->
<table class="table table-hover">
<tr class="bg-primary text-white">
<td><input type="checkbox">全选</td>
<td>商品名称</td>
<td>图片</td>
<td>商品单价</td>
<td>商品数量</td>
<td>商品总价</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>冷间谍</td>
<td><img src="img/1.png" alt=""></td>
<td>¥17.7</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥17.7</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>第一商会</td>
<td><img src="img/2.png" alt=""></td>
<td>¥34.4</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥34.4</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>狂人日记</td>
<td><img src="img/3.png" alt=""></td>
<td>¥23.9</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥23.9</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
<hr />
<tr>
<td><input type="checkbox"></td>
<td>思考者</td>
<td><img src="img/4.png" alt=""></td>
<td>¥35.4</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥35.4</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
</table>
<hr />
<p class="text-center">
<button class="btn btn-danger">清空购物车</button>
<button class="btn btn-success">继续购物</button>
<button class="btn btn-warning" data-toggle = "modal" data-target = "#orderModal">立即结算</button>
</p>
案例3：实现购物车页面订单信息
组件：模态框-Modal+旋转特效-Spinners
<!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 rel="stylesheet" type="text/css" href="css/bootstrap.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">
.navbar-collapse {
/* 流式布局 */
flex-grow: 0;
}
.form-group {
/* 宽度 */
width: 320px;
/* 居中 */
margin: 0 auto;
}
#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;
}
.form-group{
width:300px;
margin: 0 auto;
font-size: 20px;
}
</style>
<script type="text/javascript">
$(function(){
$('.carousel').carousel({
interval: 2000
})
});
</script>
</head>
<body>
<!-- 设计一个模态框实现订单页面 -->
<!-- Modal -->
<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">结算页</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-inline mb-2">
<div class="form-group">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">确认订单</button>
</div>
</div>
</div>
</div>
<!-- 实现导航栏区域 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<!-- 导航条的标题-->
<a class="navbar-brand" href="#">您好!欢迎来到碰哒鬼网上书城✨✨✨</a>
<!-- 按钮：如果的页面在不同端的区域显示 会有按钮出现-->
<!-- collapse 折叠组件 通过data-toggle属性控制显示与隐藏（必须引入Bootstrap.js） -->
<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="login.html">登录</a>
<a class="nav-link" href="register.html">注册</a>
<!-- disabled 禁用 -->
<a class="nav-link disabled">我的购物车</a>
<!-- wifi图标 -->
<svg class="bi bi-wifi" width="25px" height="25px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.858 11.858A1.991 1.991 0 0 1 8 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z"/>
<path fill-rule="evenodd" d="M7.731 12.024l.269.269.269-.269a1.507 1.507 0 0 0-.538 0zm-1.159-.576A2.49 2.49 0 0 1 8 11c.53 0 1.023.165 1.428.448a.5.5 0 0 1 .068.763l-1.142 1.143a.5.5 0 0 1-.708 0L6.504 12.21a.5.5 0 0 1 .354-.853v.5l-.286-.41zM8 9.5a4.478 4.478 0 0 0-2.7.9.5.5 0 0 1-.6-.8c.919-.69 2.062-1.1 3.3-1.1s2.381.41 3.3 1.1a.5.5 0 0 1-.6.8A4.478 4.478 0 0 0 8 9.5zm0-3c-1.833 0-3.51.657-4.814 1.748a.5.5 0 0 1-.642-.766A8.468 8.468 0 0 1 8 5.5c2.076 0 3.98.745 5.456 1.982a.5.5 0 1 1-.642.766A7.468 7.468 0 0 0 8 6.5z"/>
<path fill-rule="evenodd" d="M8 3.5c-2.657 0-5.082.986-6.932 2.613a.5.5 0 1 1-.66-.75A11.458 11.458 0 0 1 8 2.5c2.91 0 5.567 1.081 7.592 2.862a.5.5 0 1 1-.66.751A10.458 10.458 0 0 0 8 3.5z"/>
</svg>
</div>
</div>
</div>
</nav>
<!-- 除去导航条 都需要借助栅格系统来实现 -->
<div class="container">
<!-- 第一行 显示搜索栏目 -->
<div class="row" style="margin-top: 10px;">
<div class="col">
<div class="jumbotron">
<!-- 表单模块 -->
<form>
<div class="form-group">
<!-- 输入框组件 -->
<div class="input-group mb-3">
<input style="" type="text" class="form-control" placeholder="书籍名"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="btn btn-danger" id="basic-addon2">搜索</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 第二行 显示左侧列表以及右侧的轮播图以及热门书籍 -->
<div class="row">
<div class="col-12 col-md-3">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne" style="text-align:center;line-height: 50px;">
<h2 class="mb-0">
<button style="font-weight: bold;font-size: 20px;"
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">
<ul class="list-group">
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">文艺
<span class="badge badge-primary badge-pill">5W+</span>
</li>
<li class="list-group-item list-group-item-primary d-flex justify-content-between align-items-center">小说
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-secondary d-flex justify-content-between align-items-center">青春
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-success d-flex justify-content-between align-items-center">童书
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-danger d-flex justify-content-between align-items-center">励志/成功
<span class="badge badge-primary badge-pill">1W+</span>
</li>
<li class="list-group-item list-group-item-warning d-flex justify-content-between align-items-center">生活
<span class="badge badge-primary badge-pill">10W+</span>
</li>
<li class="list-group-item list-group-item-info d-flex justify-content-between align-items-center">人文社科
<span class="badge badge-primary badge-pill">999+</span>
</li>
<li class="list-group-item list-group-item-light d-flex justify-content-between align-items-center">经管
<span class="badge badge-primary badge-pill">999+</span>
</li>
<li class="list-group-item list-group-item-dark d-flex justify-content-between align-items-center">科技
<span class="badge badge-primary badge-pill">1W+</span>
</ul>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo" style="text-align:center;line-height: 50px;">
<h2 class="mb-0">
<button style="font-weight: bold;font-size: 20px;"
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>
</div>
<div class="card">
<div class="card-header" id="headingThree" style="text-align:center;line-height: 50px;">
<h2 class="mb-0">
<button style="font-weight: bold;font-size: 20px;"
class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
我收藏😍
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
收藏😀
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-12">
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<!-- 购物车 -->
<table class="table table-hover">
<tr class="bg-primary text-white">
<td><input type="checkbox">全选</td>
<td>商品名称</td>
<td>图片</td>
<td>商品单价</td>
<td>商品数量</td>
<td>商品总价</td>
<td>操作</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>冷间谍</td>
<td><img src="img/1.png" alt=""></td>
<td>¥17.7</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥17.7</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>第一商会</td>
<td><img src="img/2.png" alt=""></td>
<td>¥34.4</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥34.4</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>狂人日记</td>
<td><img src="img/3.png" alt=""></td>
<td>¥23.9</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥23.9</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
<hr />
<tr>
<td><input type="checkbox"></td>
<td>思考者</td>
<td><img src="img/4.png" alt=""></td>
<td>¥35.4</td>
<td>
<div style="width: 100px;" class="input-group mb-3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button"
id="button-addon2">-</button>
</div>
<input type="text" class="form-control" value="1"
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>¥35.4</td>
<td>
<button type="button" class="btn btn-danger">删除</button>
<button type="button" class="btn btn-warning">修改</button>
</td>
</tr>
</table>
<hr />
<p class="text-center">
<button class="btn btn-danger">清空购物车</button>
<button class="btn btn-success">继续购物</button>
<button class="btn btn-warning" data-toggle = "modal" data-target = "#orderModal">立即结算</button>
</p>
<!-- 分页 -->
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">上一页</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="#">...</a></li>
<li class="page-item"><a class="page-link" href="#">99</a></li>
<li class="page-item"><a class="page-link" href="#">100</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
<hr />
<div class="form-group" style="margin-top: 30px;">
<p>©所有版权信息归碰哒鬼集团所有</p>
</div>
</div>
</body>
</html>
案例4：图标组件的使用
扩展内容-图标
<!-- wifi图标 -->
<svg class="bi bi-wifi" width="25px" height="25px" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M6.858 11.858A1.991 1.991 0 0 1 8 11.5c.425 0 .818.132 1.142.358L8 13l-1.142-1.142z"/>
<path fill-rule="evenodd" d="M7.731 12.024l.269.269.269-.269a1.507 1.507 0 0 0-.538 0zm-1.159-.576A2.49 2.49 0 0 1 8 11c.53 0 1.023.165 1.428.448a.5.5 0 0 1 .068.763l-1.142 1.143a.5.5 0 0 1-.708 0L6.504 12.21a.5.5 0 0 1 .354-.853v.5l-.286-.41zM8 9.5a4.478 4.478 0 0 0-2.7.9.5.5 0 0 1-.6-.8c.919-.69 2.062-1.1 3.3-1.1s2.381.41 3.3 1.1a.5.5 0 0 1-.6.8A4.478 4.478 0 0 0 8 9.5zm0-3c-1.833 0-3.51.657-4.814 1.748a.5.5 0 0 1-.642-.766A8.468 8.468 0 0 1 8 5.5c2.076 0 3.98.745 5.456 1.982a.5.5 0 1 1-.642.766A7.468 7.468 0 0 0 8 6.5z"/>
<path fill-rule="evenodd" d="M8 3.5c-2.657 0-5.082.986-6.932 2.613a.5.5 0 1 1-.66-.75A11.458 11.458 0 0 1 8 2.5c2.91 0 5.567 1.081 7.592 2.862a.5.5 0 1 1-.66.751A10.458 10.458 0 0 0 8 3.5z"/>
</svg>
本文介绍了如何使用Bootstrap框架完成四个实际案例：利用媒体对象实现搜索书籍页面，通过表格构建购物车页面布局，展示购物车订单信息并结合模态框与旋转特效增强交互，最后探讨了图标的使用和扩展内容。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
