公式ウェブサイト: List Group - Bootstrap Framework (bootstrapdoc.com)

ルーキーチュートリアル:ブートストラップリストグループ | ルーキーチュートリアル (runoob.com)

1. ブートストラップとは

Bootstrap は、Web アプリケーションと Web サイトを迅速に開発するためのフロントエンドフレームワークです。HTML、CSS、JavaScript のカプセル化に基づく

レスポンシブ

ElementUI は企業の内部管理システムやバックグラウンド管理などのアプリケーションシナリオに適しており、Bootstrap は Web サイトやブログなどの応答性の高いフロントエンドページの構築に適しています。

2. Bootstrap5 応答コンテナー

コンテナは、特定のデバイスまたはビューポート内にコンテンツを含め、入力し、配置するブートストラップの基本的な構成要素です。

ブートストラップには、Web サイトのコンテンツをラップするコンテナ要素が必要です

.container クラスは、レスポンシブレイアウトをサポートする固定幅のコンテナーに使用されます。
.container-fluid クラスは 100% 幅で使用され、ビューポート (ビューポート) コンテナー全体を占有します。

3. ブートストラップグリッドシステム

Bootstrap は、画面またはビューポートのサイズが大きくなるにつれて、自動的に最大 12 列に分割する、応答性の高いモバイルファーストの流体グリッドシステムを提供します。

グリッドシステムを運用するには、まずグリッドシステムのコンテナを作成する必要があります。

「container」と「row」は一緒になってグリッドコンテナを形成し、「row」は行を表します。

グリッドコンテナを作成したら、col-md-という名前のdivを設定します。桁数が1の場合、各divの幅は1/12を占めることを意味し、各行には最大12個のサブdivを配置できます。

12 を超える場合は次の行に表示されます。

3.1 ネストされた列

3.2 列オフセット

列オフセットはクラス名 (offset-*-*) によって設定されます。最初の * は、画面デバイスのタイプを示す sm、ms、lg、xl で、2 番目のアスタリスク * は 1 ～ 11 の数字です。

3.3 列のソート

order-* を有効にするには、各 div に設定する必要があります。

1つだけ設定されている場合は、設定すればソートされますが、設定されていない場合はソートされません。

1 ～ 5 の数字は有効ですが、他の数字は無効です。

order-first、order-last : 並べ替えることもでき、優先順位は order-* よりも高くなります。

4. ブートストラップのタイポグラフィー

4.1 タイトル

h1～h6：ラベルとクラスの両方が使用可能

4.1.1：クラス="ディスプレイ-1"

大きなタイトルを強調表示します: class="display-1"

4.2.2.class="リード"

段落を強調表示: class="lead"

4.3.3小

見出しにインライン小見出しを追加する必要がある場合は、要素の周囲に <small> を追加するか、 .small クラスを追加するだけで、より小さなフォントサイズで明るいテキストが得られます (親要素のサイズは 85%です)。

4.3.1<small class=' text-mutedclass'>

フォントサイズを小さくし、色を明るくする

4.2text-center テキストの中央揃え

。鉛	段落を強調表示する	それを試してみてください
。小さい	小さなテキストを設定します (親テキストの 85% のサイズに設定)	それを試してみてください
.text-left	テキストの左揃えを設定する	それを試してみてください
.text-center	テキストの中央揃えを設定する	それを試してみてください
.text-right	テキストの右揃えを設定する	それを試してみてください
.text-justify	テキストの配置を設定すると、段落内のテキストが画面からはみ出す部分が自動的に折り返されます。	それを試してみてください
.text-nowrap	画面を超える段落では改行しないでください	それを試してみてください
.text-小文字	テキストを小文字に設定する	それを試してみてください
.text-大文字	テキストの大文字化を設定する	それを試してみてください
.text-capitalize	単語の大文字と小文字を設定する	それを試してみてください
.initialism	<abbr>要素に表示されるテキストは小さなフォントで表示され、小文字を大文字に変換できます。	それを試してみてください
.blockquote-reverse	引用符の右揃えを設定する	それを試してみてください
.list-unstyled	デフォルトのリストスタイル、左揃えのリスト項目 (<ul> および <ol> 内) を削除します。このクラスは、直接の子のリスト項目にのみ適用されます (ネストされたリスト項目を削除する必要がある場合は、ネストされたリストでこのスタイルを使用する必要があります)	それを試してみてください
.list-inline	すべてのリスト項目を同じ行に配置します	それを試してみてください
.dl-horizontal	このクラスは、<dl> 要素と <dt> 要素に適用される float と offset を設定します。具体的な実装については、例を参照してください。	それを試してみてください
.事前スクロール可能	<pre> 要素をスクロール可能にします。コードブロック領域の最大高さは 340 ピクセルです。この高さを超えると、Y 軸にスクロールバーが表示されます。

長いテキストの場合、クラス .text-truncate を使用してテキストを省略記号で切り詰めることができます。これは、テキストのブロックを 1 行で表示しているが、十分なスペースがない場合に特に便利です。

ブートストラップで熟練度に到達