この記事では、Bootstrap のプログレス バー コンポーネントについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。
Web ページでは、読み込みステータスなどのスコアリング システムなど、プログレス バーの効果は珍しいことではありません。シンプルで柔軟なプログレス バーを通じて、現在のワークフローやアクションを改善して、リアルタイムのフィードバックを提供できます。 Bootstrap のプログレス バー コンポーネントを見てみましょう。
関連する推奨事項: 「bootstrap チュートリアル 」
基本スタイル
Bootstrap フレームワークは、進行状況バーの基本スタイルを提供します。 、幅 100% の背景色、次に完了の進行状況を示すハイライト色です。実はこのようなプログレスバーは非常に簡単に作ることができます 一般的にはコンテナを2つ使います 外側のコンテナは一定の幅を持ち背景色を設定します 子要素で幅を設定します 例えば完成度は30です% (つまり、親コンテナの幅の比率) ) を設定し、そのハイライトの背景色を設定します。
ブートストラップ フレームワークもこの方法で実装されます。これには 2 つのコンテナが用意されています。外側のコンテナは「progress」スタイル、サブコンテナは「progress-bar」スタイルを使用します。このうち、progress はプログレス バーのコンテナ スタイルを設定するために使用され、progress-bar はプログレス バーの進行状況を制限するために使用されます。
.progress {
height: 20px;
margin-bottom: 20px;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #428bca;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
transition: width .6s ease;
}role 属性は、検索エンジンに次のことを伝えます。 p の機能は進行状況バーです。aria-valuenow="40" 属性は、現在の進行状況バーに進行状況が 40% であることを示します。aria-valuemin="0"属性は進行状況バーの最小値が 0% であることを示します; aria-valuemax="100" プロパティは進行状況バーの最大値が 100%であることを示します
色付きのプログレス バー
ブートストラップ フレームワークのプログレス バーと警告メッセージ ボックス 同様に、ユーザーのエクスペリエンスを向上させるために、さまざまな状態に応じてさまざまなプログレス バーの色が構成されています。ここでは色付きプログレスバーと呼び、主に以下の 4 種類があります。
☑ progress-bar-info: 情報のプログレスバーを表します。プログレスバーの色は青です。 ☑ progress-bar-success: 成功した進行状況バーを示します。進行状況バーの色は緑色です。#☑ progress-bar-warning: 警告の進行状況バーを示します。進行状況バーの色は黄色です
☑ progress-bar-danger: エラーを示します。 プログレス バー、プログレス バーの色は赤です。
具体的な使用法は非常に簡単で、基本的なクラス名に対応するクラス名を追加するだけです。プログレス バー。基本的なプログレス バーと比較して、カラー プログレス バーはプログレス バーの色です。特定の変更
<div class="progress">
<div class="progress-bar" style="width:40%"></div>
</div><div> <div> <span>40% Complete</span> </div> </div>
縞模様のプログレス バー
Bootstrap フレームワークでは、色付きのプログレス バーを提供するだけでなく、縞模様のプログレス バーも提供されます。この縞模様のプログレス バーは、画像を使用せずに CSS3 の線形グラデーションを使用して実装されています。 Bootstrap フレームワークで縞模様のプログレス バーを使用するには、クラス名「progress-striped」をプログレス バーのコンテナ「progress」に追加するだけです。もちろん、プログレス バーのストライプに色の効果を持たせたい場合は、色付きのプログレスと同様に、クラス名「progress-striped」をプログレス バーに追加するだけです。対応する色のクラス名をバーに追加します。[注] プログレス バーにストライプ効果を作成できます。 IE9 ブラウザはそれをサポートしていません
.progress-bar-success {
background-color: #5cb85c;
}
.progress-bar-info {
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: #d9534f;
}
<div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div> <div> <div></div> </div>
.progress-striped .progress-bar {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
#Dynamic Stripes
[注意] IE9 ブラウザは .progress-striped .progress-bar-success {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-info {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-warning {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
.progress-striped .progress-bar-danger {
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
をサポートしていません。ブートストラップ フレームワークでは、プログレス バー コンテナー「progress」にクラス名「active」を追加し、ドキュメントのロード時に「progress-bar-stripes」アニメーションを有効にすることで、右から右に移動するアニメーション効果を表示します。 <div class="progress progress-striped">
<div class="progress-bar" style="width:70%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" style="width:60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" style="width:80%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width:50%"></div>
</div>@-webkit-keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
カスケード進行状況バー
複数のプログレスバーを同じ .progress
に配置して、積み重ねて表示します.progress.active .progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
[注]カスケード進行状況バーの合計は 100% を超えることはできません
<div> <div></div> <div></div> <div></div> </div>
提示标签
在实际开发中，有很多时候是需要在进度条中直接用相关的数值向用户传递完成的进度值，Bootstrap考虑了这种使用场景，只需要在进度条中添加需要的值
<div> <div>20%</div> </div>
在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置 min-width 属性
<div> <div>0%</div> </div> <div> <div>0%</div> </div> <div> <div>1%</div> </div> <div> <div>1%</div> </div>
更多编程相关知识，请访问：编程视频！！
以上がBootstrap のプログレスバーコンポーネントの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ブートストラップ：Webデザインを簡単にしますApr 13, 2025 am 12:10 AMWebデザインがブートストラップを簡単にするものは何ですか？そのプリセットコンポーネント、レスポンシブデザイン、豊富なコミュニティサポート。 1）プリセットコンポーネントライブラリとスタイルにより、開発者は複雑なCSSコードの作成を避けることができます。 2）ビルトイングリッドシステムは、レスポンシブレイアウトの作成を簡素化します。 3）コミュニティサポートは、豊富なリソースとソリューションを提供します。
Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AMBootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。
ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AMBootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。
ブートストラップディープダイブ：レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AMブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス（COL-SM-6など）を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント（SM、MD、LGなど）を使用して、異なる画面サイズの下のレイアウトを定義します。
ブートストラップインタビューの質問：夢のフロントエンドの仕事を着陸させますApr 09, 2025 am 12:14 AMBootstrapは、レスポンシブWebサイトとアプリケーションを迅速に開発するためのオープンソースのフロントエンドフレームワークです。 1.レスポンシブ設計、一貫したUIコンポーネント、迅速な発展の利点を提供します。 2。グリッドシステムは、12列構造に基づいてフレックスボックスレイアウトを使用し、.container、.row、.col-sm-6などのクラスを通じて実装されています。 3.カスタムスタイルは、SASS変数を変更するか、CSSを上書きすることで実装できます。 4.一般的に使用されるJavaScriptコンポーネントには、モーダルボックス、カルーセル図、折りたたみが含まれます。 5.最適化パフォーマンスは、必要なコンポーネントのみをロードし、CDNを使用し、マージファイルを圧縮することで実現できます。
Bootstrap＆JavaScriptの統合：動的な機能と機能Apr 08, 2025 am 12:10 AMBootstrapとJavaScriptをシームレスに統合して、Webページに動的な機能を与えることができます。 1）JavaScriptを使用して、モーダルボックスやナビゲーションバーなどのブートストラップコンポーネントを操作します。 2）jQueryが正しくロードされていることを確認し、一般的な統合の問題を回避します。 3）イベント監視とDOM操作を通じて、複雑なユーザーの相互作用と動的効果を実現します。
ブートストラップ検索バーを取得する方法Apr 07, 2025 pm 03:33 PMブートストラップを使用して検索バーの値を取得する方法：検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。
ブートストラップに写真を挿入する方法Apr 07, 2025 pm 03:30 PMブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
