このBootstrapの例で潜在的な顧客のための効果的な価格表がすばやく作成可能。デフォルトのBootstrapコンポーネントとユーティリティを少しカスタマイズして構築されている。
html {
font-size: 14px;
}
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.container {
max-width: 960px;
}
.pricing-header {
max-width: 700px;
}
.card-deck .card {
min-width: 220px;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>価格設定案内</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
//cssファイルの設定など
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">会社名</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">特長</a>
<a class="p-2 text-dark" href="#">事業</a>
<a class="p-2 text-dark" href="#">サポート</a>
<a class="p-2 text-dark" href="#">価格設定</a>
</nav>
<a class="btn btn-outline-primary" href="#">サインアップ</a>
</div>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">価格設定</h1>
<p class="lead">このBootstrapの例で潜在的な顧客のための効果的な価格表がすばやく作成可能。デフォルトのBootstrapコンポーネントとユーティリティを少しカスタマイズして構築されている。</p>
</div>
<div class="container">
<div class="card-deck mb-3 text-center">
<div class="card shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">フリー</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">￥0 <small class="text-muted">/ 月</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>10 ユーザーを含む</li>
<li>2 GBのストレージ</li>
<li>メールサポート</li>
<li>ヘルプセンターへのアクセス</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-outline-primary">無料で申込</button>
</div>
</div>
<div class="card shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">プロ</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">￥1500 <small class="text-muted">/ 月</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>20 ユーザーを含む</li>
<li>10 GBのストレージ</li>
<li>優先メールサポート</li>
<li>ヘルプセンターへのアクセス</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">お申込</button>
</div>
</div>
<div class="card shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">企業向け</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">￥2900 <small class="text-muted">/ 月</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 ユーザーを含む</li>
<li>15 GBのストレージ</li>
<li>電話とメールのサポート</li>
<li>ヘルプセンターへのアクセス</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">お問い合わせ</button>
</div>
</div>
</div>
<footer class="pt-4 mt-3 my-md-5 pt-md-5 border-top">
<div class="row">
<div class="col-12 col-md">
<img class="mb-2" src="../images/bootstrap-solid.svg" alt="" width="24" height="24">
<small class="d-block mb-3 text-muted">© 2017-2019</small>
</div>
<div class="col-6 col-md">
<h5>特徴</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">クールなスタッフ</a></li>
<li><a class="text-muted" href="#">ランダム機能</a></li>
<li><a class="text-muted" href="#">チームの特徴</a></li>
<li><a class="text-muted" href="#">開発者向け</a></li>
<li><a class="text-muted" href="#">もう一つ</a></li>
<li><a class="text-muted" href="#">最終回</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>リソース</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">リソース</a></li>
<li><a class="text-muted" href="#">リソース名</a></li>
<li><a class="text-muted" href="#">別のリソース</a></li>
<li><a class="text-muted" href="#">最終的リソース</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>概要</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">チーム</a></li>
<li><a class="text-muted" href="#">場所</a></li>
<li><a class="text-muted" href="#">プライバシー</a></li>
<li><a class="text-muted" href="#">条項</a></li>
</ul>
</div>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" integrity="sha384-Qg00WFl9r0Xr6rUqNLv1ffTSSKEFFCDCKVyHZ+sVt8KuvG99nWw5RNvbhuKgif9z" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
//JavaScriptプラグインの設定など
</body>
</html>