Bootstrap4 基礎教程

Bootstrap4 ダロウダウンメニュー Bootstrap4 リストグループ

Bootstrap4 カード（Card）

Bootstrap4新しい柔軟で拡張可能なコンテンツコンテナのcardコンポーネントを、古いpanel、well、thumbnailコンポーネントに代わって導入しました。これは、ヘッダーやフッターオプション、さまざまなコンテンツ、コンテキスト背景色、強力な表示オプションを含んでいます。以下の部分では、cardコンポーネントの使用方法を見てみましょう。

シンプルなカード

Bootstrap を通じて4 の .card と .card-bodyクラスを使用してシンプルなカードを作成します、以下は例です:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>シンプルなカード</h2>
　　<div　class="card">
　　　　<div　class="card-body">シンプルなカード</div>
　　</div>
</div>
</body>
</html>

テストを見る ‹/›

Bootstrap4 のカードはBootstrapに似ています 3 内のパネル、画像サムネイル、well。

ヘッダーとフッター

.card-headerクラスはカードのヘッダースタイルを作成するために使用されます、.card-footerクラスはカードのフッタースタイルを作成するために使用されます：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>カードのヘッダーとフッター</h2>
　　<div　class="card">
　　　　<div　class="card-header">ヘッダー</div>
　　　　<div　class="card-body">内容</div>　
　　　　<div　class="card-footer">フッター</div>
　　</div>
</div>
</body>
</html>

テストを見る ‹/›

>様々な色のカード

Bootstrap 4 様々なカードの背景色クラスを提供します：.bg-プライマリー, .bg-サクセスや.bg-インフォや.bg-ワーニングや.bg-デンジャーや.bg-セカンダリーや.bg-ダークおよび.bg-ライト。

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>様々な色のカード</h2>
　　<div　class="card">
　　　　<div　class="card-body">ベーシックカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-プライマリーテキスト-white">
　　　　<div　class="card-body">プライマリーカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-サクセステキスト-white">
　　　　<div　class="card-body">サクセスカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-インフォテキスト-white">
　　　　<div　class="card-body">インフォカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-ワーニングテキスト-white">
　　　　<div　class="card-body">ワーニングカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-デンジャーテキスト-white">
　　　　<div　class="card-body">デンジャーカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-セカンダリーテキスト-white">
　　　　<div　class="card-body">セカンダリーカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-ダークテキスト-white">
　　　　<div　class="card-body">ダークカード</div>
　　</div>
　　<br>
　　<div　class="card　bg-ライトテキスト-dark">
　　　　<div　class="card-body">ライトカード</div>
　　</div>
</div>
</body>
</html>

テストを見る ‹/›

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

ヘッダーエレメントに.cardを使用できます。-titleクラスでカードのタイトルを設定します。 .card-textクラスはカードの本文の内容を設定するために使用されます。.card-linkクラスはリンクに色を設定するために使用されます。

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>タイトル、テキスト、リンク</h2>
　　<div　class="card">
　　　　<div　class="card-body">
　　　　　　<h4　class="card-title">Card　title</h4>
　　　　　　<p　class="card-text">いくつかの例テキスト。いくつかの例テキスト。</p>
　　　　　　<a　href="#"　class="card-link">Card　link</a>
　　　　　　<a　href="#"　class="card-link">Another　link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストを見る ‹/›

画像カード

私たちは <img> に.cardを追加-img-top（画像がテキストの上に配置される）または.card-img-bottom（画像がテキストの下に配置される：

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>画像カード</h2>
　　<p>图片在头部　(card-img-top):</p>
　　<div　class="card"　style="width:400px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div　class="card-body">
　　　　　　<h4　class="card-title">John　Doe</h4>
　　　　　　<p　class="card-text">Some　example　text　some　example　text.　John　Doe　is　an　architect　and　engineer</p>
　　　　　　<a　href="#"　class="btn　btn-primary">プロフィールを見る</a>
　　　　</div>
　　</div>
　　<br>
　　
　　<p>图片在底部(card-img-bottom):</p>
　　<div　class="card"　style="width:400px">
　　　　<div　class="card-body">
　　　　　　<h4　class="card-title">Jane　Doe</h4>
　　　　　　<p　class="card-text">Some　example　text　some　example　text.　Jane　Doe　is　an　architect　and　engineer</p>
　　　　　　<a　href="#"　class="btn　btn-primary">プロフィールを見る</a>
　　　　</div>
　　　　<img　class="card-img-bottom"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="Card　image"　style="width:100%">
　　</div>
</div>
</body>
</html>

テストを見る ‹/›

如果图片要设置为背景，可以使用 .card-img-overlay 类:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>文字覆盖图片</h2>
　　<p>如果图片要设置为背景，可以使用　.card-img-overlay　类:</p>
　　<div　class="card　img-fluid"　style="width:500px">
　　　　<img　class="card-img-top"　src="https://static.oldtoolbag.com/images/mix/img_avatar.png"　alt="Card　image"　style="width:100%">
　　　　<div　class="card-img-overlay">
　　　　　　<h4　class="card-title">John　Doe</h4>
　　　　　　<p　class="card-text">いくつかの例テキストいくつかの例テキスト。いくつかの例テキストいくつかの例テキスト。いくつかの例テキストいくつかの例テキスト。</p>
　　　　　　<a　href="#"　class="btn　btn-primary">プロフィールを見る</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストを見る ‹/›

Bootstrap4 ダロウダウンメニュー Bootstrap4 リストグループ