ユーザー リストは、システム内のユーザーのリストを表示するために使用される一般的なインターフェイス要素です。 Bootstrap では、さまざまなレイアウトとスタイルのオプションを使用して、ユーザー リストの外観をデザインできます。

HTML と CSS を使用してユーザー リストを作成する方法

Bootstrap でユーザー リストを作成する 1 つの方法は、

要素と
• 要素を使用して、使用済みアイテムの順序なしリストを作成することです。その後、Bootstrap のグリッド システムを使用してリストのレイアウトを制御し、さまざまなクラスを
  要素と
  • 要素に適用して、ニーズに応じてスタイルを設定できます。

    たとえば、.list-group クラスと .list-group-item クラスを使用してカードのような外観のユーザー リストを作成したり、.table クラスと .table-row クラスを使用してより表形式のレイアウトを作成したりできます。 .

    Bootstrap のユーティリティ クラスを使用して、ユーザー名を太字にする .font-weight-bold クラスや、ユーザーの詳細テキストを灰色にする .text-muted クラスなど、リスト項目のスタイルを設定することもできます。

    これは、Bootstrap を使用して実装された単純なユーザー リストの例です:
    

    • Ricky ([email protected])
    • Neha ([email protected])
    • Alex ([email protected])

    次のヒントがあります –

    1. Bootstrap のレスポンシブ ブレークポイントを使用して、ユーザー リストがさまざまな画面サイズでも適切に表示されるようにします。たとえば、.d-sm-flex クラスと .flex-sm-column クラスを使用して、ユーザーのリスト項目を小さな画面で垂直に積み重ねることができ、.d-none クラスを使用して、特定の画面サイズで特定の要素を非表示にすることができます。
    2. Bootstrap のページネーション コンポーネントを使用すると、ユーザーが大規模なユーザー リストを参照できるようになります。たとえば、.pagination クラスを使用してページネーション バーを作成し、.page-item クラスと .page-link クラスを使用して個々のページネーション リンクのスタイルを設定できます。
    3. Bootstrap のフォーム コントロールを使用すると、ユーザーがユーザー リストをフィルターまたは並べ替えることができます。たとえば、.form-control クラスを使用して検索入力のスタイルを設定したり、.custom-select クラスを使用して並べ替え順を選択するためのドロップダウン メニューのスタイルを設定したりできます。
    4. Bootstrap のメディア オブジェクト コンポーネントを使用して、ユーザー名や詳細と一緒にユーザー アバターやその他のリッチ メディアを表示できます。たとえば、.media クラスと .media-body クラスを使用してメディア オブジェクトを作成し、.mr-3 クラスを使用してアバター画像にテキストからのスペースを与えることができます。
    5. Bootstrap のカスタマイズ オプションを使用して、ユーザー リストの外観をニーズに合わせてさらに調整することを検討してください。たとえば、$list-group-item-color Sass 変数を使用してリスト項目の背景色を変更したり、$list-group-item-color 変数と $list-group-item-text-color 変数を使用して、テキストの色を制御します。