検索

ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrap で Card コンポーネントを使用する方法の詳細な説明

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

青灯夜游
青灯夜游転載
2021-12-01 19:47:159214ブラウズ

Bootstrap で Card コンポーネントを使用するにはどうすればよいですか?次の記事では、コード例を使用して Bootstrap5 Card カード コンポーネントの使用方法を説明します。

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

1 ブートストラップ カードの概要

ブートストラップ カードは、複数のバリエーションとオプションを備えた柔軟でスケーラブルなコンテンツ コンテナを提供します。カードは、マークアップとスタイルをできるだけ少なくするように設計されているため、簡単に位置合わせして他の Bootstrap コンポーネントとうまく調和させることができます。デフォルトではマージンがないため、必要に応じてスペースの一般カテゴリを追加できます。 [関連する推奨事項: "bootstrap チュートリアル "]

以下は、コンテンツが混在し、幅が固定された基本的なカードの例です。幅が固定されていないカードは、自然に親要素の幅全体を埋めます。これは、さまざまなスケーリング オプションを使用して簡単に調整できます。以下に簡単な例を示します。 

<div class="card" style="width: 18rem;">
            <img src="../pic/5.jpg" class="card-img-top" alt="卡片的图片宽度会自动设置">
            <div class="card-body">
            <h5 class="card-title">卡片标题</h5>
            <p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素</p>
            <a href="#" class="btn btn-primary">这是一个按钮</a>
            </div>
</div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

2 カード構造

2.1 完全なカード構造の例

通常の状況では、完全なカード構造は必要ありません。カード コンポーネントを使用することをお勧めします。上の例に示すように、完全なカードには、ヘッダー、フッター、画像 (ここでは、カードと同じ幅のヘッダーの下の画像を指します)、本文、およびリスト グループ。本文にはタイトルとテキストを含めることができます。 以下は包括的な例です。実際、通常の状況では、必要に応じてカードの 1 つまたは 2 つの要素を使用するだけで十分です。次の例は単なるデモンストレーションです。後で機能の各部分を 1 つずつ説明します。 

 <div class="card" style="width: 18rem;">
        <div class="card-header">
           卡片页眉
        </div>
        <img src="../pic/5.jpg" class="card-img-top" alt="卡片的图片宽度会自动设置">
        <div class="card-body">
        <h5 class="card-title">卡片标题</h5>
        <p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素
          <img src="../pic/7.jpg" class="card-img-top" alt="卡片主体内的图片">
        </p>
        <a href="#" class="btn btn-primary">这是一个按钮</a>
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">列表元素</li>
          <li class="list-group-item">列表元素</li>
          <li class="list-group-item">列表元素</li>
        </ul>
        <div class="card-footer text-muted">
            卡片页脚
        </div>
    </div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

2.1 カードのヘッダーとフッター

他のコンテンツ、ヘッダーとフッターと比較して、ヘッダーとフッターは必要ありません。テキストの色が薄く、フォントが少し小さくなります。さらに、一般的なクラスを通じてその配置を調整することができ、柔軟な使用により多くの特殊効果を実現できます。

2.1.1 シンプルなカード

<div class="card">
        <h5 class="card-header">通知</h5>
        <div class="card-body">
        <h5 class="card-title">中秋节放假通知</h5>
        <p class="card-text">下周中秋节放假7天，给大家乐活以下.........</p>
        <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

2.1.2 有名な引用には引用符を使用

      <div class="card">
        <div class="card-header">
        名言
        </div>
        <div class="card-body">
        <blockquote class="blockquote mb-0">
        <p>只有诗人同圣徒才会坚信，在沥青路面上辛勤浇水会培植出百合花来。</p>
        <footer class="blockquote-footer">威廉· 萨默赛特·毛姆的 <cite title="Source Title">《月亮和六便士》</cite></footer>
        </blockquote>
        </div>
        </div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

