ホームページ > 記事 > ウェブフロントエンド > ブートストラップはいくつかのリスト スタイルをサポートします
ブートストラップはいくつかのリスト スタイルをサポートします
- 青灯夜游オリジナル
- 2021-11-11 11:27:403861ブラウズ
bootstrap は 6 つのリスト スタイルをサポートします: 1. ul 順序なしリスト; 2. ol 順序付きリスト; 3. 削除されたリスト; 4. インライン リスト (垂直リストを水平リストに変更することを指します)、および箇条書きを削除します。リストを水平方向に表示し続ける; 5. 定義リストを dl; 6. 水平方向の定義リスト。
順序なしリスト
<ul>
<li>…</li>
</ul>
順序付きリスト
<ol>
<li>…</li>
</ol>
定義リスト
<dl>
<dt>…</dt>
<dd>…</dd>
</dl>Bootstrap は、通常の使用法に基づいて 6 形式のリストを提供します。
☑ 順序なしリスト ☑ 順序付きリスト ☑ ポイント リストに移動☑ インラインリスト ☑ 定義リスト ☑ 水平定義リスト 次は、Bootstrap が提供するこれを学びましょう リストの 6 つの使い方
<!DOCTYPE HTML> < html> <head> <meta charset="utf-8"> <title>列表--简介</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <ul> <li>无序列表信息1</li> <li>无序列表信息2</li> <li>无序列表信息3</li> </ul> <ol> <li>有序列表信息1</li> <li>有序列表信息2</li> <li>有序列表信息3</li> </ol> <dl> <dt>定义列表标题</dt> <dd>定义列表信息1</dd> <dd>定义列表信息2</dd> </dl> </body> </html>
リスト -- 順序なしリスト、順序付きリスト
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-bottom: 0;
} ソース コードから、Bootstrap はリストの margin にいくつかの調整を加えただけであることがわかります。
リストのネスト
ブートストラップではリストをネストすることもできます。 リスト -- リストに移動Bootstrap では、デフォルトで、順序なしリスト と 順序付きリスト が箇条書きになっていることがわかります。ただし、実際の作業では、ナビゲーションに順序なしリストを使用する場合など、多くの場合、リストにはこの番号は必要ありません。 Bootstrap は多くの開発者に配慮しており、順序なしリストに「.list-unstyled」というクラス名を追加することでデフォルトのリストスタイルを削除することができます。 /*ソース コードについては、bootstrap.css ファイルの 580 ～ 583 行目をご覧ください*/
.list-unstyled {
padding-left: 0;
list-style: none;
}例からわかるように、項目番号に加えて、デフォルトの left パディングリストの # も含まれます。##Alsocleared0。 List--inline list
Bootstrap はリストと同じように「
.list-inline」というクラス名を追加することでインラインリストを実装します。 垂直リストを水平リストに置き換えます、箇条書き(数字)を削除します、水平表示を維持します。インライン リストは水平方向のナビゲーションを作成するために生まれたとも言えます。 /*bootstrap.css ファイルの 584 ～ 593 行目のソース コードを表示します*/.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}例を見てみましょう:
<ul class="list-inline">
<li>W3cplus</li>
<li>Blog</li>
<li>CSS3</li>
<li>jQuery</li>
<li>PHP</li>
</ul>List--Definition list
定義リストについては、Bootstrap はあまり多くの調整を行わず、
、マージン 、および フォント太字 効果のみを調整しました。 。 /*ソース コードについては、bootstrap.css ファイルの 594 ～ 607 行目をご覧ください*/dl {
margin-top: 0;
margin-bottom: 20px;
}
dt,
dd {
line-height: 1.42857143;
}
dt {
font-weight: bold;
}
dd {
margin-left: 0;
}定義リストの使用については、実際には非常に簡単です。以前の方法と同じです。定義リストの使用:
<dl>
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客</dd>
<dt>seashen.cn</dt>
<dd>一个真心在做HTML5教育的网站</dd>
</dl>List--水平方向の定義リスト
水平方向の定義リスト インライン リストと同様に、Bootstrap はクラス名「##」を追加できます。 #.dl-horizontal
@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-horizontal dd {
margin-left: 180px;
}
}ここにメディア クエリが追加されます。つまり、画面 が 768px より大きい場合にのみ、クラス名「.dl-horizontal」を追加することで、水平方向の定義リスト効果が得られます。主な実装方法: 1. dt を左浮動小数点数に設定し、幅を 160px に設定します 2. dd を左マージンの値 180px に設定して、水平方向の効果を実現します 3. タイトルの幅が 160px を超える場合、3 つの省略記号 が表示され、その使用法は次のとおりです。
<dl class="dl-horizontal">
<dt>W3cplus</dt>
<dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>
<dt>seashen.cn</dt>
<dd>一个专业的HTML5网站</dd>
<dt>我来测试一个标题，我来测试一个标题</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl> ブラウザ画面を縮小すると、水平定義リストは元の状態に戻ります。 推奨学習:「ブートストラップの使用方法のチュートリアル
」以上がブートストラップはいくつかのリスト スタイルをサポートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。