[day16][前端][學習] 試著套用BS模板，讓你的網站一臉就是bootstrap

bootstrap是一個魔法！

在BS的世界裡面提供相當多預先命名好的class名稱讓你直接呼叫，甚至可以直接讓你複製對應組件直接組成你的網頁！在上一篇就是利用他提供的nav組件快速製作的，這邊就繼續用這個方式製作出一整樣本網頁！

Bootstrap(https://getbootstrap.com/ )

點擊getstarted，把css和js引入就可以了！這邊我們利用注入的方式為每個頁面注入，新建一個scriptimport.ejs檔案

scriptimport.ejs

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

然後塞進index.ejs內

index.ejs

<%- include('./header.ejs', {title: title, navBar: navBar}); %>
<!-- 將變數注入進去樣板 -->
  <h1><%= title %></h1>
  <p>Welcome to <%= title %></p>
  <button id="callApi">呼叫API</button>
  <a href="./test">前往新頁面</a>
  <%- include('./scriptimport.ejs'); %>
  <script>
    let callApiButton = document.getElementById('callApi');
    callApiButton.addEventListener('click', async function () {
      let result = await fetch('/users').then(res => {
        return res.text();
      })
      alert(result);
    })
  </script>
</body>
</html>

這樣就算注入完成了！你說沒有引入css？上一篇header其實就已經引入囉，可以去確認一下！接著點開組件欄

就可以看到一堆的組件了！navbar在上一篇已經引入了，這邊練習Carousel的引入，這樣其他的引入就可以算了解了！一樣點開Carousel，接著引入第一個slides only(https://getbootstrap.com/docs/4.5/components/carousel/#slides-only )複製他的程式碼到index.ejs，接著把裡面的圖片"..."替換掉，這邊建議就用假圖就好了

index.ejs

<%- include('./header.ejs', {title: title, navBar: navBar}); %>
<!-- 將變數注入進去樣板 -->
  <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
          <img src="https://picsum.photos/1920/1080/?random=1" class="d-block w-100">
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1080/?random=2" class="d-block w-100">
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1080/?random=3" class="d-block w-100">
      </div>
    </div>
  </div>
  略

這樣就算完成了，這邊建議可以試著套套看(https://getbootstrap.com/docs/4.5/components/carousel/#with-controls )的版本！因為多了控制項目比較方便的同時，也稍微修改了一下指向。可以注意ithelpGo的部分，對於BS的理解應該會多一些些！金魚都能懂的Bootstrap5網頁框架開發對需要更多了解的你會很有幫助

  <div id="ithelpGo" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
          <img src="https://picsum.photos/1920/1080/?random=1" class="d-block w-100">
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1080/?random=2" class="d-block w-100">
      </div>
      <div class="carousel-item">
        <img src="https://picsum.photos/1920/1080/?random=3" class="d-block w-100">
      </div>
    </div>
    <a class="carousel-control-prev" href="#ithelpGo" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#ithelpGo" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

githubday16