4.十、Bootstrap V4自學之路-----組件---卡片

時間 2019-11-12

標籤 bootstrap v4 自學之路組件卡片欄目 Bootstarp 简体版

原文原文鏈接

示例

卡片只要求少許的標記以及類，就能爲你提供儘量多的控件。這些類和標記很靈活，一般能夠輕鬆地從新混合和擴展。舉個例子，若是你的卡片沒有圖片之類的流內容，請盡情地在.card元素上添加.card-block類，來合併你的標記。css

<div class="card">
  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">cark的結構</h4>
    <p class="card-text">
        《div class=card》 <br>
        --| 《img class=card-img-top》<br>
        --| 《div class=card-block》<br>
        --| --| 《h4 class=card-title》<br>
        --| --| 《p class=card-text》<br>
        --| --| 《a class=btn btn-primary》
    </p>
    <a href="#" class="btn btn-primary">按鈕</a>
  </div>
</div>

PS：如今心裏感受不適應，稍微有點排斥。不過相信必定能度過的。card的樣式從看起來，感受仍是不錯的。
bootstrap

內容類型

卡片支持多種多樣的內容，包括圖片、文本、列組，連接，等等。混合並匹配多種內容類型以建立你想要的卡片。app

<div class="card">
  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">h4 class="card-title"</h4>
    <p class="card-text">p class="card-text"</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">ul class="list-group list-group-flush"</li>
    <li class="list-group-item">li class="list-group-item"</li>
    <li class="list-group-item">這裏是列表</li>
    <li class="list-group-item">《lu》《li》</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">《a》標籤的連接</a>
  </div>
</div>

只有圖文的：ide

<div class="card">
  <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
  <div class="card-block">
    <p class="card-text">
        《div class=card》 <br>
        --| 《img class=card-img-top》<br>
        --| 《div class=card-block》<br>
        --| --| 《p class=card-text》<br>
    </p>
  </div>
</div>

無圖的卡片：flex

<div class="card card-block">
  <h4 class="card-title">無圖的卡片結構</h4>
  <p class="card-text">
      《div class=card card-block》 <br>
        --| 《div class=card-title》<br>
        --| 《p class=card-text》<br>
        --| 《a class=card-link》<br>
        --| 《a class=card-link》<br>
  </p>
  <a href="#" class="card-link">Card link</a>
  <a href="#" class="card-link">Another link</a>
</div>

PS: .card-block包含全部卡片內正文內容。因此這裏把它提到最前面了。
ui

圖在卡片中間的：spa

<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
  </div>
  <img data-src="holder.js/100px180/?text=Image" alt="Card image">
  <div class="card-block">
    <p class="card-text">
        《div class=card》 <br>
        --| 《div class=card-block》<br>
        --| --| 《h4 class=card-title》<br>
        --| --| 《h6 class=card-subtitle text-muted》<br>
        --| 《img class=card-img-top》<br>
        --| 《div class=card-block》<br>
        --| --| 《a class=card-link》<br>
        --| --| 《a class=card-link》
    </p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

尺寸

卡片默認是塊級的。因此它們將橫向填滿空間。要想強制限制它們的寬度，能夠經過內聯樣式，或者預約義的網格類，或者使用網格mixins的自定義樣式。code

使用網格：component

<div class="row">
  <div class="col-sm-6">
    <div class="card card-block">
      <h3 class="card-title">Special title treatment</h3>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card card-block">
      <h3 class="card-title">Special title treatment</h3>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

使用自定義寬度：圖片

<div class="card card-block" style="width: 20rem;">
  <h3 class="card-title">Special title treatment</h3>
  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>

這裏要注意的是：在最外層 .card中加入寬度屬性。style="width:20rem;"強制使用寬度。

文本對齊

使用文本對齊類，你能夠快速改變任何卡片的文本的對齊方式——在它的內部所有或者局部區域

<div class="card card-block">
  <h4 class="card-title">Special title treatment</h4>
  <p class="card-text">最外層 div class="card card-block"</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>

<div class="card card-block text-xs-center">
  <h4 class="card-title">Special title treatment</h4>
  <p class="card-text">最外層 div class="card card-block text-center"</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>

<div class="card card-block text-xs-right">
  <h4 class="card-title">Special title treatment</h4>
  <p class="card-text">最外層 div class="card card-block text-right"</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>

卡片頭和卡片腳

