Bootstrap03媒体对象，表格，模态框的使用

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

        组件：媒体对象-Media object

##媒体对象的基本使用

1.嵌套

媒体对象可以无限嵌套，尽管我们建议您在某些时候尽量减少网页的嵌套层级，但它在技术原理上来说是合法的，嵌套.media在.media-body下面即可:

<div class="media">
  <img class="mr-3" src="..." alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="pr-3" href="#">
        <img src="..." alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

2.对齐

M媒体对象中的媒体可以与flexbox流式布局一样，实现对齐到顶部、中间、底部，自由便利，只要在.media-body的父级加上align-self-start等属性。

3.列表呈现

媒体对象的结构要求很少，您还可以在列表HTML元素上使用这些类，在<ul> or <ol>添加.list-unstyled从而删除浏览器默认列表样式，然后在li