一、用bootstrap实现页面布局

        案例1、实现搜索书籍页面   效果如下

右侧的部分可以用到boostrap媒体对象(media-object)，这里用的是

再改个样式 效果应该就是这样的

(改了line-height: 14px;(行高)   letter-spacing: 2px;(字符间距))接下来就是设置按钮了

 在书籍简介的后面写上一个p标签然后写上按钮就可以了有其他的颜色这里用的是danger红色

    <p>
                        <button class=”btn btn-danger”>加入购物车</button>
                        <button class=”btn btn-danger”>立即购买</button>
                    </p>

 水平线怎么设置呢？写上一个<hr/>标签即可颜色也可以换啊在<hr/>里写一个color就可以了

         案例2、实现购物车页面布局 效果如下

 右侧的部分可以用到boostrap页面内容-表格(Table)，这里用的是鼠标 放上去会有高亮效果

 上图效果中表格第一行为蓝色，可以在boostrap页面内容-表格(Table)里找到 primary 并放进我们的要变色的那一行

 写按钮

    </table>
            
                <p class=”yyy”>
                    <button class=”btn btn-danger”>清空购物车</button>
                    <button class=”btn btn-outline-success”>继续购物</button>
                    <button class=”btn btn-primary”>点我结算</button>
                </p>

样式

颜色对应单词

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

点击点我结算这个按钮的时候就会弹出框还有附近出现黑灰透明遮罩

 在bootstrap里面所有的效果都是date开头

这里用的是这个样式（因为要点我要结算按钮触发素以只copy了 modal部分）模态框html部分最好放在body的下面

data-toggle="modal" data-target="#exampleModal"

 
        /*  data-toggle=”modal” 点击这个按钮呈现模态效果    data-target=”#exampleModal”   target 目标*/
        /* 点击这个按钮 让id为exampleModal的模态框出来*/

button部分这一行代码很关键，将这行代码放在你要触发的按钮里面（我要结算）然后就是改内容

有一个比较细节的部分，国外习惯关闭在左确定在右可以把位置调整（看个人不改也行）

二、图表组件的使用

1、找到并下载图标库

点击下载后往下翻

 下载完后解压然后点开，找到font文件夹，将整个font文件夹copy到要用图标的那个项目

2、引入图标库css后开始找图标

！！！一定要在Bootstrap的CSS后引入

<link rel=”stylesheet” type=”text/css” href=“font/bootstrap-icons.css”/>

 随便点一个里面会有示例，代码和那个图标

 点击用法里面会有很多图标的用法

 这里我们用到的是这个

<figcaption class=”figure-caption text-right”>冷间谍&nbsp;<i class=”bi bi-cart4 text-danger“></i></figcaption>

在需要插入图标的地方插入图标（紫色区域为图标），也可以改变颜色（红色部分，改的是红色）