Bootstrap4-cards
提供：Dev Guides
ブートストラップ4-カード
説明
カードは、周囲にパディングのある枠付きボックスを表示するコンテンツコンテナーです。 背景色、ヘッダー、フッター、その他の表示オプションが含まれます。
基本カード
基本的なカードを取得するには、次の例に示すように、。card_クラスを<div>要素に追加し、。card-body_クラス内にコンテンツを配置するだけです-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Card</h2>
<div class = "card">
<div class = "card-body">
<h5 class = "card-title">finddevguides</h5>
<p class = "card-text">
Our mission is to deliver Simply Easy Learning with clear, crisp, and
to-the-point content on a wide range of technical and non-technical
subjects without any preconditions and impediments.
</p>
<a href="#" class = "btn btn-info">More Info</a>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
ヘッダーとフッター
.card-header_クラスを使用してカードのヘッダーを追加し、。card-footer_クラスを使用してフッターを追加できます。
次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card Header and Footer</h2>
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<h5 class = "card-title">finddevguides</h5>
<p class = "card-text">
Our mission is to deliver Simply Easy Learning with clear, crisp, and
to-the-point content on a wide range of technical and non-technical
subjects without any preconditions and impediments.
</p>
<a href = "#" class = "btn btn-info">More Info</a>
</div>
<div class = "card-footer">Card Footer</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
リストグループ
次の例に示すように、_。list-group-flush_クラスを使用して、カードにコンテンツのリストを作成できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>List Groups</h2>
<div class = "card" style = "width: 18rem;">
<div class = "card-header">Card Header</div>
<ul class = "list-group list-group-flush">
<li class = "list-group-item">HTML-5</li>
<li class = "list-group-item">CSS-3</li>
<li class = "list-group-item">Bootstrap-4</li>
</ul>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
コンテキストカード
ブートストラップは、。bg-primary _、。bg-success 、。bg-info 、。bg-warning 、。bg-danger 、。bg-secondary 、。bg-dark _、_などのコンテキストクラスを使用します。 bg-light_は、カードの背景色を変更します。
次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h3>Contextual Cards</h3>
<div class = "card bg-primary text-white">
<div class = "card-body">Primary card</div>
</div>
<br>
<div class = "card bg-success text-white">
<div class = "card-body">Success card</div>
</div>
<br>
<div class = "card bg-info text-white">
<div class = "card-body">Info card</div>
</div>
<br>
<div class = "card bg-warning text-white">
<div class = "card-body">Warning card</div>
</div>
<br>
<div class = "card bg-danger text-white">
<div class = "card-body">Danger card</div>
</div>
<br>
<div class = "card bg-secondary text-white">
<div class = "card-body">Secondary card</div>
</div>
<br>
<div class = "card bg-dark text-white">
<div class = "card-body">Dark card</div>
</div>
<br>
<div class = "card bg-light text-dark">
<div class = "card-body">Light card</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
カード画像（上部と下部）
次の例に示すように、。card-img-top_クラスを使用してカードの上部に画像を配置するか、<img>要素に.card-img-bottom_クラスを使用して画像を配置できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Image at Top</h2>
<div class = "card" style = "width:350px;height:400px">
<img class = "card-img-top" src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Image Top">
<div class = "card-body">
<h4 class = "card-title">HTML</h4>
<p class = "card-text">
HTML stands for Hypertext Markup Language, and it is the most widely
used language to write Web Pages.
</p>
<a href = "#" class = "btn btn-primary">More Info</a>
</div>
</div>
<br>
<h2>Image at Bottom</h2>
<div class = "card" style = "width:350px;height:400px">
<div class = "card-body">
<h4 class = "card-title">CSS</h4>
<p class = "card-text">
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
</p>
<a href = "#" class = "btn btn-primary">More Info</a>
</div>
<img class = "card-img-bottom"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Image Bottom">
</div>
<br>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
カード画像オーバーレイ
背景画像をカードに追加し、_。card-img-overlay_クラスを使用して画像の上部にテキストを配置します。
次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Image Overlay</h2>
<div class = "card" style = "width:350px;height:400px">
<img class = "card-img-top"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card image" style = "width:100%">
<div class = "card-img-overlay">
<p class = "card-text text-white">
HTML stands for Hypertext Markup Language. It is the most widely used
language to write Web Pages
</p>
<a href = "#" class = "btn btn-primary">More Info</a>
</div>
<div class = "card-body">
<h4 class = "card-title">HTML</h4>
<p class = "card-text">
HTML was developed with the intent of defining the structure of
documents like headings, paragraphs, lists, and so forth to
facilitate the sharing of scientific information between researchers.
</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
カードグループ
カードグループを使用して、複数のカードを単一の添付要素として配置できます。 _.card-group_クラスは、等しい幅と高さの列を指定し、各カード間の左右の余白を削除します。
注-小さな画面（576px未満）では、カードは上下の余白とともに垂直に表示されます。
次の例は、単一の添付要素としてカードグループの表示を示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card-Groups</h2>
<div class = "card-group">
<div class = "card">
<img class = "card-img-top"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">HTML</h5>
<p class = "card-text">
HTML stands for Hypertext Markup Language, and it is the most
widely used language to write Web Pages.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">CSS</h5>
<p class = "card-text">
Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">Bootstrap</h5>
<p class = "card-text">
Bootstrap is a sleek, intuitive, and powerful, mobile first
front-end framework for faster and easier web development.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
カードデッキ
カードデッキは、互いに接続されていない等しい幅と高さの列を指定します。 これを行うには、_。card-deck_クラスを使用します。
次の例はこれを示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card Decks</h2>
<div class = "card-deck">
<div class = "card">
<img class="card-img-top"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">HTML</h5>
<p class = "card-text">
HTML stands for Hypertext Markup Language, and it is the most
widely used language to write Web Pages.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">CSS</h5>
<p class = "card-text">
Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
<div class = "card">
<img class = "card-img-top"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Card Groups">
<div class = "card-body">
<h5 class = "card-title">Bootstrap</h5>
<p class = "card-text">
Bootstrap is a sleek, intuitive, and powerful, mobile first
front-end framework for faster and easier web development.
</p>
</div>
<div class = "card-footer">
<small class = "text-muted">Card Footer</small>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
カード列
以下の例に示すように、_。card-columns_クラスを使用して、グリッドレイアウト構造にカードを配置できます-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Card Columns</h2>
<div class =" card-columns">
<!-- Card 1 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">This is Card - 1</p>
</div>
</div>
<!-- Card 2 -->
<div class = "card">
<div class = "card-body">
<p class = "card-text">This is Card - 2</p>
</div>
</div>
<!-- Card 3 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">
This is Card - 3 with
<a href = "#" class = "card-link">link</a>
</p>
</div>
<div class = "card-footer">Card Footer</div>
</div>
<!-- Card 4 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">This is Card - 4</p>
</div>
<div class = "card-footer">Card Footer</div>
</div>
<!-- Card 5 -->
<div class = "card">
<div class = "card-body">
<h4 class = "card-title">Card Title</h4>
<p class = "card-text">This is Card - 5</p>
</div>
</div>
<!-- Card 6 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">
This is Card - 6 with <a href = "#" class = "card-link">link</a>
</p>
</div>
</div>
<!-- Card 7 -->
<div class = "card">
<div class = "card-header">Card Header</div>
<div class = "card-body">
<p class = "card-text">This is Card - 7</p>
</div>
<div class = "card-footer">Card Footer</div>
</div>
<!-- Card 8 -->
<div class = "card text-white" >
<!-- Image -->
<img class = "card-img"
src = "https://www.finddevguides.com/bootstrap/images/64.jpg"
alt = "Photo of Cat">
<!-- Text Content -->
<div class = "card-img-overlay">
<h4 class = "card-title">Card 8</h4>
<p class = "card-text">This is an image for Card - 8</p>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
出力
ナビゲーション
.card-header-tabs_クラスまたは.card-header-pills_クラスを<ul>要素に追加することで、カードにnavタブまたはnavピルを作成できます。
次の例は、カードへのナビゲーションタブとナビゲーションピルの両方の追加を示しています-
例
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Navigation Tab</h2>
<div class = "card text-center">
<div class = "card-header">
<ul class = "nav nav-tabs card-header-tabs">
<li class = "nav-item">
<a class = "nav-link active" href = "#">HTML</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">CSS</a>
</li>
<li class = "nav-item">
<a class = "nav-link " href = "#">Bootstrap</a>
</li>
</ul>
</div>
<div class = "card-body">
<h5 class = "card-title">Title</h5>
<p class = "card-text">Content goes here...</p>
</div>
</div>
<br>
<h2>Navigation Pill</h2>
<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 = "#">HTML</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">CSS</a>
</li>
<li class = "nav-item">
<a class = "nav-link " href = "#">Bootstrap</a>
</li>
</ul>
</div>
<div class = "card-body">
<h5 class = "card-title">Title</h5>
<p class = "card-text">Content goes here...</p>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin = "anonymous">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin = "anonymous">
</script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin = "anonymous">
</script>
</body>
</html>それは次の結果を生成します-
