ホームページ > 記事 > ウェブフロントエンド > Bootstrap でのリスト グループ、ページング、プログレス バー コンポーネントの使用法の簡単な分析
Bootstrap でリスト グループ、ページング、プログレス バーを実装するにはどうすればよいですか?次の記事では、Bootstrap でのリスト グループ、ページング、プログレス バー コンポーネントの使用方法を紹介します。
.active
を a.list-group-item
に変更して、現在アクティブな選択を示します。 [関連する推奨事項: "bootstrap チュートリアル "].disabled
を .list-group-item
に追加して、無効になっているように表示します<a>
または <button>
を使用して、.list-group-item-action# を追加して、ホバー、無効、アクティブ状態のアクション可能項目を作成します。 ##リスト グループ アイテム
を追加して、いくつかの境界線と丸い角を削除し、リスト グループを親コンテナー (カードなど) の端から端までレンダリングします。
を追加して、すべてのブレークポイントにわたってリスト グループ項目のレイアウトを垂直から水平に変更します。
<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>プログレス バー
を使用します。
を使用します。
その幅は、インライン スタイル、ユーティリティ クラス、またはカスタム CSS プロパティを通じて設定する必要があります。
要素内にテキストを追加することで、進行状況バーにラベルを追加できます。
の
height 値を設定します。そのため、その値を変更すると、内部の
.progress-bar が自動的にサイズを調整します。それに応じて。
に
.progress-bar-striped を追加して、ストライプ スタイルを追加します。これは、プログレス バーの CSS のグラデーション機能によって行われます。 . ) は、背景色にストライプ効果を適用することで実現されます。
に
.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 サイトの他の関連記事を参照してください。