--- type: slide --- # 新聞網頁製作(七) - 使用 Bootstrap 套件 --- ### 前置作業 - 下載 https://github.com/nickhsine/teach-at-nccu/raw/master/111-02/05-23/exercise.zip - 開啟 VSCode，新增 `index.html` --- ### 載入 Bootstrap CSS - 在 `<head>` 中加入 `<link>` - 將 `<link>` 放在載入其他 css 之前 ```htmlembedded= <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> ``` --- ### 載入 Bootstrap JavaScript - 在 `<body>` 中放入 `<script>` - 盡可能靠近 `</body>` ```htmlembedded= <body> ... <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> </script> </body> ``` --- ### 使用 Bootstrap Carousel - 文件: https://getbootstrap.com/docs/5.0/components/carousel/ - 複製貼上套版 ```htmlembedded= <div id="carouselExample" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> ``` --- #### 修改 `<img src="...">` ```htmlembedded= <div class="carousel-item active"> <img src="./assets/images/image-1.jpg" class="d-block w-100"> </div> <div class="carousel-item"> <img src="./assets/images/image-2.jpg" class="d-block w-100"> </div> <div class="carousel-item"> <img src="./assets/images/image-3.jpg" class="d-block w-100"> </div> ``` --- #### 調整換圖的時間 - 在 `<div class="carousel-item">` 上加上 `data-bs-interval="3000"`（改成三秒鐘換圖） ```htmlembedded= <div class="carousel-item active" data-bs-interval="3000"> <img src="./assets/images/image-1.jpg" class="d-block w-100"> </div> ``` --- #### 在既有的 Carousel 上調整 style --- #### 統一圖片寬高 - 作法一：使用 Bootstrap CSS 已經定義好的 class - 作法二：新增屬於自己的 CSS --- #### 作法一：在既有的 class 上添加 style ```htmlembedded= <head> <style> /* 為 Bootstrap 定義好的 .carousel-item class 添加 styles */ .carousel-item > img { width: 100%; height: 60vh; object-fit: contain; } </style> </head> <body> ... <div class="carousel-item active"> <img src="./assets/images/image-1.jpg" class="d-block w-100"> </div> ... </body> ``` --- #### 作法二：新增屬於自己的 CSS ```htmlembedded= <head> <style> /* 為 Bootstrap 定義好的 .carousel-item class 添加 styles */ .my-img-block { width: 100%; height: 60vh; object-fit: contain; } </style> </head> <body> ... <div class="carousel-item active"> <img class="my-img-block" src="./assets/images/image-1.jpg" class="d-block w-100"> </div> ... </body> ``` --- #### TroubleShootings 1. 當一個 html 檔案裡用到多個 Carousel，請確定 Carousel 使用到的 id 不要重複。Bootstrap JS 是透過 id 選取要改變的 html 元素，若 id 重複，Bootstrap 可能會改到錯誤的元素 2. 承上，改了 id 後，要記得一併修改其他用到這個 id 的元素 4. 不要改到 Bootstrap 提供的 class --- ###### tags: `slides`