編集 Github

カード

ブートストラップのカードは、複数のバリエーションとオプションを備えた柔軟で拡張可能なコンテンツコンテナを提供します。

We think cards are one of the best ways to organise your information. We went all out with possibilities and we recommended finding the right fit for your product. The general class for a card is called .card. The information inside the card usually goes inside the content (class .card-body). The content can have three types of elements inside: .card-title and .category. You can optionally add a .card-footer, if you want to place a call-to-action. You can change the color of the header using the card-header-*color attribute like this: card-header-primary | info | success | warning | danger | rose.”

白い背景の上でカードを使いたいのなら、 .card-plainクラスを使ってカードの影を消すことができます。

カードヘッダータイプ

The header of the cards start with the plain .card-header, then you can add other types of headers based on what you want to show like: .card-header-icon or .card-header-text.

通常のヘッダー

カテゴリの副題

場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。

フルヘッダー色

カテゴリの副題

場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
language

これがアイコンです

場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。

Here is the Text

場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。 
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">通常のヘッダー</h4>
        <p class="category">カテゴリの副題</p>
      </div>
      <div class="card-body">
      場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
        <div class="card-header card-header-danger">
            <h4 class="card-title">フルヘッダー色</h4>
            <p class="category">カテゴリの副題</p>
        </div>
        <div class="card-body">
      場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
        </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
      <div class="card">
          <div class="card-header card-header-icon card-header-rose">
            <div class="card-icon">
              <i class="material-icons">language</i>
            </div>
          </div>
          <div class="card-body">
              <h4 class="card-title">これがアイコンです</h4>
             場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
          </div>
      </div>
  </div>

  <div class="col-md-6">
      <div class="card">
          <div class="card-header card-header-text card-header-primary">
            <div class="card-text">
              <h4 class="card-title">Here is the Text</h4>
            </div>
          </div>
          <div class="card-body">
      場所は、バルセロネータビーチとバス停から徒歩でわずか2分、バルセロナのメインナイトライフを楽しめる「ナヴィーリオ」の近くです。
          </div>
      </div>
  </div>
</div>

アニメーション付きカード - プロ 成分

We’ve created some special cards that can have actions under the header, you can activate those cards but adding the property data-header-animation="true". Info: After 20x hovers of one of these cards you can break it:-)

中断効果を止めるには、 assets / js / material-dashboard.jsに行き、変数 breakCards = trueを見つけてそれを falseに設定します。

Website Views

前回のキャンペーンの掲載結果

access_time送信済みをコンパイン 2 日々日々 
<div class="row">
      <div class="col-md-6 ml-auto mr-auto">
        <div class="card card-chart">
          <div class="card-header card-header-rose" data-header-animation="true">
              <div class="ct-chart" id="websiteViewsChart"></div>
          </div>
          <div class="card-body">
              <div class="card-actions">
                  <button type="button" class="btn btn-danger btn-link fix-broken-card">
                    <i class="material-icons">build</i>ヘッダーを修正!
                  </button>

                  <button type="button" class="btn btn-info btn-link" rel="tooltip" data-placement="bottom" title="Refresh">
                    <i class="material-icons">refresh</i>
                  </button>
                  <button type="button" class="btn btn-default btn-link" rel="tooltip" data-placement="bottom" title="Change Date">
                    <i class="material-icons">edit</i>
                  </button>
              </div>
              <h4 class="card-title">Website Views</h4>
              <p class="card-category">前回のキャンペーンの掲載結果</p>
          </div>
          <div class="card-footer">
            <div class="stats">
                <i class="material-icons">access_time</i>送信済みをコンパイン 2 日々日々
            </div>
          </div>
      </div>
    </div>
  </div>

カード表

デイリーセールス

55% 今日の売上高の増加。

access_time更新しました 4 数分前

完了したタスク

前回のキャンペーンの掲載結果

access_time 更新しました 2 数分前 
<div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header card-chart card-header-warning">
          <div class="ct-chart" id="dailySalesChart"></div>
        </div>
        <div class="card-body">
          <h4 class="card-title">デイリーセールス</h4>
          <p class="card-category"><span class="text-success"><i class="fa fa-long-arrow-up"></i> 55%  </span>今日の売上高の増加。</p>
        </div>
        <div class="card-footer">
          <div class="stats">
            <i class="material-icons">access_time</i>更新しました 4 数分前
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
    <div class="card">
      <div class="card-header card-chart card-header-success">
        <div class="ct-chart" id="completedTasksChart"></div>
      </div>
      <div class="card-body">
        <h4 class="card-title">完了したタスク</h4>
        <p class="card-category">前回のキャンペーンの掲載結果</p>
      </div>
      <div class="card-footer">
        <div class="stats">
          <i class="material-icons">access_time</i>
  更新しました 2 数分前
        </div>
      </div>
    </div>
    </div>
  </div>

