Bootstrap リスト グループの詳細な紹介

<p><span style="font-size: 14px;">この章ではリストグループについて説明します。リスト コンポーネントは、複雑なカスタム コンテンツをリストの形式で表示するために使用されます。基本的なリスト グループを作成する手順は次のとおりです: </span></p> <p><span style="font-size: 14px;">クラス .list-group を要素 ff6d136ddc5fdfeffaf53ff6ee95f185 に追加します。 </span></p> <p><span style="font-size: 14px;">クラス .list-group-item を 25edfb22a4f469ecb59f1190150159c6 に追加します。 </span></p> <p><span style="font-size: 14px;">次の例はこれを示しています: </span></p> <p><span style="font-size: 14px;">例</span></p><pre class="brush:cpp;toolbar:false"><ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item">免费 Window 空间托管</li> <li class="list-group-item">图像的数量</li> <li class="list-group-item">24*7 支持</li> <li class="list-group-item">每年更新成本</li></ul></pre><h3>基本リストグループ</h3> <p> 基本リストグループは、リスト記号が削除され、いくつかの特定のスタイルが装備されたリスト項目のように見えます。 Bootstrap フレームワークの基本的なリスト グループは主に 2 つの部分で構成されます: </p> <p> ☑ list-group: リスト グループ コンテナ、一般的に使用されるのは ul 要素ですが、もちろん ol 要素や div 要素でも構いません </p> <p> ☑ list-group-item : list item、一般的に使用されるのは li 要素ですが、もちろん div 要素にすることもできます</p> <p>基本的なリスト グループの場合、スタイルの設定はあまりなく、主に間隔、境界線、角の丸めなどを設定します</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">.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; }</pre></div> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">86ba7a910db1f851ade673353645313df496da2c0df4bc6d16ea49188db2a380HTMLbed06894275b65c1ab86501b08a632eb f496da2c0df4bc6d16ea49188db2a380CSSbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a380javascriptbed06894275b65c1ab86501b08a632eb f496da2c0df4bc6d16ea49188db2a380bootstrapbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a380jquerybed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689</pre></div> <h3>badge</h3> <p> バッジ付きリストグループは、実際にはBootstrapフレームワークのバッジコンポーネントと基本的なリストグループを組み合わせたエフェクトです。具体的な方法は、「list-group-item」にバッジコンポーネント「badge」を追加するだけです。もちろん、バッジを2つ設定するだけです。同時にリスト項目に表示される場合、それらの間の距離も設定されます </p> <p></p> <pre class="brush:php;toolbar:false">.list-group-item > .badge {   float: right; }.list-group-item > .badge + .badge {   margin-right: 5px; }</pre> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">86ba7a910db1f851ade673353645313df496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7023354bdf357c58b8a65c66d7c19c8e4d114HTMLbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7026054bdf357c58b8a65c66d7c19c8e4d114CSSbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d70219254bdf357c58b8a65c66d7c19c8e4d114javascriptbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7022054bdf357c58b8a65c66d7c19c8e4d114bootstrapbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7022654bdf357c58b8a65c66d7c19c8e4d114jquerybed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689</pre></div> <div class="cnblogs_code"></div> <p><br> </p> <p>Link</p> <h3> 代わりに <code>3499910bf9dac5ae3c52d5ede7383485</code> タグを使用してください<code>25edfb22a4f469ecb59f1190150159c6</code> タグのすべてがリンクであるリスト グループを形成できます (<code>ff6d136ddc5fdfeffaf53ff6ee95f185</code> タグは <code><</code> タグに置き換える必要があることにも注意してください)。 div> タグ）。リストグループ内の各要素に親要素を追加する必要はありません</h3> <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> <code>3499910bf9dac5ae3c52d5ede7383485</code> 标签代替 <code>25edfb22a4f469ecb59f1190150159c6</code> 标签可以组成一个全部是链接的列表组（还要注意的是，需要将 <code>ff6d136ddc5fdfeffaf53ff6ee95f185</code> 标签替换为 <code>dc6dce4a544fdca2df29d5ac0ea9906b</code> 标签）。没必要给列表组中的每个元素都加一个父元素<div class="cnblogs_code"><pre class="brush:php;toolbar:false">1f2e350fb86f4fbcf304a3170516954f   c6c9c9b8b3173ba91b723c08e0d6be97HTML5db79b134e9f6b82c0b36e0489ee08ed   a16100a6f9717ef0222dddbefdffc896CSS5db79b134e9f6b82c0b36e0489ee08ed   a16100a6f9717ef0222dddbefdffc896javascript5db79b134e9f6b82c0b36e0489ee08ed   10520cbff229fcc96105ca9518f38965bootstrap5db79b134e9f6b82c0b36e0489ee08ed   a16100a6f9717ef0222dddbefdffc896jquery5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68</pre></div> <div class="cnblogs_code"><pre class="brush:php;toolbar:false">1f2e350fb86f4fbcf304a3170516954f   6b50b67c135ab2e62492341b13f29373HTML65281c5ac262bf6d81768915a4a77ac0   d68a9ee5ca1160520ed600ec9e3a7af9CSS65281c5ac262bf6d81768915a4a77ac0   d68a9ee5ca1160520ed600ec9e3a7af9javascript65281c5ac262bf6d81768915a4a77ac0   d68a9ee5ca1160520ed600ec9e3a7af9bootstrap65281c5ac262bf6d81768915a4a77ac0   d68a9ee5ca1160520ed600ec9e3a7af9jquery65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68</pre></div> <p><br></p> <p> </p> <h3>按钮</h3> <p>　　列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <code>dc6dce4a544fdca2df29d5ac0ea9906b</code> 而不能用 <code>ff6d136ddc5fdfeffaf53ff6ee95f185</code> 了），并且无需为每个按钮单独包裹一个父元素。<span class="text-danger">注意不要使用标准的 <code>.btn</code></span></p> <pre class="brush:php;toolbar:false">1f2e350fb86f4fbcf304a3170516954f1c6fe066df748bd658464a725be6fb6408a61dbdfb70aa5a89a93f2eeab2c3a6HTML0f6dfd1e3624ce5465eb402e300e01ae5dbe51645de9f2b73a7c61b3ea42b899HTML被认为是前端知识体系里面最简单的知识，几年前，很多人都推荐在W3C上学习个几天就能够基本掌握。但随着HTML5和移动端的强势发展，HTML的技能点也越来越难。世上无难事，好学好总结...94b3e26ee717c64999d7867364b1b4a35db79b134e9f6b82c0b36e0489ee08ed1c6fe066df748bd658464a725be6fb6408a61dbdfb70aa5a89a93f2eeab2c3a6CSS0f6dfd1e3624ce5465eb402e300e01ae5dbe51645de9f2b73a7c61b3ea42b899CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从CSS禅意花园开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白...94b3e26ee717c64999d7867364b1b4a35db79b134e9f6b82c0b36e0489ee08ed1c6fe066df748bd658464a725be6fb6408a61dbdfb70aa5a89a93f2eeab2c3a6javascript0f6dfd1e3624ce5465eb402e300e01ae5dbe51645de9f2b73a7c61b3ea42b899javascript就如同魔法一样，它是一门充满活力、简单易用的语言，又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者，如果没有认真学习的话，也无法真正理解它们，这就是javascript的矛盾之处。由于javascript不必理解就可以使用，因此通常来说很难真正理解语言本身，这就是我们面临的挑战。不满足于只是让代码正常工作，而是想要弄清楚为什么，勇于挑战这条崎岖颠簸的少有人走的路，拥抱整个javascript...94b3e26ee717c64999d7867364b1b4a35db79b134e9f6b82c0b36e0489ee08ed    16b28748ea4df4d9c2150843fecfba68</pre> <div class="cnblogs_code"></div> <p><br> </p> <p>Button</p> <h3> リストグループ内の要素は直接ボタンにすることもできます（これは親要素も意味します）要素は <code>ff6d136ddc5fdfeffaf53ff6ee95f185</code> ではなく <code>dc6dce4a544fdca2df29d5ac0ea9906b</code> である必要があります)、ボタンごとに個別の親要素をラップする必要はありません。 <span class="text-danger">標準の <code>.btn</code> クラスを使用しないように注意してください</span> </h3> <p></p> <pre class="brush:php;toolbar:false">.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; }</pre> <p></p> <p></p> <p></p> <div class="cnblogs_code">カスタマイズされたコンテンツ</div> <p> Bootstrap ボックスはベースに追加されますリンク リスト グループの 2 つの新しいスタイルが追加されました: <br></p> ☑ list-group-item-Heading: リスト項目ヘッダー スタイルの定義に使用されます <p></p> ☑ list-group-item-text: のメイン コンテンツを定義するために使用されますlist item <h3></h3> これら 2 つのスタイル 最大の役割は、開発者がリスト アイテムのコンテンツをカスタマイズできるようにすることです<p></p> <pre class="brush:php;toolbar:false">1f2e350fb86f4fbcf304a3170516954f   c6c9c9b8b3173ba91b723c08e0d6be97HTML5db79b134e9f6b82c0b36e0489ee08ed   a16100a6f9717ef0222dddbefdffc896CSS5db79b134e9f6b82c0b36e0489ee08ed   a16100a6f9717ef0222dddbefdffc896javascript5db79b134e9f6b82c0b36e0489ee08ed   10520cbff229fcc96105ca9518f38965bootstrap5db79b134e9f6b82c0b36e0489ee08ed   240d28e046b15bac6aa66060d9749335jquery5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68</pre> <p></p> <p></p> <div class="cnblogs_code"></div> <div class="cnblogs_code">状態設定</div> <p> Bootstrap フレームワークは、結合されたリスト アイテム、特にリンク リスト グループにステータス効果を提供します。共通ステータスや無効ステータスなど。実装方法は先ほど紹介したコンポーネントと同様で、リストグループ内で対応するリスト項目にクラス名を追加するだけです: <br></p> ☑ active: 現在の状態を示します<p></p> ☑ disabled: 無効な状態を示します<h3></h3>。 <pre class="brush:php;toolbar:false">1f2e350fb86f4fbcf304a3170516954f 1c6fe066df748bd658464a725be6fb64默认5db79b134e9f6b82c0b36e0489ee08ed 564697e6951cbe44a8c1e129362f7453成功5db79b134e9f6b82c0b36e0489ee08ed e9c1f721ffe69308cd05e752fe40ea9b信息5db79b134e9f6b82c0b36e0489ee08ed b35bfd6cac3e90ee9e8d9ce873ad6b28警告5db79b134e9f6b82c0b36e0489ee08ed b650cad83cd8011e65e52f0c389d58a7错误5db79b134e9f6b82c0b36e0489ee08ed 16b28748ea4df4d9c2150843fecfba68</pre> <p></p>rrreee<p></p> <p> ☑ list -group-item-success: 成功、背景色は緑です</p> <p> ☑ list-group-item-info: 情報、背景色は青です</p> <p> ☑ list-group-item-warning:警告、背景色は黄色です</p> <p> ☑ list -group-item-danger: エラー、背景色は赤色です</p> <div class="cnblogs_code"> リスト項目に背景色を追加したい場合は、対応するクラス名を「list-group-item」の基礎</div>🎜rrreee🎜

以上がBootstrap リスト グループの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。