ブートストラップはいくつかのリストスタイルをサポートします-ブートストラップのチュートリアル-php.cn

ブートストラップはいくつかのリストスタイルをサポートします

青灯夜游

リリース： 2021-11-11 11:27:40

オリジナル

3868 人が閲覧しました

bootstrap は 6 つのリストスタイルをサポートします: 1. ul 順序なしリスト; 2. ol 順序付きリスト; 3. 削除されたリスト; 4. インラインリスト (垂直リストを水平リストに変更することを指します)、および箇条書きを削除します。リストを水平方向に表示し続ける; 5. 定義リストを dl; 6. 水平方向の定義リスト。

ブートストラップはいくつかのリストスタイルをサポートします

#このチュートリアルの動作環境: Windows7 システム、bootrap3.3.7 バージョン、DELL G3 コンピューター

リスト--はじめに

HTML ドキュメントには、順序付きリスト、順序なしリスト、定義リストという 3 つの主なタイプのリスト構造があります。使用される特定のタグは次のように説明されます。

順序なしリスト

<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>

ログイン後にコピー

リスト -- 順序なしリスト、順序付きリスト

ブートストラップはいくつかのリストスタイルをサポートします

順序なしリスト順序付きリストの使用法は通常と同じです。 use (順序なしリストは ul を使用し、順序付きリストは ol タグを使用します)。スタイルの点では、Bootstrap はこれに基づいていくつかの微妙な最適化を行っているだけです。ソースコードについては bootstrap.css を参照してください。ファイルの 569 行目から 579 行目:

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

" は、定義リストの水平表示効果を実装します。 /*ソースコードについては、bootstrap.css ファイルの 608 ～ 621 行目をご覧ください*/

@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 サイトの他の関連記事を参照してください。