運用 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/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// 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> ` |
Modal 的運用
官方文件：https://getbootstrap.com/docs/4.1/components/modal/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
// 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">×</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> |
按讚加入粉絲團