// INFO: #dailySalesChart is initialised inside assets/js/material-dashboard.js on method initDocumentationCharts()

コンテンツタイプ

カードは、画像、テキスト、リストグループ、リンクなど、さまざまなコンテンツをサポートしています。以下はサポートされているものの例です。

体

カードの構成要素は .card-bodyです。あなたがカードの中にパッドを入れられたセクションを必要とするときはいつでもそれを使ってください。

カード本体内のこのテキスト 
<div class="card">
  <div class="card-body">
     カード本体内のこのテキスト
  </div>
</div>

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

カードタイトルは .card-titleを <h *> タグに追加することによって使われます。同様に、 <a>タグに .card-linkを追加することでリンクが追加されて隣同士に配置されます。

字幕は .card-subtitleを <h *> タグに追加することによって使われます。 .card-titleと .card-subtitleアイテムが .card-bodyアイテムに配置されている場合、カードのタイトルと字幕はうまく整列されます。

カードのタイトル

カード字幕

カードのタイトルを基にしてカードのコンテンツの大部分を構成する簡単なテキスト例

カードリンク もう1つのカードをリンク 
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">カードのタイトル</h4>
    <h6 class="card-subtitle mb-2 text-muted">カード字幕</h6>
    <p class="card-text">カードのタイトルを基にしてカードのコンテンツの大部分を構成する簡単なテキスト例</p>
    <a href="#0" class="card-link">カードリンク</a>
    <a href="#0" class="card-link">もう1つのカードをリンク</a>
  </div>
</div>

画像

`.card-img-topは画像をカードの一番上に配置します。 .card-textを使うと、テキストをカードに追加することができます。 .card-text`内のテキストも標準のHTMLタグでスタイルすることができます。

Card image cap

カードのタイトルを基にしてカードのコンテンツの大部分を構成する簡単なテキスト例

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">カードのタイトルを基にしてカードのコンテンツの大部分を構成する簡単なテキスト例</p>
  </div>
</div>

リストグループ

フラッシュリストグループを使用して、カードにコンテンツのリストを作成します。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 20rem;">
  <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>
おすすめ
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card card-nav-tabs" style="width: 20rem;">
  <div class="card-header card-header-danger">
おすすめ</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>

ヘッダーフッター

カード内にオプションのヘッダーやフッターを追加します。

おすすめ

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く 
<div class="card card-nav-tabs">
  <div class="card-header card-header-warning">
  おすすめ
  </div>
  <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
</div>

Card headers can be styled by adding .card-header to <h*> elements.

おすすめ

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く 
<div class="card card-nav-tabs">
  <h4 class="card-header card-header-info">おすすめ</h4>
  <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
</div>
見積もり

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<div class="card card-nav-tabs">
  <div class="card-header card-header-success">
見積もり
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
おすすめ

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く
2 日々日々 
<div class="card card-nav-tabs text-center">
  <div class="card-header card-header-primary">
  おすすめ
  </div>
  <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
  <div class="card-footer text-muted">
    2 日々日々
  </div>
</div>

テキストの配置

[text align classes]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / text /＃textを使用すると、カードのテキストの配置を全体的にまたは特定の部分ですばやく変更できます。 - アライメント）。

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く 
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
</div>

<div class="card text-center" style="width: 20rem;">
 <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
</div>

<div class="card text-right" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
</div>

ナビゲーション

Bootstrapの[nav components]（{{site.baseurl}} / docs / {{site.docs_version}} / components / navs /）を使って、カードのヘッダー（またはブロック）にナビゲーションを追加します。

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く 
<div class="card text-center">
  <div class="card-header card-header-rose">
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#0">アクティブ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#0">リンク</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#0">無効</a>
      </li>
    </ul>
  </div>
   <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
</div>

特別タイトル扱い

追加コンテンツへの自然な導入として、下記のSupporting text

どこかへ行く 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#0">アクティブ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#0">リンク</a>
      </li>
      <li class="nav-item">
            <a class="nav-link disabled" href="#0">無効</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">特別タイトル扱い</h4>
    <p class="card-text">追加コンテンツへの自然な導入として、下記のSupporting text</p>
    <a href="#0" class="btn btn-primary">どこかへ行く</a>
  </div>
</div>

画像

