第二十七谈：案例

本节课我们来开始学习做几个案例：导航栏设计、轮播展示、主题内容。

一．导航栏设计

1. 首先，复制上一节代码，清理掉，在 css 里面创建 style.css；
2. 然后增加 img 文件夹，复制必要的图片，比如 logo.svg；
3. 以下是导航栏设计的代码部分；

      <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
          <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbar">
              <a href="#" class="navbar-brand">
                  <img src="img/logo.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap
              </a>
              <div class="navbar-nav">
                  <a class="nav-item nav-link active" href="#">首页</a>
                  <a class="nav-item nav-link" href="#">图片</a>
                  <a class="nav-item nav-link" href="#">列表</a>
                  <a class="nav-item nav-link" href="#">关于</a>
              </div>
              <form action="" class="form-inline ml-auto">
                  <input type="text" class="form-control mr-sm-2" placeholder="关键字">
                  <button class="btn btn-outline-secondary my-2 my-sm-0">搜索</button>
              </form>
          </div>
      </nav>

二．轮播展示

1. 没什么可说的，复制图片过来，然后直接贴代码；

      #carousel {
          background-color: #E7E7E7;
          top: 3rem;
          margin-bottom: 4rem;
      }
      
      .carousel-indicators li {
          background-color: #444;
      }
      
      .carousel-control-prev-icon {
          background-image: url(../img/left.png);
          cursor: pointer;
      }
      
      .carousel-control-next-icon {
          background-image: url(../img/right.png);
          cursor: pointer;
      }

      <div id="carousel" class="carousel slide w-100" data-ride="carousel">
          <ol class="carousel-indicators">
              <li data-target="#carousel" data-slide-to="0" class="active"></li>
              <li data-target="#carousel" data-slide-to="1"></li>
              <li data-target="#carousel" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
              <div class="carousel-item active">
                  <img src="img/slider1.jpg" class="mx-auto d-block img-fluid" alt="">
              </div>
              <div class="carousel-item">
                  <img src="img/slider2.jpg" class="mx-auto d-block img-fluid" alt="">
              </div>
              <div class="carousel-item">
                  <img src="img/slider3.jpg" class="mx-auto d-block img-fluid" alt="">
              </div>
          </div>
          <a class="carousel-control-prev" href="#carousel" data-slide="prev">
              <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#carousel" data-slide="next">
              <span class="carousel-control-next-icon"></span>
          </a>
      </div>

三．主体内容（上）- 栅格

1. 没什么可说的，复制图片过来，然后直接贴代码；

<h2 class="index-h2">「为什么选择 Bootstrap4.x」</h2>
      <p class="index-h2-p mb-5 mt-3">简洁、直...！</p>
      <div class="row index-content">
          <div class="col-lg-6 mb-4">
              <div class="media">
                  <img src="img/tab-1.png" alt="tab-1">
                  <div class="media-body ml-2">
                      <h5 class="mb-3">课程内容</h5>
                      <p class="text-muted mb-2"><del>其他：...</del></p>
                      <p>我们：...！</p>
                  </div>
              </div>
          </div> ...
          <div class="tab5 mb-5">
              <div class="container">
                  <div class="row align-items-center text-center">
                      <div class="col-md-6 p-5">
                          <img src="img/tab5.png" style="width:60%;" alt="tab5">
                      </div>
                      <div class="col-md-6 tab5-p p-4">
                          <h3>强大的学习体系</h3>
                          <p>经过管理学大师层层把关、让您的企业突飞猛进。</p>
                      </div>
                  </div>
              </div>
          </div>
          ...
          <footer class="footer bg-dark p-5 text-light text-center">
              <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
              <p>辽 ICP 备 12345678. © 2009-2020 Bootstrap4.x. Powered by Bootstrap.</p>
          </footer>

四．主体内容（下）- 响应式

1. 直接贴代码；

      .index-h2 {
          font-size: calc(1rem + 1vw);
          text-align: center;
          letter-spacing: 1px;
          color: #0059b2;
          margin-top: 6rem;
      }
      
      .index-h2-p {
          font-size: calc(0.7rem + 0.8vw);
          text-align: center;
          letter-spacing: 1px;
          color: #999;
      }
      
      .tab5 {
          background-color: #eee;
          color: #555;
      }
      
      .index-content h5 {
          font-size: calc(1.2rem + 0.09vw);
      }
      
      .index-content p {
          font-size: calc(0.9rem + 0.1vw);
      }
      
      .tab5 h3,
      .tab6 h3 {
          font-size: calc(1.2rem + 0.8vw);
      }
      
      .tab5 p,
      .tab6 p {
          font-size: calc(0.9rem + 0.1vw);
      }
      
      footer {
          font-size: calc(0.9rem + 0.1vw);
      }
      
      /*Small devices (landscape phones, 576px and up)*/
      @media (min-width: 576px) and (max-width: 767px) {}
      
      /*Medium devices (tablets, 768px and up)*/
      @media (min-width: 768px) and (max-width: 991px) {}
      
      /*Large devices (desktops, 992px and up)*/
      @media (min-width: 992px) and (max-width: 1199px) {}
      
      /*Extra large devices (large desktops, 1200px and up)*/
      @media (min-width: 1200px) {
          .index-h2 {
              font-size: 220%;
          }
          .index-h2-p {
              font-size: 160%;
          }
      }