2.1.3 ヘッダーとフッターを一緒に使用する

      <div class="card text-center">
        <div class="card-header">
        名著推荐
        </div>
        <div class="card-body">
        <h5 class="card-title">《红楼梦》</h5>
        <p class="card-text">
            《红楼梦》是一部具有世界影响力的人情小说作品，举世公认的中国古典小说巅峰之作，
        中国封建社会的百科全书，传统文化的集大成者。小说以贾、史、王、薛四大家族的兴衰为背景，
        以贾府的家庭琐事、闺阁闲情为脉络，以贾宝玉、林黛玉、薛宝钗的爱情婚姻故事为主线，
        刻画了以贾宝玉和金陵十二钗为中心的正邪两赋有情人的人性美和悲剧美。
        通过家族悲剧、女儿悲剧及主人公的人生悲剧，揭示出封建末世危机。
    </p>
        <a href="#" class="btn btn-primary">马上阅读</a>
        </div>
        <div class="card-footer text-muted">
        2 days ago
        </div>
        </div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

#2.2 画像の使用

##2.2.1 画像を上部または下部に配置

画像は、クラスcard-img-topまたはcard-img-bottomによってカードの上部または下部に表示されるように設定されています。以下は2枚のカードで、上部に1枚の画像、下部に1枚の画像があります。 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card mb-2">
        <img src="../pic/5.jpg" alt="...">
        <div>
        <h5>软发布 Win11 </h5>
        <p>T
          微软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        </div>
        
        <div>
        <div>
        <h5>飞利浦推出4K显示器</h5>
        <p>飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        <img src="../pic/7.jpg" alt="...">
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

2.2.Bootstrap で Card コンポーネントを使用する方法の詳細な説明2.2.2 カードの背景としての画像

画像をカードの背景に変換し、カードのテキストをオーバーレイします。画像に応じて、追加のスタイルが必要か一般的なカテゴリが必要かを選択できます。 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card card bg-dark text-white">
        <img src="../pic/7.jpg" alt="...">
        <div class="card-body card-img-overlay">
        <h5>微软发布 Win11 </h5>
        <p>
          微软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <p><small>Last updated 3 mins ago</small></p>
        </div>
        </div>
        

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

bg-dark を使用してカードに黒の背景を追加し、text-white でフォントを白に設定し、card-body の背景色として Card-img-overlay を設定したことに注意してください。上記のように、card-body を使用せずに、card-img-overlay を直接使用することもできます。

2.2.Bootstrap で Card コンポーネントを使用する方法の詳細な説明2.2.3 左側の画像

グリッドと一般的なものを使用します。カードを応答性の高い方法で水平方向にレンダリングできるようにするクラスです。以下の例では、g-0 を使用してグリッドのギャップを削除し、

col-md-*

クラスを使用してカードを表示します。水平方向。md ブレークポイントの後に水平方向にレンダリングします。カードの内容によっては、追加の調整が必要になる場合があります。<pre class="brush:html;toolbar:false;">&lt;div class=&quot;card mb-3&quot; style=&quot;max-width: 540px;&quot;&gt; &lt;div class=&quot;row g-0&quot;&gt; &lt;div class=&quot;col-md-4&quot;&gt; &lt;img src=&quot;../pic/3.jpg&quot; alt=&quot;...&quot; class=&quot;w-100&quot;&gt; &lt;/div&gt; &lt;div class=&quot;col-md-8&quot;&gt; &lt;div class=&quot;card-body&quot;&gt; &lt;h5 class=&quot;card-title&quot;&gt;春夏秋冬皆自然&lt;/h5&gt; &lt;p class=&quot;card-text&quot;&gt; 春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简... &lt;/p&gt; &lt;p class=&quot;card-text&quot;&gt;&lt;small class=&quot;text-muted&quot;&gt;Last updated 3 mins ago&lt;/small&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;</pre>

3.2.Bootstrap で Card コンポーネントを使用する方法の詳細な説明 もちろん、画像の幅を設定した方がよいでしょう。

2.3 カードの本文

2.3.1 タイトルとサブタイトル

カードの構成要素は .card-body です。これを使用してください。カードにパディングが必要な場合は、それを使用します。
  • 在<h></h>标签中添加card-title以使用卡片标题。
  • 在<h></h>标签中加入card-subtitle以使用副标题。

如果card-title以及card-subtitle元件被放在card-body里面，它们将会对齐良好。

2.3.2 文本内容和链接

文本内容可以放置任何html元素和bootstrap的组件，如按钮等，在a标签中加入card-link并使连接彼此相邻。

      <div class="card" style="width: 18rem;">
        <div class="card-body">
        <h5 class="card-title">微软发布 Win11</h5>
        <h6 class="card-subtitle mb-2 text-muted">科技动态</h6>
        <p class="card-text">
          微软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
        </p>
        <a href="#" class="card-link">了解详情</a>
        <a href="#" class="card-link">下载试用</a>
        </div>
        </div>

