bootstrap4.css
.btn-link {
font-weight: 400;
color: #007bff;
text-decoration: none;
}
bootstrap4.css
.btn-link:hover {
color: #0056b3;
text-decoration: underline;
}
bootstrap4.css
.btn-link:focus, .btn-link.focus {
text-decoration: underline;
box-shadow: none;
}
bootstrap4.css
.btn-link:disabled, .btn-link.disabled {
color: #6c757d;
pointer-events: none;
}
■ボタン:button:コンポーネント:ボタンの色
<button type="button" class="btn btn-primary">btn-primary</button>
<button type="button" class="btn btn-secondary">btn-secondary</button>
<button type="button" class="btn btn-success">btn-success</button>
<button type="button" class="btn btn-danger">btn-danger</button>
<button type="button" class="btn btn-warning">btn-warning</button>
<button type="button" class="btn btn-info">btn-info</button>
<button type="button" class="btn btn-light">btn-light</button>
<button type="button" class="btn btn-dark">btn-dark</button>
<button type="button" class="btn btn-link">btn-link</button>
■アコーディオン:accordion:JavaScript:アコーディオンを作成する
カード01のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
カード02のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
カード03のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
カード01の切替ボタン
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
カード01のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
カード02の切替ボタン
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
カード02のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
カード03の切替ボタン
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
カード03のコンテンツ。カードヘッダー内の切替ボタンをクリックすると表示・非表示が切り替えられます。また、他のカードの切替ボタンをクリックすると非表示になります。
</div>
</div>
</div>
</div>