ブートストラップ4ボタン
ボタンのスタイル
Bootstrap 4は、さまざまなスタイルのボタンを提供します。
例
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
ボタンクラスは、、、または要素で使用<a>でき<button>ます
<input>。
例
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
リンクのhref属性に＃を入れるのはなぜですか？
リンク先のページがなく、「404」メッセージを受け取りたくないので、リンクとして＃を付けます。実生活では、もちろん「検索」ページへの実際のURLである必要があります。
ボタンの概要
Bootstrap 4は、8つのアウトライン/境界ボタンを提供します。
例
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
ボタンのサイズ
.btn-lg大きなボタンにはクラスを使用し、.btn-sm小さなボタンにはクラスを使用します。
例
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
ブロックレベルボタン
クラスを追加.btn-blockして、親要素の幅全体にまたがるブロックレベルのボタンを作成します。
例
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
アクティブ/無効ボタン
ボタンは、アクティブ（押されたように見える）または無効（クリックできない）状態に設定できます。
クラス.activeはボタンが押されたように見せ、disabled属性はボタンをクリックできないようにします。<a>要素はdisabled属性をサポートしていないため、.disabledクラスを使用して視覚的に無効に見えるようにする必要があることに注意してください。
例
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
スピナーボタン
ボタンに「スピナー」を追加することもできます。これについては、 BS4スピナーチュートリアルで詳しく説明します。
例
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>