カードには、画像を扱うためのいくつかのオプションがあります。 カードの両端に「イメージキャップ」を追加するか、カードの内容を画像に重ねるか、単に画像をカードに埋め込むかを選択します。

イメージキャップ

ヘッダーやフッターと同様に、カードには上部と下部の「イメージキャップ」（カードの上部または下部の画像）を含めることができます。

Card image cap

カードのタイトル

これは、追加のコンテンツへの自然な引き込みとして、以下のテキストをサポートする幅の広いカードです。このコンテンツはもう少し長くなっています。

最終 更新しました 3 数分前

カードのタイトル

これは、追加のコンテンツへの自然な引き込みとして、以下のテキストをサポートする幅の広いカードです。このコンテンツはもう少し長くなっています。

最終 更新しました 3 数分前

Card image cap 
<div class="card mb-3">
  <img class="card-img-top" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">カードのタイトル</h4>
    <p class="card-text">これは、追加のコンテンツへの自然な引き込みとして、以下のテキストをサポートする幅の広いカードです。このコンテンツはもう少し長くなっています。</p>
    <p class="card-text"><small class="text-muted">最終 更新しました 3 数分前</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h4 class="card-title">カードのタイトル</h4>
    <p class="card-text">これは、追加のコンテンツへの自然な引き込みとして、以下のテキストをサポートする幅の広いカードです。このコンテンツはもう少し長くなっています。</p>
    <p class="card-text"><small class="text-muted">最終 更新しました 3 数分前</small></p>
  </div>
  <img class="card-img-bottom" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image cap">
</div>

画像オーバーレイ

画像をカードの背景に変えて、カードのテキストを重ねます。 画像によっては、追加のスタイルやユーティリティが必要な場合もあれば、必要ない場合もあります。

Card image

カードのタイトル

これは、追加のコンテンツへの自然な引き込みとして、以下のテキストをサポートする幅の広いカードです。このコンテンツはもう少し長くなっています。

最終 更新しました 3 数分前

<div class="card bg-dark text-white">
  <img class="card-img" src="https://images.unsplash.com/photo-1517303650219-83c8b1788c4c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=bd4c162d27ea317ff8c67255e955e3c8&auto=format&fit=crop&w=2691&q=80" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">カードのタイトル</h4>
    <p class="card-text">これは、追加のコンテンツへの自然な引き込みとして、以下のテキストをサポートする幅の広いカードです。このコンテンツはもう少し長くなっています。</p>
    <p class="card-text">最終 更新しました 3 数分前</p>
  </div>
</div>

例

ブログカード - プロ成分

この夏は素晴らしいでしょう
ファッション

私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは... 

<div class="card card-blog">
    <div class="card-header card-header-image">
        <a href="#pablo">
            <img class="img" src="https://images.unsplash.com/photo-1511439817358-bee8e21790b5?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
            <div class="card-title">
      この夏は素晴らしいでしょう
            </div>
        </a>
    </div>
    <div class="card-body">
        <h6 class="card-category text-info">ファッション</h6>
        <p class="card-description">
 私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
        </p>
    </div>
</div>
Twitter

"あなたは素晴らしいビジネスと人生を築くために喜びを犠牲にする必要はありません。"

... Tania Andrew
favorite 2.4K · share 45 
<div class="card bg-info">
    <div class="card-body">
        <h5 class="card-category card-category-social">
            <i class="fa fa-twitter"></i> Twitter
        </h5>
        <h4 class="card-title">
            <a href="#pablo"> "あなたは素晴らしいビジネスと人生を築くために喜びを犠牲にする必要はありません。"</a>
        </h4>

        <div class="card-stats">
            <div class="author">
                <a href="#pablo">
                   <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="..." class="avatar img-raised">
                   <span>Tania Andrew</span>
                </a>
            </div>
           <div class="stats ml-auto">
                <i class="material-icons">favorite</i> 2.4K &#xB7;
                <i class="material-icons">share</i> 45
            </div>
        </div>
    </div>
</div>
trending_upトレンド

あなたのビジネスを成長させるためにあなたの従業員に焦点を合わせ始める

... Lord Alex
favorite 342 · chat_bubble 45 
<div class="card">
  <div class="card-body ">
        <h6 class="card-category text-danger">
            <i class="material-icons">trending_up</i>トレンド
        </h6>
        <h4 class="card-title">
            <a href="#pablo">あなたのビジネスを成長させるためにあなたの従業員に焦点を合わせ始める</a>
        </h4>

    </div>
    <div class="card-footer ">
            <div class="author">
                <a href="#pablo">
                   <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="..." class="avatar img-raised">
                   <span>Lord Alex</span>
                </a>
            </div>
           <div class="stats ml-auto">
                <i class="material-icons">favorite</i> 342 &#xB7;
                <i class="material-icons">chat_bubble</i> 45
            </div>
        </div>
      </div>