能夠視狀況在一個卡片中添加卡片頭或者卡片腳

<blockquote> 定義長的引用。

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>
        《div class=card》 <br>
        --| 《div class=card-header》<br>
        --| 《div class=card-block》<br>
        --| --| 《blockquote class=card-blockquote》<br>
        --| --| --|《p》<br>
        --| --| --|《footer》<br>
        --| 《div class="card-footer text-muted"》
      </p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

圖片蓋子

和卡片頭卡片腳類似，卡片還包含了頂部和底部的圖片蓋子。

<div class="card">
  <img class="card-img-top" data-src="holder.js/100px180/" alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
        《div class=card》 <br>
        --| 《div class=card-img-top》<br>
        --| 《div class=card-block》<br>
        --| --| 《h4 class="card-title"》<br>
        --| --| 《p class="card-text"》<br>
        --| --| 《p class="card-text"》
    </p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
        《div class=card》 <br>
        --| 《div class=card-block》<br>
        --| --| 《h4 class="card-title"》<br>
        --| --| 《p class="card-text"》<br>
        --| --| 《p class="card-text"》<br>
        --| 《div class=card-img-top》
    </p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" data-src="holder.js/100px180/" alt="Card image cap">
</div>

圖片墊底

將一張圖片變成一個背景的背景並墊在卡片的文本底下。

根據這張圖片，你有可能須要用到.card-inverse這個類（以下所示）。

<div class="card card-inverse">
  <img class="card-img" data-src="holder.js/100px270?theme=sky" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">圖片墊底</h4>
    <p class="card-text">
        《div class=card card-inverse》 <br>
        --| 《img class=card-img》 <br>
        --| 《div class=card-img-overlay》<br>
        --| --| 《h4 class="card-title"》<br>
        --| --| 《p class="card-text"》<br>
        --| --| 《p class="card-text"》
    </p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

PS：這裏要注意我把背景色改爲了sky主題。由於自帶的背景色，和白色的文字顯示不明顯。

反色調的文本

卡片須要一個類以快速反轉文字色調。默認的，卡片使用深色的文本色，以及淺色的背景色。而.card-inverse讓文字成白色，能夠爲它指定background-color和border-color。

<div class="card card-inverse" style="background-color: #333; border-color: #333;">
  <div class="card-block">
    <h3 class="card-title">反色調的文本  .card-inverse</h3>
    <p class="card-text">
        《div class=card card-inverse style="background-color: #333; border-color: #333;"》 <br>
        --| 《div class="card-block"》 <br>
        --| 《div class=card-img-overlay》<br>
        --| --| 《h3 class="card-title"》<br>
        --| --| 《p class="card-text"》<br>
        --| --| 《a class="btn btn-primary"》
    </p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

背景變量

卡片包含了它們本身的變量類，以快速改變卡片的background-color和border。深色的卡片須要使用.card-inverse類。

<div class="card card-inverse card-primary">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>
        《div class="card card-inverse card-primary"》 <br>
        --| 《div class="card-block"》 <br>
        --| --| 《blockquote class="card-blockquote"》<br>
        --| --| 《p》<br>
        --| --| 《footer》
      </p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-success">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>
        《div class="card card-inverse card-success"》 <br>
        --| 《div class="card-block"》 <br>
        --| --| 《blockquote class="card-blockquote"》<br>
        --| --| 《p》<br>
        --| --| 《footer》
      </p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-info">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>
        《div class="card card-inverse card-info"》 <br>
        --| 《div class="card-block"》 <br>
        --| --| 《blockquote class="card-blockquote"》<br>
        --| --| 《p》<br>
        --| --| 《footer》
      </p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-warning">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>
        《div class="card card-inverse card-warning"》 <br>
        --| 《div class="card-block"》 <br>
        --| --| 《blockquote class="card-blockquote"》<br>
        --| --| 《p》<br>
        --| --| 《footer》
      </p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card-inverse card-danger">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>
        《div class="card card-inverse card-danger"》 <br>
        --| 《div class="card-block"》 <br>
        --| --| 《blockquote class="card-blockquote"》<br>
        --| --| 《p》<br>
        --| --| 《footer》
      </p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

PS：這裏注意的是：<div class="card card-inverse card-danger text-xs-center">

一、最外層的 .text-xs-center說明能夠定位。由於顯示變形，我刪掉了。

