Bootstrap で Card コンポーネントを使用する方法の詳細な説明
Bootstrap で Card コンポーネントを使用するにはどうすればよいですか?次の記事では、コード例を使用して Bootstrap5 Card カード コンポーネントの使用方法を説明します。
1 ブートストラップ カードの概要
ブートストラップ カードは、複数のバリエーションとオプションを備えた柔軟でスケーラブルなコンテンツ コンテナを提供します。カードは、マークアップとスタイルをできるだけ少なくするように設計されているため、簡単に位置合わせして他の Bootstrap コンポーネントとうまく調和させることができます。デフォルトではマージンがないため、必要に応じてスペースの一般カテゴリを追加できます。 [関連する推奨事項: "bootstrap チュートリアル "]
以下は、コンテンツが混在し、幅が固定された基本的なカードの例です。幅が固定されていないカードは、自然に親要素の幅全体を埋めます。これは、さまざまなスケーリング オプションを使用して簡単に調整できます。以下に簡単な例を示します。
<div class="card" style="width: 18rem;">
<img class="card-img-top lazy" src="/static/imghw/default1.png" data-src="../pic/5.jpg" alt="卡片的图片宽度会自动设置">
<div class="card-body">
<h5 id="卡片标题">卡片标题</h5>
<p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素</p>
<a href="#" class="btn btn-primary">这是一个按钮</a>
</div>
</div>
2 カード構造
2.1 完全なカード構造の例
通常の状況では、完全なカード構造は必要ありません。カード コンポーネントを使用することをお勧めします。上の例に示すように、完全なカードには、ヘッダー、フッター、画像 (ここでは、カードと同じ幅のヘッダーの下の画像を指します)、本文、およびリスト グループ。本文にはタイトルとテキストを含めることができます。 以下は包括的な例です。実際、通常の状況では、必要に応じてカードの 1 つまたは 2 つの要素を使用するだけで十分です。次の例は単なるデモンストレーションです。後で機能の各部分を 1 つずつ説明します。
<div class="card" style="width: 18rem;">
<div class="card-header">
卡片页眉
</div>
<img class="card-img-top lazy" src="/static/imghw/default1.png" data-src="../pic/5.jpg" alt="卡片的图片宽度会自动设置">
<div class="card-body">
<h5 id="卡片标题">卡片标题</h5>
<p class="card-text">卡片的内容可以使用文本、列表、表格、表单、图片等各种html元素
<img class="card-img-top lazy" src="/static/imghw/default1.png" data-src="../pic/7.jpg" 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>
2.1 カードのヘッダーとフッター
他のコンテンツ、ヘッダーとフッターと比較して、ヘッダーとフッターは必要ありません。テキストの色が薄く、フォントが少し小さくなります。さらに、一般的なクラスを通じてその配置を調整することができ、柔軟な使用により多くの特殊効果を実現できます。
2.1.1 シンプルなカード
<div class="card">
<h5 id="通知">通知</h5>
<div class="card-body">
<h5 id="中秋节放假通知">中秋节放假通知</h5>
<p class="card-text">下周中秋节放假7天，给大家乐活以下.........</p>
<a href="#" class="btn btn-primary">了解详情</a>
</div>
</div>
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>
2.1.3 ヘッダーとフッターを一緒に使用する
<div class="card text-center">
<div class="card-header">
名著推荐
</div>
<div class="card-body">
<h5 id="红楼梦">《红楼梦》</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>
##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="/static/imghw/default1.png" data-src="../pic/5.jpg" class="lazy" alt="...">
<div>
<h5 id="软发布-nbsp-Win-nbsp">软发布 Win11 </h5>
<p>T
微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
</p>
<p><small>Last updated 3 mins ago</small></p>
</div>
</div>
<div>
<div>
<h5 id="飞利浦推出-K显示器">飞利浦推出4K显示器</h5>
<p>飞利浦推出 Momentum 4K 电竞显示器：专为 Xbox 设计，售价过万
</p>
<p><small>Last updated 3 mins ago</small></p>
</div>
<img src="/static/imghw/default1.png" data-src="../pic/7.jpg" class="lazy" alt="...">
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
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="/static/imghw/default1.png" data-src="../pic/7.jpg" class="lazy" alt="...">
<div class="card-body card-img-overlay">
<h5 id="微软发布-nbsp-Win-nbsp">微软发布 Win11 </h5>
<p>
微软已宣布将于 6 月 24 日举行“What'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.3 左側の画像
グリッドと一般的なものを使用します。カードを応答性の高い方法で水平方向にレンダリングできるようにするクラスです。以下の例では、g-0 を使用してグリッドのギャップを削除し、
col-md-* クラスを使用してカードを表示します。水平方向。md ブレークポイントの後に水平方向にレンダリングします。カードの内容によっては、追加の調整が必要になる場合があります。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><div class="card mb-3" style="max-width:90%">
<div class="row g-0">
<div class="col-md-4">
<img class="w-100 lazy" src="/static/imghw/default1.png" data-src="../pic/3.jpg" alt="..." >
</div>
<div class="col-md-8">
<div class="card-body">
<h5 id="春夏秋冬皆自然">春夏秋冬皆自然</h5>
<p class="card-text">
春夏秋冬皆自然,明月清风共我闲,有春风拂面的温柔,也有美好故事的发生,又一个春天如约而至,温柔的朝阳里布谷鸟声声呼唤,愿普天同安康,迎接春天到来的简...
</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div></pre><div class="contentsignin">ログイン後にコピー</div></div>
もちろん、画像の幅を設定した方がよいでしょう。
2.3 カードの本文
2.3.1 タイトルとサブタイトル
カードの構成要素は .card-body です。これを使用してください。カードにパディングが必要な場合は、それを使用します。- 在
<h*>标签中添加card-title以使用卡片标题。 - 在
<h*>标签中加入card-subtitle以使用副标题。
<h*>标签中添加card-title以使用卡片标题。<h*>标签中加入card-subtitle以使用副标题。如果card-title以及card-subtitle元件被放在card-body里面，它们将会对齐良好。
2.3.2 文本内容和链接
文本内容可以放置任何html元素和bootstrap的组件，如按钮等，在a标签中加入card-link并使连接彼此相邻。
<div class="card" style="max-width:90%">
<div class="card-body">
<h5 id="微软发布-nbsp-Win">微软发布 Win11</h5>
<h6 id="科技动态">科技动态</h6>
<p class="card-text">
微软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
</p>
<a href="#" class="card-link">了解详情</a>
<a href="#" class="card-link">下载试用</a>
</div>
</div>
2.4 列表群組
列表群组使用非常简单
<div class="card" style="max-width:90%">
<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>
2.5 混合样式
混合并搭配多个内容形式，用来创建你所需要的卡片。以下示例将图片样式、块、文字样式以及列表群组全部包装在一个固定宽度的卡片中。
<div class="card" style="max-width:90%"> <img class="card-img-top lazy" src="/static/imghw/default1.png" data-src="../pic/cap.jpg" alt="..."> <div class="card-body"> <h5 id="Card-nbsp-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">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>
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 id="微软发布-nbsp-Win">微软发布 Win11</h5>
<p>
软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
</p>
<a href="#" class="btn btn-primary">了解详情</a>
</div>
</div>
</div>
<div>
<div>
<div>
<h5 id="飞利浦推出-K显示器">飞利浦推出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.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 id="微软发布-nbsp-Win">微软发布 Win11</h5>
<p>
软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
</p>
<a href="#" class="btn btn-primary">了解详情</a>
</div>
</div>
<div class="card w-50">
<div>
<h5 id="飞利浦推出-K显示器">飞利浦推出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>
需要注意的是，这里的宽度值必须是预定的，预设包含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 id="微软发布-nbsp-Win">微软发布 Win11</h5>
<p>
软已宣布将于 6 月 24 日举行“What's next for Windows”活动，届时将发布下一代桌面操作系统 Win11 及其应用商店等内容。
</p>
<a href="#" class="btn btn-primary">了解详情</a>
</div>
</div>
<div style="width: 20rem;">
<div>
<h5 id="飞利浦推出-K显示器">飞利浦推出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.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 id="微软发布-nbsp-Win">微软发布 Win11</h5>
<p>
软已宣布将于 6 月 24 日举行“What'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 id="微软发布-nbsp-Win">微软发布 Win11</h5>
<p>
软已宣布将于 6 月 24 日举行“What'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 id="微软发布-nbsp-Win">微软发布 Win11</h5>
<p>
软已宣布将于 6 月 24 日举行“What'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>
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 id="热点新闻">热点新闻</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 id="国内新闻">国内新闻</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>
对于上面的代码，只需经过两处替换，就可以换为胶囊导航
<ul class="nav nav-tabs card-header-tabs">
替换为
<ul class="nav nav-pills card-header-pills">
所有的
data-bs-toggle="tab"
替换为
data-bs-toggle="pill"
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 id="Primary">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 id="Secondary">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 id="Success">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 id="Danger">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 id="Warning">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 id="Info">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 id="Light">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 id="Dark">Dark</h5>
<p class="card-text">颜色直接作用于card容器上</p>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
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 id="Primary-nbsp-卡片标题">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 id="Secondary-nbsp-卡片标题">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 id="Success-nbsp-卡片标题">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 id="Danger-nbsp-卡片标题">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 id="Warning-nbsp-卡片标题">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 id="Info-nbsp-卡片标题">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 id="Light-nbsp-卡片标题">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 id="Dark-nbsp-卡片标题">Dark 卡片标题</h5>
<p class="card-text">card-text 卡片文字内容</p>
</div>
</div>
</div>
限于篇幅，仅展示前面一部分边框图片。
5.2 Mixin通用类
也可以依照需求更改卡片页首、页尾的边框，并能使用bg-transparent来移除它们的background-color。
<div class="card border-success mb-3" style="max-width:90%">
<div class="card-header bg-transparent border-success">页眉</div>
<div class="card-body text-success">
<h5 id="Success卡片标题">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的相关知识，可访问：bootstrap基础教程！！
以上がBootstrap で Card コンポーネントを使用する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7569
15
1386
52
87
11
28
107
ブートストラップ検索バーを取得する方法
Apr 07, 2025 pm 03:33 PM
ブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップの垂直センタリングを行う方法
Apr 07, 2025 pm 03:21 PM
ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド：D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法：FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップテーブルがajaxを使用してデータを取得する場合はどうすればよいですか
Apr 07, 2025 am 11:54 AM
AJAXを使用してサーバーからデータを取得する場合の文字化けコードのソリューション：1。サーバー側コード（UTF-8など）の正しい文字エンコードを設定します。 2. AJAXリクエストでリクエストヘッダーを設定し、受け入れられている文字エンコード（Accept-Charset）を指定します。 3.ブートストラップテーブルの「UNESCAPE」コンバーターを使用して、脱出したHTMLエンティティを元の文字にデコードします。
