ホームページ  >  記事  >  ウェブフロントエンド  >  Bootstrap でのリスト グループ、ページング、プログレス バー コンポーネントの使用法の簡単な分析

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

青灯夜游
青灯夜游転載
2022-05-09 21:33:482877ブラウズ

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 要素内にテキストを追加することで、進行状況バーにラベルを追加できます。
  • .progressheight 値を設定します。そのため、その値を変更すると、内部の .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 サイトの他の関連記事を参照してください。

声明:
この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。