Bootstrap03

最新推荐文章于 2024-08-16 23:08:28 发布

Aur ora

最新推荐文章于 2024-08-16 23:08:28 发布

阅读量73

点赞数

分类专栏： Bootstrap 文章标签： java

本文链接：https://blog.csdn.net/qq_65345936/article/details/124499786

版权

Bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML和CSS组件来实现网页设计，包括搜索书籍页面、购物车页面布局和购物车订单信息展示。通过媒体对象组件创建了书籍展示，使用表格构建了购物车布局，并利用模态框展示订单详情。案例涵盖了用户交互和界面设计的关键元素。

摘要由CSDN通过智能技术生成

案例1：实现搜索书籍页面

用到组件：媒体对象-Media object

<div class="media">
                       <img src="img/1.png" class="mr-3" alt="...">
                       <div class="media-body">
                           <h5 class="mt-0"><b>冷间谍</b></h5>
                           <p>书籍价格：9.9元</p>
                           <p>作者：张强钓丝</p>
                           <p>出版社：T280/p>
                           <p>书籍简介：夏日炎炎，油腻超甜</p>
                           <p>
                               <button class="btn btn-danger">加入购物车</button>
                               <button class="btn btn-danger">立即购买</button>
                           </p>
                       </div>
                   </div>
                       <hr />


                       <div class="media">
                           <img src="img/3.png" class="mr-3" alt="...">
                           <div class="media-body">
                               <h5 class="mt-0"><b>狂人日记</b></h5>
                               <p>书籍价格：9.9元</p>
                               <p>作者：小钓丝</p>
                               <p>出版社：T280/p>
                               <p>书籍简介：夏日炎炎，油腻超甜</p>
                               <p>
                                   <button class="btn btn-danger">加入购物车</button>
                                   <button class="btn btn-danger">立即购买</button>
                               </p>
                           </div>
                       </div>
                           <hr />

效果图：

案例2：实现购物车页面布局

用到页面内容：表格-Table

<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">1</th>
                               <td>冷间谍</td>
                               <td>19.9</td>
                               <td><input value="2"/></td>
                               <td>39.8元</td>
                               <td><a>删除</a></td>
                           </tr>
                           <tr>
                               <th scope="row">1</th>
                               <td>狂人日记</td>
                               <td>19.9</td>
                               <td><input value="2"/></td>
                               <td>39.8元</td>
                               <td><a>删除</a></td>
                           </tr>
                           <tr>
                               <th scope="row">1</th>
                               <td>时间都在</td>
                               <td>19.9</td>
                               <td><input value="2"/></td>
                               <td>39.8元</td>
                               <td><a>删除</a></td>
                           </tr>
                       </tbody>
                   </table>
                   <p class="xxx">
                       <button class="btn btn-danger">清空购物车</button>
                       <button class="btn btn-success">继续购物</button>
                       <button class="btn btn-primary">点我结算</button>
                   </p>

效果图

案例3：实现购物车页面订单信息

用到组件：模态框-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">订单详情</h5>
                       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true">×</span>
                       </button>
                   </div>
                   <div class="modal-body">
                       1......
                       2.......
                   </div>
                   <div class="modal-footer">
                       <button type="button" class="btn btn-primary">确定</button>
                       <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                   </div>
               </div>
           </div>
       </div>