-
Bootstrap コース
Bootstrap CSS
- Bootstrap CSS 概要
- Bootstrap グリッド方式
- Bootstrap 組版
- Bootstrap コード
- Bootstrap テーブル
- Bootstrap フォーム
- Bootstrap プッシュボタン
- Bootstrap 絵
- Bootstrap 補助クラス
- Bootstrap レスポンシブユーティリティ
Bootstrap レイアウトコンポーネント
- Bootstrap フォントのアイコン
- Bootstrap ドロップダウンメニュー
- Bootstrap ボタングループ
- Bootstrap ボタンのドロップダウンメニュー
- Bootstrap 入力ボックスグループ
- Bootstrap ナビゲーション要素
- Bootstrap ナビゲーションバー
- Bootstrap パン粉
- Bootstrap ページング
- Bootstrap ラベル
- Bootstrap バッジ
- Bootstrap 大画面
- Bootstrap ページタイトル
- Bootstrap サムネイル
- Bootstrap 警告
- Bootstrap プログレスバー
- Bootstrap マルチメディアオブジェクト
- Bootstrap 一覧グループ
- Bootstrap パネル
- Bootstrap Wells
Bootstrap ウィジェット
- Bootstrap プラグインの概要
- Bootstrap 転移効果
- Bootstrap モーダルボックス
- Bootstrap ドロップダウンメニュー
- Bootstrap スクロールモニター
- Bootstrap タブ
- Bootstrap ツールヒント
- Bootstrap ポップアップボックス
- Bootstrap 警告ボックス
- Bootstrap プッシュボタン
- Bootstrap 折り畳みます
- Bootstrap 回転木馬
- Bootstrap 追加のナビゲーション
Bootstrap 他の
プログレスバーのブートストラップ2024 年の最新の入門チュートリアル。このコースでは デフォルトのプログレスバー,例,代替プログレスバー,例,プログレスバーのストライプ,例,アニメーションプログレスバー,例,積み重ねられたプログレスバー,例, について学習できます。
プログレスバーのブートストラップ
この章では、ブートストラッププログレスバーを説明します。 このチュートリアルでは、ブートストラップ、リダイレクト、または動作状態をロードプログレスバーを作成する方法について説明します。
効果を得るために、CSS3のトランジションやアニメーションを使用して、プログレスバーブートストラップ。 Internet ExplorerとFirefoxの9およびそれ以前の古いバージョンのこの機能をサポートしていません、オペラ12は、アニメーションをサポートしていません。
デフォルトのプログレスバー
基本的なプログレスバーを作成し、次の手順を実行します。
- <div>を持つクラス.progressを追加します。
- 次に、上記での<div>の内部には、<div>の空で、クラス .progressバーを追加します。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
それでは、次の例を見てみましょう：
例
<DIV クラス = "進歩">
<DIV クラス = "プログレスバー" 役割 = "プログレスバー" アリア-valuenowを = "60"
アリア-valueminの = "0" アリア-valuemax = "100" スタイル= "幅：40％; ">
<スパン クラス= "SR-のみ"> 40％ 完了 </ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
代替プログレスバー
次のように異なるスタイルのプログレスバーを作成するには：
- <div>を持つクラス.progressを追加します。
- 次に、上記での<div>の内部には、<div>要素を持つクラス .progressバーとプログレス・バー- *空のクラスを追加します。 *は、成功、情報、警告、危険であることができる場所。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
それでは、次の例を見てみましょう：
例
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：90％; ">
<スパン クラス= "SR-のみ"> 90％ 完了（成功した）</ span>の
</ DIV>
</ DIV>
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー情報」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：30％; ">
<スパン クラス= "SR-のみ"> 30％ 完了（情報）</ span>の
</ DIV>
</ DIV>
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バーの警告」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：20％; ">
<スパン クラス= "SR-のみ"> 20％ 完了（警告）</ span>の
</ DIV>
</ DIV>
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー危険」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：10％; ">
<スパン クラス= "SR-のみ"> 10％ 完了（危険）</ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
プログレスバーのストライプ
プログレスバーのストライプを作成し、次の手順を実行します。
- クラス .progressと.progressストライプの<div>に追加。
- 次に、上記での<div>の内部には、<div>要素を持つクラス .progressバーとプログレス・バー- *空のクラスを追加します。 *は、成功、情報、警告、危険であることができる場所。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
それでは、次の例を見てみましょう：
例
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：90％; ">
<スパン クラス= "SR-のみ"> 90％ 完了（成功した）</ span>の
</ DIV>
</ DIV>
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バー情報」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：30％; ">
<スパン クラス= "SR-のみ"> 30％ 完了（情報）</ span>の
</ DIV>
</ DIV>
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バーの警告」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：20％; ">
<スパン クラス= "SR-のみ"> 20％ 完了（警告）</ span>の
</ DIV>
</ DIV>
<DIV クラス= "進捗進捗ストライプ" >
<DIV クラス= "プログレスバーprogress-バー危険」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：10％; ">
<スパン クラス= "SR-のみ"> 10％ 完了（危険）</ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
アニメーションプログレスバー
アニメーションプログレスバーを作成し、次の手順を実行します。
- クラス .progressと.progressストライプの<div>に追加。クラス .activeを添加しながら。
- 次に、上記での<div>の内部には、<div>の空で、クラス .progressバーを追加します。
- このような= "60％"スタイルとして、パーセンテージとして表現幅のstyle属性を追加します。60％は、プログレスバーの位置を表します。
これは、縞模様が右から左に動きの感覚を持つようになります。
それでは、次の例を見てみましょう：
例
<DIV クラス= "進捗進捗ストライプアクティブ ">
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：40％; ">
<スパン クラス= "SR-のみ"> 40％ 完了 </ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
積み重ねられたプログレスバー
あなたも、複数のプログレスバーをスタックすることができます。 次の例に示すように、同じ.progressスタック上の複数のプログレスバーが、実現することができます。
例
<DIV クラス = "進歩">
<DIV クラス= "プログレスバーprogress-バー成功」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：40％; ">
<スパン クラス= "SR-のみ"> 40％ 完了 </ span>の
</ DIV>
<DIV クラス= "プログレスバーprogress-バー情報」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：30％; ">
<スパン クラス= "SR-のみ"> 30％ 完了（情報）</ span>の
</ DIV>
<DIV クラス= "プログレスバーprogress-バーの警告」 役割 = "プログレスバー"
アリア-valuenowを = "60" アリア-valueminの = "0" アリア-valuemax = "100"
スタイル= "幅：20％; ">
<スパン クラス= "SR-のみ"> 20％ 完了（警告）</ span>の
</ DIV>
</ DIV>
»をお試しください
結果は以下の通りであります：
