この記事では、Bootstrap のリスト グループについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
リスト グループは、ブートストラップ フレームワークの新しいコンポーネントです。リスト、垂直ナビゲーション、その他の効果の作成に使用できます。また、他のコンポーネントと併用して、より美しいコンポーネントです。関連する推奨事項: "bootstrap チュートリアル"
基本リスト グループ
基本リスト グループは、リスト シンボルが削除され、いくつかの特定のスタイルが装備されたリスト項目のように見えます。 Bootstrap フレームワークの基本的なリスト グループは主に 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;
}<ul class="list-group">
<li class="list-group-item">HTML</li>
<li class="list-group-item">CSS</li>
<li class="list-group-item">javascript</li>
<li class="list-group-item">bootstrap</li>
<li class="list-group-item">jquery</li>
</ul>
##バッジ
バッジ付きのリスト グループは、実際にはバッジ コンポーネントの組み合わせです。 Bootstrap フレームワークと基本リスト グループの効果を組み合わせたものです。具体的な方法は非常に簡単で、「list-group-item」にバッジコンポーネント「badge」を追加するだけです <p></p> 原理は非常に単純で、バッジに適切なフロートを設定するだけです。もちろん、同時に 2 つのバッジがある場合は、リスト項目が表示されるときに、それらの間の距離も設定されます。#
.list-group-item > .badge {
float: right;
}
.list-group-item > .badge + .badge {
margin-right: 5px;
}<ul class="list-group">
<li class="list-group-item">
<span class="badge">33</span>HTML
</li>
<li class="list-group-item">
<span class="badge">60</span>CSS
</li>
<li class="list-group-item">
<span class="badge">192</span>javascript
</li>
<li class="list-group-item">
<span class="badge">20</span>bootstrap
</li>
<li class="list-group-item">
<span class="badge">26</span>jquery
</li>
</ul>
タグの代わりに <a> タグを使用すると、すべてがリンクであるリスト グループを形成できます (<code><ul> タグは <code><p></p> タグに置き換える必要があります)。リスト グループ内の各要素に親要素を追加する必要はありません<pre class='brush:php;toolbar:false;'>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;
}</pre><pre class='brush:php;toolbar:false;'><div class="list-group">
<a href="#" class="list-group-item ">HTML</a>
<a href="#" class="list-group-item">CSS</a>
<a href="#" class="list-group-item">javascript</a>
<a href="#" class="list-group-item active">bootstrap</a>
<a href="#" class="list-group-item">jquery</a>
</div></pre>
リスト グループ内の要素また、直接ボタンにすることもできます (これは、親要素が
ではなく <p></p> である必要があることも意味します)。別個のボタンをラップする必要はありません。各ボタンの親要素。 標準の .btn クラス #<pre class='brush:php;toolbar:false;'><div class="list-group">
<button type="button" class="list-group-item ">HTML</button>
<button type="button" class="list-group-item">CSS</button>
<button type="button" class="list-group-item">javascript</button>
<button type="button" class="list-group-item">bootstrap</button>
<button type="button" class="list-group-item">jquery</button>
</div></pre>
カスタマイズされたコンテンツ
# を使用しないように注意してください。 ## ブートストラップ ボックスは、リンク リスト グループに基づいて 2 つの新しいスタイルを追加します: ☑ list-group-item-Heading: リスト項目ヘッダー スタイルの定義に使用されます
☑ list-group - item-text: リスト item のメイン コンテンツを定義するために使用されます。
これら 2 つのスタイルの最大の役割は、開発者がリスト item
<div class="list-group">
<a href="##" class="list-group-item">
<h4 id="HTML">HTML</h4>
<p class="list-group-item-text">HTML被认为是前端知识体系里面最简单的知识，几年前，很多人都推荐在W3C上学习个几天就能够基本掌握。但随着HTML5和移动端的强势发展，HTML的技能点也越来越难。世上无难事，好学好总结...</p>
</a>
<a href="##" class="list-group-item">
<h4 id="CSS">CSS</h4>
<p class="list-group-item-text">CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从CSS禅意花园开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白...</p>
</a>
<a href="##" class="list-group-item">
<h4 id="javascript">javascript</h4>
<p class="list-group-item-text">javascript就如同魔法一样，它是一门充满活力、简单易用的语言，又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者，如果没有认真学习的话，也无法真正理解它们，这就是javascript的矛盾之处。由于javascript不必理解就可以使用，因此通常来说很难真正理解语言本身，这就是我们面临的挑战。不满足于只是让代码正常工作，而是想要弄清楚为什么，勇于挑战这条崎岖颠簸的少有人走的路，拥抱整个javascript...</p>
</a>
</div><p></p># # のコンテンツをカスタマイズできるようにすることです。 <p></p>#状態設定
☑ active: 現在の状態を示します
☑無効: 無効な状態を示します.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;
}<div class="list-group"> <a href="#" class="list-group-item ">HTML</a> <a href="#" class="list-group-item">CSS</a> <a href="#" class="list-group-item">javascript</a> <a href="#" class="list-group-item active">bootstrap</a> <a href="#" class="list-group-item disabled">jquery</a> </div><p></p> <p></p>カラフルなリスト グループ
☑ list-group-item-success: 成功、背景色は緑です
☑ list-group-item-info : 情報、背景色は青です# ☑ list-group-item-warning: 警告、背景色は黄色です
# ☑ list-group-item-danger: エラー、背景色は赤 <p></p> リスト項目に背景色を追加したい場合は、「list-group-item」に基づいて対応するクラス名を追加するだけです##<div class="list-group">
<a href="##" class="list-group-item">默认</a>
<a href="##" class="list-group-item list-group-item-success">成功</a>
<a href="##" class="list-group-item list-group-item-info">信息</a>
<a href="##" class="list-group-item list-group-item-warning">警告</a>
<a href="##" class="list-group-item list-group-item-danger">错误</a>
</div><p></p>
#詳細 プログラミング関連の知識については、
プログラミング ビデオをご覧ください。 ！
以上がBootstrap でのリスト グループの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AMBootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。
ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AMBootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。
ブートストラップディープダイブ：レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AMブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス（COL-SM-6など）を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント（SM、MD、LGなど）を使用して、異なる画面サイズの下のレイアウトを定義します。
ブートストラップインタビューの質問：夢のフロントエンドの仕事を着陸させますApr 09, 2025 am 12:14 AMBootstrapは、レスポンシブWebサイトとアプリケーションを迅速に開発するためのオープンソースのフロントエンドフレームワークです。 1.レスポンシブ設計、一貫したUIコンポーネント、迅速な発展の利点を提供します。 2。グリッドシステムは、12列構造に基づいてフレックスボックスレイアウトを使用し、.container、.row、.col-sm-6などのクラスを通じて実装されています。 3.カスタムスタイルは、SASS変数を変更するか、CSSを上書きすることで実装できます。 4.一般的に使用されるJavaScriptコンポーネントには、モーダルボックス、カルーセル図、折りたたみが含まれます。 5.最適化パフォーマンスは、必要なコンポーネントのみをロードし、CDNを使用し、マージファイルを圧縮することで実現できます。
Bootstrap＆JavaScriptの統合：動的な機能と機能Apr 08, 2025 am 12:10 AMBootstrapとJavaScriptをシームレスに統合して、Webページに動的な機能を与えることができます。 1）JavaScriptを使用して、モーダルボックスやナビゲーションバーなどのブートストラップコンポーネントを操作します。 2）jQueryが正しくロードされていることを確認し、一般的な統合の問題を回避します。 3）イベント監視とDOM操作を通じて、複雑なユーザーの相互作用と動的効果を実現します。
ブートストラップ検索バーを取得する方法Apr 07, 2025 pm 03:33 PMブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。
ブートストラップに写真を挿入する方法Apr 07, 2025 pm 03:30 PMブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ブートストラップのフレームワークをセットアップする方法Apr 07, 2025 pm 03:27 PMBootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
メモ帳++7.3.1
使いやすく無料のコードエディター
Dreamweaver Mac版
ビジュアル Web 開発ツール
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
