Bootstrap でのリスト グループ、ページング、プログレス バー コンポーネントの使用法の簡単な分析

Bootstrap でリスト グループ、ページング、プログレス バーを実装するにはどうすればよいですか?次の記事では、Bootstrap でのリスト グループ、ページング、プログレス バー コンポーネントの使用方法を紹介します。

リスト グループ

• .list-group を使用してリスト グループを選択します
• Add .active を a.list-group-item に変更して、現在アクティブな選択を示します。 [関連する推奨事項: "bootstrap チュートリアル "]
• .disabled を .list-group-item に追加して、無効になっているように表示します
• <a> または <button> を使用して、.list-group-item-action# を追加して、ホバー、無効、アクティブ状態のアクション可能項目を作成します。 ##リスト グループ アイテム
• .list-group-flush を追加して、いくつかの境界線と丸い角を削除し、リスト グループを親コンテナー (カードなど) の端から端までレンダリングします。
• .list-group-horizo​​ntal を追加して、すべてのブレークポイントにわたってリスト グループ項目のレイアウトを垂直から水平に変更します。
コンテキスト クラスを使用して、状態スタイルと背景を設定します。リスト項目の色
• いくつかのユーティリティを使用して、任意のリスト グループ項目にバッジを追加して、未読数やアクティビティなどを表示します。

コード演習:

		<ul class="list-group">
			<li class="list-group-item active">列表组一</li>
			<li class="list-group-item">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>
		<br />
		<div class="list-group list-group-flush">
			<a href="#" class="list-group-item active list-group-item-action">列表组一</a>
			<a href="#" class="list-group-item list-group-item-action">列表组二</a>
			<a href="#" class="list-group-item disabled list-group-item-action">列表组三</a>
		</div>
		<br />
		<ul class="list-group list-group-horizontal-sm">
			<li class="list-group-item active">列表组一</li>
			<li class="list-group-item list-group-item-danger">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>
		<br />
		<ul class="list-group">
			<li class="list-group-item d-flex justify-content-between align-items-center">列表组一
			<span class="badge badge-danger">标记</span></li>
			<li class="list-group-item">列表组二</li>
			<li class="list-group-item disabled">列表组三</li>
		</ul>

Pagination

.pagination を追加し、単語タグ .page-item を追加し、リンク タグ .page-linkあなた
.pagination-lg または .pagination-sm を追加して、サイズのページング効果を設定できます .justify-content-* を追加して、中央、左、右の設定を行うことができます。 コード演習:

		<ul class="pagination pagination-sm justify-content-center">
			<li class="page-item"><a href="#" class="page-link">首页</a></li>
			<li class="page-item"><a href="#" class="page-link">1</a></li>
			<li class="page-item"><a href="#" class="page-link">2</a></li>
			<li class="page-item"><a href="#" class="page-link">下一页</a></li>
		</ul>

プログレス バー

プログレス バーの最大値を示すために、最も外側の要素として
• .progress を使用します。
これまでの進行状況を示すために、内部的に
• .progress-bar を使用します。
• .progress-bar その幅は、インライン スタイル、ユーティリティ クラス、またはカスタム CSS プロパティを通じて設定する必要があります。
• .progress-bar 要素内にテキストを追加することで、進行状況バーにラベルを追加できます。
は
• .progress の height 値を設定します。そのため、その値を変更すると、内部の .progress-bar が自動的にサイズを調整します。それに応じて。
単一の進行状況バーの外観は、背景色に関連するツール クラスを使用して変更できます。
• 必要に応じて、複数の進行状況バーを進行状況バー (進行状況) コンポーネント内に追加できます。
• 任意の
• .progress-bar に .progress-bar-striped を追加して、ストライプ スタイルを追加します。これは、プログレス バーの CSS のグラデーション機能によって行われます。 . ) は、背景色にストライプ効果を適用することで実現されます。
縞模様のグラデーションにはアニメーション効果を持たせることもできます。
• .progress-bar に .progress-bar-animated を追加して、CSS3 アニメーション機能を使用して、右から左に回転する縞模様のアニメーション効果を追加します。

コードの練習:

		<div class="progress">
			<div class="progress-bar w-50 ">
			</div>
		</div>
		<br />
		<div class="progress" style="height: 30px;">
			<div class="progress-bar bg-danger" style="width: 35%;">
				30%
			</div>
		</div>
		<br>
		<div class="progress">
			<div class="progress-bar bg-success w-25"></div>
			<div class="progress-bar bg-danger w-25"></div>
			<div class="progress-bar bg-info w-25"></div>
		</div>
		<br />
		<div class="progress">
			<div class="progress-bar w-50 bg-info progress-bar-striped progress-bar-animated">
			</div>
		</div>

ブートストラップの詳細については、

ブートストラップの基本チュートリアル を参照してください。 ！

以上がBootstrap でのリスト グループ、ページング、プログレス バー コンポーネントの使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。