2.2.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

2.4 列表群組

列表群组使用非常简单

<div class="card" style="width: 18rem;">
        <div class="card-header text-center">
        晚会活动
        </div>
        <ul class="list-group list-group-flush">
        <li class="list-group-item">歌舞</li>
        <li class="list-group-item">男生独唱</li>
        <li class="list-group-item">小品</li>
        </ul>
        </div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

2.5 混合样式

混合并搭配多个内容形式，用来创建你所需要的卡片。以下示例将图片样式、块、文字样式以及列表群组全部包装在一个固定宽度的卡片中。

<div class="card" style="width: 18rem;">
<img src="../pic/cap.jpg" class="card-img-top" alt="...">
<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&#39;s content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

3 卡片的排版及宽度

卡片预设没有特定的起始width，除非另有声明，否则它们的宽度将是100%。

3.1 使用网格

使用网格，根据需要在列和行中包装卡片。需要注意的是卡片默认是每个卡片一行的，要想一行中显示多个卡片，必须把几个卡片放在一个div容器中且每行中的卡片总宽度不能超过屏幕宽度。网格中的row-cols-*同样适用卡片。另外卡片默认是宽度相同，高度根据内容自动调整的，但是如果卡片拥有页脚，则高度会自动调整到相同。 下面给出一个完整例子。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div>
        <div>
        <div>
        <div>
          <h5>微软发布 Win11</h5>
          <p>
            软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>

        <div>
        <div>
        <div>
          <h5>飞利浦推出4K显示器</h5>
          <p>
            飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

3.2 使用通用类

使用可调整宽度大小的通用类来快速设置卡片的宽度。

使用网格 

使用网格，根据需要在列和行中包装卡片。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card w-75">
        <div>
            <h5>微软发布 Win11</h5>
            <p>
              软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        
        <div class="card w-50">
        <div>
            <h5>飞利浦推出4K显示器</h5>
            <p>
              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

需要注意的是，这里的宽度值必须是预定的，预设包含25%，50%，75%，100%和auto，而不是随意写的。 详情见 Bootstrap5中文手册 通用类 尺寸（Sizing）一节。

3.3 使用自定义CSS

在样式表中使用自定义的CSS或使用行内样式设置宽度，这种方式比较灵活，可以使用rem、px、百分比。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div style="width: 30rem;">
        <div>
            <h5>微软发布 Win11</h5>
            <p>
              软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        
        <div style="width: 20rem;">
        <div>
            <h5>飞利浦推出4K显示器</h5>
            <p>
              飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万 
            </p>
            <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
       

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

3.4 卡片中的文本对齐

可以透过文字对齐类别更改任何卡片的整体或特定部分的文本对齐方式。默认全部是局左（text-start）对齐的，可以用card-text、text-end通用类使之居中对齐或居右对齐。通用类可用在card容器，也可以单独以用在标题、页眉页脚、主体等任意部分，如果同时使用，则单独的覆盖整体的。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div>
        <div>
        <div class="card text-center">
        <div>
                整体居中
        </div>    
        <div>
          <h5>微软发布 Win11</h5>
          <p>
            软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
          </p>
          <a href="#" class="btn btn-primary">了解详情</a>
        </div>
        </div>
        </div>

        <div>
            <div>
            <div class="card-header text-center"">
                    页眉、标题居中
            </div>    
            <div>
              <h5 class="card-title  text-center">微软发布 Win11</h5>
              <p>
                软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
              </p>
              <a href="#" class="btn btn-primary">了解详情</a>
            </div>
            </div>
            </div>
            
            <div>
                <div class="card text-center">
                <div>
                        整体居中中标题居左
                </div>    
                <div>
                  <h5 class="card-title text-start">微软发布 Win11</h5>
                  <p>
                    软已宣布将于 6 月 24 日举行“What&#39;s next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
                  </p>
                  <a href="#" class="btn btn-primary">了解详情</a>
                </div>
                </div>
                </div>
        
        </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

4 带选项卡的卡片

