Bootstrap

最新推荐文章于 2023-04-21 18:09:12 发布

এ 清ོ眸ꦿ℘゜

最新推荐文章于 2023-04-21 18:09:12 发布

阅读量1k

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_63845026/article/details/123942974

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

准备工作:

网站：

https://v4.bootcss.com

进去后的画面:

点击中文文档：

这里面就有各种组件、工具供你使用

页面中引入库
① bootstrap.css:Bootstrap核心样式【添加到head标签中】
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
② jquery-3.3.1.js：jQuery库
【注意：必须在Bootstrap核心库引入之前引入jQuery库】
③ bootstrap.js:Bootstrap核心库
【注意】②③添加到</body>之前，如下：

<script src="js/jquery-3.3.1.js"type="text/javascript"></script>
<1--引入Bootstrap的类库-->
<script sre="js/bootstrap.min.js" type="text/javascript"></script>

案例一:实现搜索书籍页面：组件：媒体对象-Media object

样式：

<style>

.list-group,.media{
               margin-top: 30px;/* 上间距 */
           }

           .media-body p{
               line-height: 15px;/* 行高 */
               letter-spacing: 3px;/* 字符间距 */
           }

           .media-body p button{
               height: 30px;
               line-height: 10px;
           }

</style>

HTML代码：

<div class="media">
                   <img src="img/1.png" width="100px" class="mr-3" alt="...">
                   <div class="media-body">
                   <h5 class="mt-0"><b>冷间谍</b></h5>
                       <p>价格:9.9元</p>
                       <p>作者:大黄</p>
                       <p>出版社:浪琴湾</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/2.png" width="100px" class="mr-3" alt="...">
                   <div class="media-body">
                   <h5 class="mt-0"><b>第一商会</b></h5>
                       <p>价格:10.9元</p>
                       <p>作者:大黄</p>
                       <p>出版社:浪琴湾</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" width="100px" class="mr-3" alt="...">
                   <div class="media-body">
                   <h5 class="mt-0"><b>狂人日记</b></h5>
                       <p>价格:5.9元</p>
                       <p>作者:大黄</p>
                       <p>出版社:浪琴湾</p>
                       <p>书籍简介:好看~~</p>
                       <p>
                           <button class="btn btn-danger">加入购物车</button>
                           <button class="btn btn-danger">立即购买</button>
                       </p>
                   </div>
                   </div>
                   <hr />

效果图:

案例2：实现购物车页面布局页面内容：表格-Table

样式：

<style>

   .list-group,.table{
               margin-top: 30px;/* 上间距 */
           }

           .table-hover thead{
               color: white;/* 字体颜色 */
           }

           .table-hover tr,.table-hover tr input{
               text-align: center;/* 水平居中 */
           }

           .yyy{
               text-align: center;/* 按钮居中 */
           }

           /* 按钮高度 */
           .yyy button{
               height: 30px;
               line-height: 10px;
           }

</style>

HTML代码:

   <table class="table table-hover">
                   <thead>
                   <tr class="bg-primary">
                   <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>9.9元</td>
                   <td><input value="2"></td>
                   <td>19.8元</td>
                       <td><a href="#">删除</a></td>
                   </tr>
                   <tr>
                   <th scope="row">《狂人日记》</th>
                   <td>6.9元</td>
                   <td><input value="2"></td>
                   <td>13.8元</td>
                   <td><a href="#">删除</a></td>
                   </tr>
                   <tr>
                   <th scope="row">《第一商会》</th>
                   <td>10元</td>
                   <td><input value="1"></td>
                   <td>10元</td>
                   <td><a href="#">删除</a></td>
                   </tr>
                   </tbody>
                   </table>
                   <p class="yyy">
                       <button class="btn btn-danger">清空购物车</button>
                       <button class="btn btn-outline-success">继续购物</button>
                       <button class="btn btn-primary">点我结算</button>
                   </p>

效果图:

第二个图片是加了轮廓线的按钮，代码就是加了一个outline

案例3：实现购物车页面订单信息组件：模态框-Modal

在案例二的基础之上完成，当用户点击结算按钮时会弹出模态框，模态框代码要写在<body>标签中，但是要放在最前边。

<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">
       放订单信息
       </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>