[筆記] BootStrap Card + Grid System + Modal 彈出視窗 @地瓜大的飛翔旅程

章節連結

重點摘要

Cards + Grid System 排版混用
Modal 的運用

運用 BootStrap 4.0 版本起有的 Card 樣式，再加上 Grid System 排版。最困難的大概是「如何命名變數」和「從茫茫的API技術文件」中找到需要的資料。

重點摘要

Cards + Grid System 排版混用

官方文件：

1. https://getbootstrap.com/docs/4.0/components/card/
2. https://getbootstrap.com/docs/4.0/layout/grid/

// BootStrap 有公定的 class 名稱，通常會在後方加上自定義的，方便日後維護
// "col-sm-3" 是small size, 佔25%尺寸(滿版為12)
// "card-mb-2" 中的 mb-2 為邊界設定，可見此 https://getbootstrap.com/docs/4.0/utilities/spacing/

htmlContent += `
  <div class="col-sm-3">
    <div class="card mb-2">
      <img class="card-img-top " src="${POSTER_URL}${item.image}" alt="#">
      <div class="card-body movie-item-body">
        <h6 class="card-title">${item.title}</h6>
      </div>
    </div>
  </div>
`

// BootStrap 有公定的 class 名稱，通常會在後方加上自定義的，方便日後維護

// "col-sm-3" 是small size, 佔25%尺寸(滿版為12)

// "card-mb-2" 中的 mb-2 為邊界設定，可見此 https://getbootstrap.com/docs/4.0/utilities/spacing/

htmlContent += `

<h6 class="card-title">${item.title}</h6>

</div>

Modal 的運用

官方文件：https://getbootstrap.com/docs/4.1/components/modal/

// aria-label 標籤：唯一可以添加可訪問幫助或說明文本的方式。 http://tinyurl.com/y6pyk6h6
// 在button中，會有 data-toggle="modal"，是用來告知瀏覽器要用哪種方式顯示
// 在button中，data-target="#show-movie-modal"是告知去哪裡取得 modal 的資料

 <button class="btn btn-primary btn-show-movie" data-toggle="modal" data-target="#show-movie-modal">More</button>

 <!-- Modal -->
  <div class="modal fade" id="show-movie-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="show-movie-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" id="show-movie-body">
          <div class="row" >
            <div class="col-sm-8" id="show-movie-image">
            </div> 
            <div class="col-sm-4">
              <p><em id="show-movie-date"></em></p>
              <p id="show-movie-description"></p>
            </div> 
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>