ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >bootstrap4でプログレスバーを設定する方法
bootstrap4でプログレスバーを設定する方法
- (*-*)浩オリジナル
- 2019-07-12 10:05:392756ブラウズ
ブートストラップ コンポーネントは、フロントエンド開発でよく使用されます。今日、この記事では、ブートストラップ コンポーネントのプログレス バーの基本的な使用法を説明します。必要な友人は参照してください
進行状況バーの基本的な使用法 (推奨される学習: Bootstrap ビデオ チュートリアル)
主に .progress と .progress に依存します。 -bar
aria-valuenow 現在の値を示します
aria-valuemin は最小値を示します
aria-valuemax は最大値を示します
width:60 % は現在のプログレス バーの位置を示します。
プログレス バー ユーザー タスクの完了プロセスを表示できます。
基本的な進行状況バーを作成する手順は次のとおりです:
を .progress クラスに追加します。
次に、上記の
内に、クラス .progress-bar を持つ空の
を追加します。
幅をパーセンテージで表すスタイル属性を追加します。たとえば、style="width:70%" は、進行状況バーが 70% の位置にあることを意味します。
例:
<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div>
Bootstrap に関連する技術的な記事については、Bootstrap チュートリアル 列にアクセスして学習してください。
以上がbootstrap4でプログレスバーを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。