Bootstrap 案例

搜索书籍界面：组件媒体对象 Media-Object

购物车界面：组件表格 table table-hover

订单界面：组件模态框 modal data-toggle="modal" data-target="#aa"

图标的使用：

下载 解压 font 页面中引入icon.css style="font-size color"

其他组件：折叠 滚动监听 路径导航 ....

案例一 目录

<div class="media">
  <img src="img/3.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">狂人日记</h5>
    <p>书籍价格：60</p>
	<p>书籍作者：花湖</p>
	<p>出版社：清华出版社</p>
	<p>评价：牛逼</p>
	<p>
	<button class="btn-danger">我要结算</button>
	<button class="btn-danger">加入购物车</button>
	</p>
  </div>

案例二 购物车 

<table class="table table-hover">
						<thead class="bg-primary">
							<tr>
								<th scope="col">书籍名称</th>
								<th scope="col">单价</th>
								<th scope="col">购买数量</th>
								<th scope="col">小计</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th scope="row">狂人日记</th>
								<td>60</td>
								<td><input type="text" value="1" /></td>
								<td>60</td>
								<td><a href="#">删除</a></td>
							</tr>
							<tr>
								<th scope="row">ARRC</th>
								<td>20</td>
								<td><input type="text" value="1" /></td>
								<td>20</td>
								<td><a href="#">删除</a></td>
							</tr>
							<tr>
								<th scope="row">自动化运维</th>
								<td>40</td>
								<td><input type="text" value="1" /></td>
								<td>40</td>
								<td><a href="#">删除</a></td>
							</tr>
						</tbody>
					</table>
					<div id="aa">
						<button class="btn btn-danger">清空购物车</button>
						<button class="btn btn-info">清空购物车</button>
						<button class="btn btn-success" data-toggle="modal" data-target="#exampleModal">清空购物车</button>
					</div>

案例三 弹出框 

<!-- 模态框 建议作为body的直接子元素-->
		<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        1....
		2....
		订单总价
      </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>

案例四：小图标 

<div class="col">
							<figure class="figure">
								<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>冷间谍&nbsp;<i class="bi bi-cart3 text-danger" ></i></b></figcaption>
							</figure>
						</div>
						<div class="col">
							<figure class="figure">
								<img src="img/1.png" class="figure-img img-fluid rounded" alt="...">
								<figcaption class="figure-caption"><b>冷间谍&nbsp;<i class="bi bi-cart3"></i></b></figcaption>
							</figure>

						</div>