プロフィールカード - プロ成分

Alec Thompson

CEO / Co-Founder
<div class="card card-profile ml-auto mr-auto" style="max-width: 360px">
  <div class="card-header card-header-image">
        <a href="#pablo">
            <img class="img" src="https://images.unsplash.com/photo-1492447273231-0f8fecec1e3a?auto=format&fit=crop&w=334&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        </a>
    </div>

    <div class="card-body ">
        <h4 class="card-title">Alec Thompson</h4>
        <h6 class="card-category text-gray">CEO / Co-Founder</h6>
    </div>
    <div class="card-footer justify-content-center">
        <a href="#pablo" class="btn btn-just-icon btn-twitter btn-round">
            <i class="fa fa-twitter"></i>
        </a>
        <a href="#pablo" class="btn btn-just-icon btn-facebook btn-round">
            <i class="fa fa-facebook-square"></i>
        </a>
        <a href="#pablo" class="btn btn-just-icon btn-google btn-round">
            <i class="fa fa-google"></i>
        </a>
    </div>
</div>

フルバックグラウンドカード - プロ成分

市販の生産性向上アプリ

最高の生産性アプリ

私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...

subject記事を読む watch_later後で見る 
<div class="card card-background" style="background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D')">
  <div class="card-body">
    <h6 class="card-category text-info">市販の生産性向上アプリ</h6>
    <a href="#pablo">
           <h3 class="card-title">最高の生産性アプリ</h3>
      </a>
      <p class="card-description">
   私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
      </p>
    <a href="#pablo" class="btn btn-white btn-link">
      <i class="material-icons">subject</i>記事を読む
    </a>
    <a href="#pablo" class="btn btn-white btn-link">
      <i class="material-icons">watch_later</i>後で見る
    </a>
  </div>
</div>

価格カード - プロ成分

business

$69

あなたの会社の規模が11人から99人の間であれば、これは良いことです。

プランを選択 
<div class="row">
  <div class="col-md-4 ml-auto mr-auto">
    <div class="card card-pricing bg-primary"><div class="card-body ">
        <div class="card-icon">
            <i class="material-icons text-white">business</i>
        </div>
        <h3 class="card-title">$69</h3>
        <p class="card-description">
   あなたの会社の規模が11人から99人の間であれば、これは良いことです。
        </p>
        <a href="#pablo" class="btn btn-white btn-round">プランを選択</a>
        </div>
    </div>
  </div>
</div>

回転カード - プロ成分

フルバックグラウンドカード

この背景カードはホバー時に回転します

私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...

投稿を管理

管理者として、投稿を編集、表示、削除するためのショートカットがあります。

subject mode_edit delete 
<div class="row">
  <div class="col-md-6 ml-auto mr-auto">
    <div class="rotating-card-container">
        <div class="card card-rotate card-background">
            <div class="front front-background" style="background-image:url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
                <div class="card-body">
                    <h6 class="card-category">フルバックグラウンドカード</h6>
                    <a href="#pablo">
                        <h3 class="card-title">この背景カードはホバー時に回転します</h3>
                    </a>
                    <p class="card-description">
               私たちは真実に人間の基盤を再起動する必要があるので、真実を怖がってはいけないそして、私はカニエを愛してカニエを愛して私はリックオーウェンズのベッドデザインを愛するが、後ろは...
                    </p>
                </div>
            </div>

            <div class="back back-background" style="background-image: url('https://images.unsplash.com/photo-1493787039806-2edcbe808750?auto=format&fit=crop&w=750&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');">
                <div class="card-body">
                    <h5 class="card-title">
               投稿を管理
                    </h5>
                    <p class="card-description">管理者として、投稿を編集、表示、削除するためのショートカットがあります。</p>
                    <div class="footer justify-content-center">
                        <a href="#pablo" class="btn btn-info btn-just-icon btn-fill btn-round">
                            <i class="material-icons">subject</i>
                        </a>
                        <a href="#pablo" class="btn btn-success btn-just-icon btn-fill btn-round btn-wd">
                            <i class="material-icons">mode_edit</i>
                        </a>
                        <a href="#pablo" class="btn btn-danger btn-just-icon btn-fill btn-round">
                            <i class="material-icons">delete</i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>