HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

ブートストラップ4枚のカード

❮ 前 次 ❯

カード

Bootstrap 4のカードは、コンテンツの周りにいくつかのパディングが付いた境界ボックスです。ヘッダー、フッター、コンテンツ、色などのオプションが含まれています。

画像

ジョン・ドウ

いくつかの例のテキストいくつかの例のテキスト。JohnDoeは建築家兼エンジニアです

プロファイルを参照してください

ベーシックカード

基本カードは.cardクラスで作成され、カード内のコンテンツには次の.card-bodyクラスがあります。

ベーシックカード

例

<div class="card">
  <div class="card-body">Basic card</div>
</div>

Bootstrap 3に精通している場合は、カードが古いパネル、ウェル、サムネイルに置き換わります。

ヘッダーとフッター

ヘッダ
コンテンツ
フッター

.card-headerクラスはカードに見出しを追加し、クラスはカード.card-footerにフッターを追加します。

例

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

コンテキストカード

カードの背景色を追加するには、コンテキストクラス（、、、、、、、、、、および.bg-primaryを使用します。 .bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark.bg-light

例

Basic card

Primary card

Success card

Info card

Warning card

Danger card

Secondary card

Dark card

Light card

タイトル、テキスト、リンク

カードタイトル

いくつかのサンプルテキスト。いくつかのサンプルテキスト。

カードリンク 別のリンク

.card-title見出し要素にカードタイトルを追加するために使用します。この.card-textクラスは、<p>要素が内部の最後の子（または唯一の子）である場合に、その下の余白を削除するために使用され.card-bodyます。この.card-linkクラスは、リンクに青色を追加し、ホバー効果を追加します。

例

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

カード画像

カード画像

ジョン・ドウ

いくつかの例のテキストいくつかの例のテキスト。JohnDoeは建築家兼エンジニアです

プロファイルを参照してください

ジェーン・ドウ

いくつかの例のテキストいくつかの例のテキスト。JaneDoeは建築家兼エンジニアです

プロファイルを参照してください
カード画像

.card-img-topまたは.card-img-bottomに追加し <img>て、画像をカードの上部または下部に配置します。.card-body幅全体にまたがるように、の外側に画像を追加したことに注意してください。

例

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

ストレッチリンク

カード内のリンクにクラスを追加する.stretched-linkと、カード全体がクリックおよびホバー可能になります（カードはリンクとして機能します）。

カード画像

ジョン・ドウ

いくつかの例のテキストいくつかの例のテキスト。JohnDoeは建築家兼エンジニアです

プロファイルを参照してください

ジェーン・ドウ

いくつかの例のテキストいくつかの例のテキスト。JaneDoeは建築家兼エンジニアです

プロファイルを参照してください
カード画像

例

<a href="#" class="btn btn-primary stretched-link">See Profile</a>

カード画像オーバーレイ

カード画像

ジョン・ドウ

いくつかの例のテキストいくつかの例のテキスト。いくつかの例のテキストいくつかの例のテキスト。いくつかの例のテキストいくつかの例のテキスト。いくつかの例のテキストいくつかの例のテキスト。

プロファイルを参照してください

画像をカードの背景に変換し、画像.card-img-overlay の上にテキストを追加するために使用します。

例

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

カードの列

最初のカード内のいくつかのテキスト

2枚目のカード内のテキスト

3枚目のカード内のテキスト

4枚目のカード内のテキスト

5枚目のカード内のテキスト

6枚目のカード内のテキスト

.card-columnsクラスは、石積みのようなカードのグリッド（ピンタレストのような）を作成します。カードを追加すると、レイアウトが自動的に調整されます。

注：カードは小さな画面（576px未満）に垂直に表示されます。

例

<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>

カードデッキ

最初のカード内のいくつかのテキスト

高さを上げるためのテキスト

高さを上げるためのテキスト

高さを上げるためのテキスト

2枚目のカード内のテキスト

3枚目のカード内のテキスト

4枚目のカード内のテキスト

クラスは、同じ高さと幅のカードの.card-deckグリッドを作成します。カードを追加すると、レイアウトが自動的に調整されます。

注：カードは小さな画面（576px未満）に垂直に表示されます。

例

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

カードグループ

最初のカード内のいくつかのテキスト

高さを上げるためのテキスト

高さを上げるためのテキスト

高さを上げるためのテキスト

2枚目のカード内のテキスト

3枚目のカード内のテキスト

4枚目のカード内のテキスト

.card-groupクラスはに似ています.card-deck。唯一の違いは、.card-groupクラスが各カード間の左右の余白を削除することです。

注：カードは、上下の余白を付けて、小さな画面（ 576px未満）に垂直に表示されます。

例

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

❮ 前 次 ❯