二、最外層的 .card-danger 說明能夠給標籤上顏色。card-success等均可以使用。

卡片組

使用卡片組渲染卡片，把卡片變成單一的、具備相同寬度和高度的、互相緊挨着的列元素。默認的，卡片組使用display: table 以及table-layout:fixed以實現它們一致的尺寸。然而。若是啓用了彈性盒模式，將改而使用display: flex，並提供一樣的效果。

<div class="card-group">
    
  <div class="card">
    <img class="card-img-top" data-src="holder.js/100px180?theme=sky" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">最外層有card-group包裹着這3個card</h4>
      <p class="card-text">
        《div class="card-group"》 <br>
        --| 《div class="card"》 <br>
        --| --| 《img class="card-img-top"》 <br>
        --| --| 《blockquote class="card-blockquote"》<br>
        --| --| --| 《h4 class="card-title"》<br>
        --| --| --| 《p class="card-text"》<br>
        --| --| --| 《p class="card-text"》
      </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-top" data-src="holder.js/100px180?theme=vine" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">被包含的card</h4>
      <p class="card-text">
        《div class="card"》 <br>
        --| 《img class="card-img-top"》 <br>
        --| 《blockquote class="card-blockquote"》<br>
        --| --| 《h4 class="card-title"》<br>
        --| --| 《p class="card-text"》<br>
        --| --| 《p class="card-text"》
      </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-top" data-src="holder.js/100px180?theme=lava" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">被包含的card</h4>
      <p class="card-text">
        《div class="card"》 <br>
        --| 《img class="card-img-top"》 <br>
        --| 《blockquote class="card-blockquote"》<br>
        --| --| 《h4 class="card-title"》<br>
        --| --| 《p class="card-text"》<br>
        --| --| 《p class="card-text"》
      </p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
    
</div>

平排

須要一些統一寬度和高度的卡片組，可是不要它們一個緊挨着另外一個？使用卡片平排。默認地，卡片平排鬚要兩個包裹元素：.card-deck-wrapper以及.card-deck。咱們使用表格樣式對.card-deck設定尺寸和縫隙。該.card-deck-wrapper用來負抵消.card-deck的border-spacing。

編輯建議：若是你啓用了彈性盒模式，你能夠移除.card-deck-wrapper。

<div class="card-deck-wrapper">
  <div class="card-deck">

    <div class="card">
      <img class="card-img-top" data-src="holder.js/100px200/" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">平排最外層</h4>
        <p class="card-text">
            《div class="card-deck-wrapper"》 <br>
            --| 《div class="card-deck"》 <br>
            --| --| 《div class="card"》<br>
            --| --| --| 《...》<br>
            --| --| 《div class="card"》<br>
            --| --| --| 《...》<br>
            --| --| 《div class="card"》<br>
            --| --| --| 《...》
        </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-top" data-src="holder.js/100px200/" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">平排裏面的每一個 .card</h4>
        <p class="card-text">
            《div class="card"》 <br>
            --| 《img class="card-img-top"》 <br>
            --| 《div class="card-block"》<br>
            --| --| 《h4 class="card-title"》<br>
            --| --| 《p class="card-text"》<br>
            --| --| 《p class="card-text"》
        </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-top" data-src="holder.js/100px200/" alt="Card image cap">
      <div class="card-block">
        <h4 class="card-title">平排裏面的每一個 .card</h4>
        <p class="card-text">
            《div class="card"》 <br>
            --| 《img class="card-img-top"》 <br>
            --| 《div class="card-block"》<br>
            --| --| 《h4 class="card-title"》<br>
            --| --| 《p class="card-text"》<br>
            --| --| 《p class="card-text"》<br><br><br>
        </p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>

  </div>
</div>

多列

卡片能夠被組織成Masonry——就像多列，只須要用CSS把它們包裹在.card-columns中。

注意！這個不能在IE9及如下版本中使用，由於它們不支持CSS屬性column。

代碼就給僞代碼吧，太長太亂了。

<div class="card-columns">
    <div class="card"> ... </div>
    <div class="card card-block"> ... </div>
    <div class="card card-inverse card-primary text-center"> ... </div>
    <div class="card"> ... </div>
    <div class="card card card-block text-center"> ... </div>
</div>

默認的這個只有3列顯示。

問題這麼修改呢？

進入bootstrap.css中。

一、修改源碼。

二、從新仿寫一個.card-column 類