使用Bootstrap的导航组件在卡片的页首（或块）添加一些导航，获得选项卡效果。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div>
      <br><br><br>
      <div class="card text-center">
        <div>
        <ul class="nav nav-tabs card-header-tabs">
        <li>
          <a aria-current="true" href="#" data-bs-toggle="tab" data-bs-target="#nav-hot">热门新闻</a>
        </li>
        <li>
          <a class="nav-link active" href="#" data-bs-toggle="tab" data-bs-target="#nav-home">国内新闻</a>
        </li>
        <li>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">国外新闻</a>
        </li>
        </ul>
        </div>
           <div>
                <div class="card-body tab-pane  fade" id="nav-hot">
                <h5>热点新闻</h5>
                <p>热点新闻</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
                
                <div class="card-body tab-pane  fade show active" id="nav-home">
                        <h5>国内新闻</h5>
                        <p>国内热点新闻</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>    
            </div>
        </div>

      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3.4.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

对于上面的代码，只需经过两处替换，就可以换为胶囊导航

 <ul class="nav nav-tabs card-header-tabs">

替换为

 <ul class="nav nav-pills card-header-pills">

所有的

data-bs-toggle="tab"

替换为

data-bs-toggle="pill"

3.4.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

5 卡片样式

卡片包含许多用来自定义背景、边框、颜色的选项。

5.1 背景和颜色

使用文字和背景通用类别来改变卡片的外观。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>卡片</title>
  </head>
  <body>
    <div class="container">
      <br><br><br>
      <div class="d-flex">  
      <div class="card text-white bg-primary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Primary</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-secondary" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Secondary</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-success" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Success</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-danger" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Danger</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
      </div>
    </div>
        <div class="d-flex">
        
        <div class="card text-dark bg-warning" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Warning</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-info" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Info</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-dark bg-light" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Light</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
        <div class="card text-white bg-dark" style="max-width: 18rem;">
        <div class="card-header">Header</div>
        <div class="card-body">
        <h5 class="card-title">Dark</h5>
        <p class="card-text">颜色直接作用于card容器上</p>
        </div>
        </div>
      </div>
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

3.5.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

5.2 边框和颜色

<div class="d-flex">
      <div class="card border-primary mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-primary">
        <h5 class="card-title">Primary 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-secondary mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-secondary">
        <h5 class="card-title">Secondary 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-success mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-success">
        <h5 class="card-title">Success 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        <div class="card border-danger mb-3" style="max-width: 18rem;">
        <div class="card-header">页眉</div>
        <div class="card-body text-danger">
        <h5 class="card-title">Danger 卡片标题</h5>
        <p class="card-text">card-text 卡片文字内容</p>
        </div>
        </div>
        
    </div>
    <div class="d-flex">
        <div class="card border-warning mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h5 class="card-title">Warning 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-info mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h5 class="card-title">Info 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-light mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body">
            <h5 class="card-title">Light 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
            <div class="card border-dark mb-3" style="max-width: 18rem;">
            <div class="card-header">页眉</div>
            <div class="card-body text-dark">
            <h5 class="card-title">Dark 卡片标题</h5>
            <p class="card-text">card-text 卡片文字内容</p>
            </div>
            </div>
    </div>

3.5.Bootstrap で Card コンポーネントを使用する方法の詳細な説明

限于篇幅，仅展示前面一部分边框图片。

5.2 Mixin通用类

也可以依照需求更改卡片页首、页尾的边框，并能使用bg-transparent来移除它们的background-color。

 <div class="card border-success mb-3" style="max-width: 26rem;">
        <div class="card-header bg-transparent border-success">页眉</div>
        <div class="card-body text-success">
        <h5 class="card-title">Success卡片标题</h5>
        <p class="card-text">
            注意card-body使用了 text-success"，页脚使用了bg-transparent border-success
        </p>
        </div>
        <div class="card-footer bg-transparent border-success">页脚</div>
        </div>

Bootstrap で Card コンポーネントを使用する方法の詳細な説明

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

以上がBootstrap で Card コンポーネントを使用する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css bootstrap html auto 样式表 margin background
声明：
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：Bootstrap でバッジ アイコン コンポーネントを使用する方法の簡単な分析次の記事：Bootstrap でバッジ アイコン コンポーネントを使用する方法の簡単な分析

関連記事

続きを見る