Bootstrap Wells
この記事では、Bootstrap Wells について解説します。Wells は、ページ上に「凹んだ」または「凹版」の効果を作成するためのコンポーネントです。
1. Bootstrap Wells とは
Bootstrap Wells は、ページ上のコンテンツを視覚的に区別するために使用されます。Wells を使用することで、重要な情報やコンテンツを強調表示することができます。
Bootstrap Wells のメリット
- 使い方が簡単
- ページ上の重要なコンテンツを強調表示するための簡単な方法を提供
2. Wells の作成
基本的な Well を作成するには、.well クラスを使用します。
<div class="well">
...
</div>基本的な Well の外観
これは基本的な Well です。
3. Well のサイズ
.well-lg クラスを使用すると、より大きな Well を作成できます。.well-sm クラスを使用すると、より小さな Well を作成できます。
<div class="well well-lg">
...
</div>
<div class="well well-sm">
...
</div>異なるサイズの Well の外観
| クラス | 外観 |
|---|---|
.well |
基本的な Well
|
.well-lg |
大きな Well
|
.well-sm |
小さな Well
|
注意
Bootstrap 4 以降では、Wells クラスは廃止されました。Wells と同様の効果を得るには、ユーティリティクラスを使用するか、カスタム CSS を定義する必要があります。詳細については、Bootstrap 4 のユーティリティクラスに関するドキュメントを参照してください。
関連 QA
Q1: Bootstrap 4 で Wells を使用するにはどうすればよいですか？
Bootstrap 4 では、Wells クラスは廃止されました。代わりに、ユーティリティクラスやカスタム CSS を使用して同様の効果を実現できます。
Q2: Wells の内容に padding を追加するにはどうすればよいですか？
Wells にはデフォルトで padding が設定されています。padding を変更するには、カスタム CSS を使用します。
Q3: 複数の Wells を隣り合わせに配置するにはどうすればよいですか？
Wells をグリッドシステムの列内に配置することで、複数の Wells を隣り合わせに配置できます。