RU DESIGN
Menu
テーマ切り替え
ほのぼの情報サイト
ほのぼのゲーム情報GAME PON-POO
無料画像素材

【初心者の方向け】 Bootstrap4の使い方 リストグループ

archivebootstrap4
#チュートリアル
bootstrap4_10

bootstrapでの基本的なリストグループの使い方になります。

Bootstrap4のバージョン4.3をベースに書いています。

基本的な使い方

  • リスト１
  • リスト２
  • リスト３
  • リスト４
  • リスト５

見本ではul要素に.list-groupをli要素に.list-group-itemを指定しています。

<ul class="list-group">
  <li class="list-group-item">リスト１</li>
  <li class="list-group-item">リスト２</li>
  <li class="list-group-item">リスト３</li>
  <li class="list-group-item">リスト４</li>
  <li class="list-group-item">リスト５</li>
</ul>

アクティブと無効状態

リスト一覧の状態を指定する事もできます。

  • リスト１（アクティブ）
  • リスト２（無効）
  • リスト３
  • リスト４
  • リスト５

.activeを追加しアクティブに.disabledを追加し無効化。

アイテムに上記のクラスを追加することによりアクティブ化・無効化を指定する事ができます。

<ul class="list-group">
 	<li class="list-group-item active">リスト１（アクティブ）</li>
 	<li class="list-group-item disabled">リスト２（無効）</li>
 	<li class="list-group-item">リスト３</li>
 	<li class="list-group-item">リスト４</li>
 	<li class="list-group-item">リスト５</li>
</ul>

リストをリンクやボタン化する

要素を使用してリストをリンク化する事ができます。

同様に
RU DESIGN
AUTHOR

RU DESIGN

個人開発者として、Webサイト制作やAIを活かした開発に取り組んでいます。このブログでは、私が実際に試して「これは使える！」と思った技術や、自作の便利ツールをシェアしています。一緒に技術を楽しんでいきましょう！

この記事をシェア:
前の記事
【初心者の方向け】 Bootstrap4の使い方 余白
次の記事
【初心者の方向け】 Bootstrap4の使い方 タブの作成

関連記事