Bootstrap進捗バー

11121 ワード

html bootstrap

bootstrapを使用して、ロード、リダイレクト、または動作状態の進捗バーを実現するのは簡単です.
Bootstrapプログレスバーは、CSS 3遷移およびアニメーションを使用してこの効果を得る.Internet Explorer 9および以前のバージョンと旧版のFirefoxではこの機能はサポートされておらず、Opera 12ではアニメーションはサポートされていない.
基本的な進捗バーを作成するには、次の手順に従います.
classを追加します.progressの.
次に、上の内にclassを付加する.progress-barの空です.
パーセントで表される幅を持つstyle属性を追加します.たとえば、style=「60%」などです.進捗バーが60%の位置にあることを示します.
次の例を見てみましょう.




   Bootstrap  -  
   
   
   




   
      40%

はbootstrapをしてなバーのをした.
でも...これで ??これはです. をけましょう.
なるスタイルのバーをするには、のにいます.
のスタイルのバーをするには、のにいます.
classをします.progressの.
に、のにclassをける.progress-barとclass progress-bar-*のです.ただし、*はsuccess、info、warning、dangerであってもよい.
パーセントのをつstyleプロパティをします.たとえば、style=「60%」などです. バーが60%のにあることをします.
のをてみましょう.




   Bootstrap   -  
   
   
   




   
      90%  （ ）
   


   
      30%  （ ）
   


   
      20%  （ ）
   


   
      10%  （ ）

ok!!!ここまでじて、みんなはすでになのをしました; に、バーをよりきれいにするために、さらにレベルをげましょう.
ストライプきプログレスバー:
ストライプのプログレスバーをするには、のにいます.
classをします.progressと.progress-stripedの.
に、のにclassをける.progress-barとclass progress-bar-*のです.ただし、*はsuccess、info、warning、dangerであってもよい.
パーセントのをつstyleプロパティをします.たとえば、style=「60%」などです. バーが60%のにあることをします.
のをてみましょう.




   Bootstrap   -  
   
   
   




   
      90%  （ ）
   


   
      30%  （ ）
   


   
      20%  （ ）
   


   
      10%  （ ）

ずいぶんきれいになったでしょう!!!
のバーは、きれいですがセクシーではありません.どうやってバーをセクシーにしますか.
アニメーションのバー:
アニメーションのバーをするには、のにいます.
classをします.progressと.progress-stripedの. にclassをします.active.
に、のにclassをける.progress-barのです.
パーセントのをつstyleプロパティをします.たとえば、style=「60%」などです. バーが60%のにあることをします.
これにより、ストライプがからにくようになります.
のをてみましょう.




   Bootstrap   -  
   
   
   




   
      40%

、はしくてセクシーになりました!!!