简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > 本文

ブートストラップ学習のリストグループコンポーネントの使用方法

青灯夜游
リリース： 2021-02-20 17:50:21
転載
1891 人が閲覧しました

この記事では、Bootstrap でリスト グループ コンポーネントを使用する方法を説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

ブートストラップ学習のリストグループコンポーネントの使用方法

関連する推奨事項: 「bootstrap チュートリアル 」

リスト グループは、リスト、垂直ナビゲーション、その他の効果を作成するために使用できます。他のコンポーネントと連携して、より美しいコンポーネントを作成することもできます。リスト グループはブートストラップ フレームワークの独立したコンポーネントでもあるため、独自の独立したソース コードもあります:

  • LESS: list-group.less

  • SASS:_list-group.scss

リスト グループは、リスト記号を削除したリスト項目のように見えます。特定のスタイルを使用すると、ブートストラップ フレームワークの基本的なリスト グループには主に 2 つの部分が含まれます:

  • list-group: リスト グループ コンテナー。通常は ul 要素が使用されます。または、 ol または p 要素

  • list-group-item: リスト項目。通常は li 要素、または p 要素

が使用されます。基本的なリスト グループには何もしません スタイル設定が多すぎます。主に間隔、境界線、角丸の設定です; 

.list-group {
  padding-left: 0;
  margin-bottom: 20px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.list-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
ログイン後にコピー

例を見てみましょう: 

基础列表组

    
    
        
  • 腊肉土豆焖饭
    • 
        
  • 香辣风味炸鸡块
    • 
        
  • 香菜皮蛋豆腐
    • 
        
  • 荷兰豆炒马蹄
    • 
        
  • 山楂排骨
    • 
        
  • 韭菜炒河虾
    •
ログイン後にコピー

ブートストラップ学習のリストグループコンポーネントの使用方法

##バッジ付きリスト グループ

バッジ付きリスト グループは、実際には、ブートストラップ フレームワークのバッジ コンポーネントと基本的なリスト コンポーネントを組み合わせたエフェクトです。シンプルです。.list-group を追加するだけです。 -item

に基づいてバッジ コンポーネント「badge」を追加します。実装原則:

バッジの適切なフロートを設定します。もちろん、2 つのバッジが同時に同じリスト項目にある場合、それらの間の距離も設定されます。 

.list-group-item > .badge {
  float: right;
}
.list-group-item > .badge + .badge {
  margin-right: 5px;
}
ログイン後にコピー

例: 

带徽章的列表组

    
    
        
  • 
            13
            腊肉土豆焖饭
        
    • 
        
  • 
            20
            香辣风味炸鸡块
        
    • 
        
  • 
            12
            香菜皮蛋豆腐
        
    • 
        
  • 
            5
            荷兰豆炒马蹄
        
    • 
        
  • 
            8
            山楂排骨
        
    • 
        
  • 
            15
            韭菜炒河虾
        
    •
ログイン後にコピー

ブートストラップ学習のリストグループコンポーネントの使用方法

リンクのあるリスト グループ

接続されたリスト グループは、実際には、各リスト項目にリンク効果があることを意味します。一般的に考えられるのは、リスト項目のテキストにリンクを追加することです。次のような基本的なリスト グループに基づいています:

ログイン後にコピー

効果は次のとおりです:

ブートストラップ学習のリストグループコンポーネントの使用方法

これには欠点があります。それは、クリックです。リンクの領域はテキスト上でのみ有効ですが、多くの場合、リスト項目の任意の領域をクリックしたい場合があります。クリック可能にするには、リンク タグに追加のスタイルを追加する必要があります。しかし、ブートストラップ フレームワークでは、ul.list-group に p.list-group を使用する別の実装方法が使用されます。望ましい効果。

実装原則:

a.list-group-item を使用する場合、スタイルをある程度加工する必要があります。たとえば、次のようなスタイルです。テキスト、フローティング効果の追加など; 以下は CSS ソース コードです: 

a.list-group-item {
  color: #555;
}
a.list-group-item .list-group-item-heading {
  color: #333;
}
a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}
ログイン後にコピー

リンク リスト グループの適用: 

带链接的列表组
ログイン後にコピー

効果は次のとおりです:

ブートストラップ学習のリストグループコンポーネントの使用方法

カスタマイズされたリスト グループ

ブートストラップ フレームワークは、リンク リスト グループに基づいて 2 つのスタイルを追加します:

.list-group-item -Heading: リスト アイテムのヘッダー スタイルを定義するために使用されます

.list-group-item-text: リスト アイテムのメイン コンテンツを定義するために使用されます

##これら 2 つのスタイルの最大の役割は次のとおりです。開発者がリスト項目のコンテンツをカスタマイズできるようにするため

実装原則:

これら 2 つのスタイルは主に、互換性のない状態でのテキストの色を制御します。以下は CSS ソースです。コード: 

a.list-group-item .list-group-item-heading {
  color: #333;
}

