Bootstrap でのリストグループ、ページング、プログレスバーコンポーネントの使用法の簡単な分析-ブートストラップのチュートリアル-php.cn

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

青灯夜游

リリース： 2022-05-10 21:19:21

転載

2916 人が閲覧しました

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-horizontal を追加して、すべてのブレークポイントにわたってリストグループ項目のレイアウトを垂直から水平に変更します。
いくつかのユーティリティを使用して、任意のリストグループ項目にバッジを追加して、未読数やアクティビティなどを表示します。

コード演習:

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