第二十一谈：图文混排和滚动监听

本节课我们来开始学习 Bootstrap 的提供的图文混排和滚动监听。

一．媒体图文

1. 需要一张小图片，然后使用.media 样式实现混排效果；

      <div class="media">
          <img class="mr-3" src="img/1.png" alt="">
          <div class="media-body">
              <h5>标题区域</h5>
              <p>这里是内容区域！......</p>
              <!--这里可以继续层叠嵌套-->
          </div>
      </div>

2. 使用.align-self-end(start、center)设置图片的显示位置；

      <img class="align-self-end mr-3" src="img/2.png" alt="">

3. 如果想让图片显示在右边，可以直接将 img 标签设置在内容底部；

      <div class="media-body">
      ...
      </div>
      <img class="align-self-end mr-3" src="img/img2.png" alt="">

4. 如果想要图文混排列表化，可以设置成 ul>li 列表模式；

      <ul class="list-unstyled">
          <li class="media">
              ...
          </li>
      </ul>

二．滚动监听

1. 滚动监听，需要列表组和滚动区域结合实现；

      <nav id="mynav" class="navbar navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <ul class="nav nav-pills">
              <li class="nav-item">
                  <a class="nav-link" href="#one">One</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#two">Two</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#three">Three</a>
              </li>
          </ul>
      </nav>
      <div data-spy="scroll" data-target="#mynav" data-offset="0" style="height: 300px;overflow: scroll;position:relative">
          <h4 id="one">One</h4>
          <p>...</p>
          <p>...</p>
          <p>...</p>
          ...
          <h4 id="two">Two</h4>
          <p>...</p>
          <p>...</p>
          <p>...</p>
          ...
          <h4 id="three">Three</h4>
          <p>...</p>
          <p>...</p>
          <p>...</p>
          ...
      </div>

2. 左右列表组也支持滚动监听；

      <div class="row">
          <div class="col">
              <div id="list" class="list-group">
                  <a class="list-group-item list-group-item-action" href="#one">one</a>
                  <a class="list-group-item list-group-item-action" href="#two">two</a>
                  ...
              </div>
          </div>
          <div class="col">
              <div data-spy="scroll" data-target="#list" data-offset="80" style="height: 300px;overflow: scroll;">
                  <h4 id="one">One</h4>
                  <p>...</p>
                  <p>...</p>
                  <p>...</p>
                  ...
                  <h4 id="two">Two</h4>
                  <p>...</p>
                  <p>...</p>
                  <p>...</p>
                  ...
              </div>
          </div>
      </div>