.list-group-item.disabled .list-group-item-heading,
.list-group-item.disabled:hover .list-group-item-heading,
.list-group-item.disabled:focus .list-group-item-heading {
  color: inherit;
}
.list-group-item.disabled .list-group-item-text,
.list-group-item.disabled:hover .list-group-item-text,
.list-group-item.disabled:focus .list-group-item-text {
  color: #777;
}

.list-group-item.active .list-group-item-heading,
.list-group-item.active:hover .list-group-item-heading,
.list-group-item.active:focus .list-group-item-heading,
.list-group-item.active .list-group-item-heading > small,
.list-group-item.active:hover .list-group-item-heading > small,
.list-group-item.active:focus .list-group-item-heading > small,
.list-group-item.active .list-group-item-heading > .small,
.list-group-item.active:hover .list-group-item-heading > .small,
.list-group-item.active:focus .list-group-item-heading > .small {
  color: inherit;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}

.list-group-item-heading {
  margin-top: 0;
  margin-bottom: 5px;
}
.list-group-item-text {
  margin-bottom: 0;
  line-height: 1.3;
}
ログイン後にコピー

カスタム リスト グループの使用 

自定义列表组
ログイン後にコピー

列表项的状态设置

bootstrap框架中也给组合列表项提供了状态效果，特别是链接列表组，实现方法和前面介绍的组件类似，在列表组中只需在对应的列表项中添加类名：.active(表示当前状态)、.disabled（表示禁用状态）

实现原理：

在样式上主要对列表项的背景色和文本做了样式设置，下面是css源码：

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  background-color: #eee;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}
ログイン後にコピー

例子：

列表组状态设置
ログイン後にコピー

效果如下（第三个列表项是禁用状态，鼠标移放在它上面有个禁用图标，这里是直接截的图，看不到这个效果）：

ブートストラップ学習のリストグループコンポーネントの使用方法

多彩列表组

列表组组件和警告组件一样，bootstrap为不同的状态提供了不同的背景色和文本色，可以使用这几个类名定义不同背景色的列表项：

.list-group-item-success:成功 绿色（背景色）

.list-group-item-info:信息 蓝色（背景色）

.list-group-item-warning:警告 黄色（背景色）

.list-group-item-danger:错误 红色（背景色）

实现原理：

这几个类名仅修改了背景色和文本色，对应的源码如下：

.list-group-item-success {
  color: #3c763d;
  background-color: #dff0d8;
}
a.list-group-item-success {
  color: #3c763d;
}
a.list-group-item-success .list-group-item-heading {
  color: inherit;
}
a.list-group-item-success:hover,
a.list-group-item-success:focus {
  color: #3c763d;
  background-color: #d0e9c6;
}
a.list-group-item-success.active,
a.list-group-item-success.active:hover,
a.list-group-item-success.active:focus {
  color: #fff;
  background-color: #3c763d;
  border-color: #3c763d;
}
ログイン後にコピー

其它状态样式代码请查看源码文件,如果想给列表项添加背景色，只需在类.lis-group-item的基础上追加对应的类名即可。

多彩列表组的运用：

多彩列表组
ログイン後にコピー

效果如下：

ブートストラップ学習のリストグループコンポーネントの使用方法

更多编程相关知识，请访问：编程教学！！

以上がブートストラップ学習のリストグループコンポーネントの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
bootstrap コンポーネント
ソース：cnblogs.com
前の記事：Bootstrap のパネル コンポーネントの詳細な分析 次の記事：Bootstrap のメディア オブジェクトを詳しく見る
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Nuxt.js に jQuery をインストールする手順 プロジェクトに jQuery を追加しようとしましたが、定義されていないというエラーが表示されます。 plugins:[{src:'~/plugins/js/svgSprite.j...
から 2023-11-06 16:41:50
0
1
225
npm run devを実行した後でも、Laravel 9はまだApp.cssとApp.jsを見つけることができません Laravel は初めてなので、始める前に Laravel9 のドキュメントを必ずチェックしましたが、見逃した場合に備えて、artisan が提供するリンクに app.css と ...
から 2023-10-26 23:41:22
0
1
489
Bootstrap 4 のグリッド システム ブレークポイントをカスタマイズする デザインにデスクトップからタブレット、または xl から lg までそれぞれ 1280 個のブレークポイントが必要なアプリケーションがあります。ただし、Bootstrap 自体には...
から 2023-10-18 23:01:50
0
2
197
ヘッダー画像、テキスト、ボタンをレスポンシブにする方法 Bootstrap5を使ってWebサイトを作っています。ウェブサイトのヘッダーでは、Bootstrap のカルーセルをヘッダーに使用しています。カルーセル画像では、テキストやボタン...
から 2023-09-17 09:51:15
0
1
283
Bootstrap ナビゲーション バーが正しくレンダリングされないのはなぜですか? Bootstrap4 を使用してナビゲーション バーを作成しようとしていますが、コードが機能しないようです。私のコードはチュートリアルとほぼ同じですが、nav-brand にいくつ...
から 2023-09-16 16:14:06
0
1
522
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！