6-1 卡片

一、類別

1. 包裝：.card
2. 頭部：.card-header
3. 身體：.card-body
   .card-title
   .card-text
   .card-link
4. 腳部：.card-footer
5. 對齊：text-center、text-right

二、範例：http://bootstrap.hexschool.com/docs/4.0/components/card/

1. 正常

   <div class="card" style="width: 18rem;">
     <img class="card-img-top" src="..." alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
       <a href="#" class="btn btn-primary">Go somewhere</a>
     </div>
   </div>

   圖片在底部：

   <img class="card-img-bottom" src="img/slide01.jpg" alt="Card image cap">

   
    

2. 列表群組

   <div class="card" style="width: 18rem;">
     <ul class="list-group list-group-flush">
       <li class="list-group-item">Cras justo odio</li>
       <li class="list-group-item">Dapibus ac facilisis in</li>
       <li class="list-group-item">Vestibulum at eros</li>
     </ul>
   </div>

   <div class="card" style="width: 18rem;">
     <div class="card-header">
       Featured
     </div>
     <ul class="list-group list-group-flush">
       <li class="list-group-item">Cras justo odio</li>
       <li class="list-group-item">Dapibus ac facilisis in</li>
       <li class="list-group-item">Vestibulum at eros</li>
     </ul>
   </div>

    

3. 混合樣式

   <div class="card" style="width: 18rem;">
     <img class="card-img-top" src="..." alt="Card image cap">
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
     </div>
     <ul class="list-group list-group-flush">
       <li class="list-group-item">Cras justo odio</li>
       <li class="list-group-item">Dapibus ac facilisis in</li>
       <li class="list-group-item">Vestibulum at eros</li>
     </ul>
     <div class="card-body">
       <a href="#" class="card-link">Card link</a>
       <a href="#" class="card-link">Another link</a>
     </div>
   </div>

    

4. 圖像覆蓋

   <div class="card bg-dark text-white">
     <img class="card-img" src="..." alt="Card image">
     <div class="card-img-overlay">
       <h5 class="card-title">Card title</h5>
       <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       <p class="card-text">Last updated 3 mins ago</p>
     </div>
   </div>

    

5. 卡片群組

         <div class="card-group">
           <div class="card">
             <img class="card-img-top" src="..." alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Card title</h5>
               <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>
           <div class="card">
             <img class="card-img-top" src="..." alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Card title</h5>
               <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>
           <div class="card">
             <img class="card-img-top" src="..." alt="Card image cap">
             <div class="card-body">
               <h5 class="card-title">Card title</h5>
               <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
               <a href="#" class="btn btn-primary">Go somewhere</a>
             </div>
           </div>        
         </div>

   卡片群組裡面是等高的，如果有需要對齊則可利用「.card-footer」
   間隔：.card-group 改為 .card-deck

6. 瀑布流 .card-columns

   <div class="card-columns">
     <div class="card">
       <img class="card-img-top" src="..." alt="Card image cap">
       <div class="card-body">
         <h5 class="card-title">Card title that wraps to a new line</h5>
         <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
       </div>
     </div>
     <div class="card p-3">
       <blockquote class="blockquote mb-0 card-body">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
         <footer class="blockquote-footer">
           <small class="text-muted">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </small>
         </footer>
       </blockquote>
     </div>
     <div class="card">
       <img class="card-img-top" src="..." alt="Card image cap">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
         <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
       </div>
     </div>
     <div class="card bg-primary text-white text-center p-3">
       <blockquote class="blockquote mb-0">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
         <footer class="blockquote-footer">
           <small>
             Someone famous in <cite title="Source Title">Source Title</cite>
           </small>
         </footer>
       </blockquote>
     </div>
     <div class="card text-center">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
         <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
       </div>
     </div>
     <div class="card">
       <img class="card-img" src="..." alt="Card image">
     </div>
     <div class="card p-3 text-right">
       <blockquote class="blockquote mb-0">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
         <footer class="blockquote-footer">
           <small class="text-muted">
             Someone famous in <cite title="Source Title">Source Title</cite>
           </small>
         </footer>
       </blockquote>
     </div>
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
         <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
       </div>
     </div>
   </div>

    

7.