bootstrap----媒体对象&表格&模态框&图标

一、媒体对象用法：

media---媒体对象

<div class="media">
  <img src="img/pic_c3.png" class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">奇迹</h5>
        <p>作者：张小小 </p>
        <p>价格： ￥34.0</p>
        <p>出版社：文学出版社</p>
    <p>Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
    </div>
</div>

二、表格用法：

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>
      <td>冷间谍</td>
      <td>19.9元</td>
      <td><input value="2" /> </td>
      <td>39.8元</td>
      <td><a>删除</a></td>
    </tr>

三、模态框

<!-- Modal html代码 -->（显示框）
    <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">
        ...
      </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>
        

----点击按钮

<button class="bg-warning"data-toggle="modal" data-target="#exampleModal">点我结算</button>

四、图标

先下载---解压----引用----使用

导入font

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

---

在该使用的地方使用---

<i class="bi bi-cart3 text-danger"></i>

 

---