Bootstrap Button

5089 ワード

説明
Bootstrap Button JavaScriptプラグインは、ボタンの機能を強化することができます.ボタンの状態を制御してもいいし、ツールバーなどのコンポーネントのボタンセットを作成してもいいです.
何が必要ですか
jquery.jsとbootstrap-button.js-この二つのJavaScriptファイルを引用してください.これらは全部docs/assites/jsフォルダの中にあります.
どうやって使うのですか
JavaScriptを作成しなくてもいいです.マークだけでプラグインを使ってもいいです.JavaScriptを使ってボタンを押してもいいです.
Bootstrapはボタンのスタイルを定義するいくつかのオプションを提供しています.具体的には下記の表に示します.
以下のスタイルはを選択しますに使用できます.
クラス
説明
.btn
ボタンに基本スタイルを追加します.
.btn-default
標準/標準ボタン
.btn-primary
元のボタンスタイル(操作されていません)
.btn-success
成功した動作を表す.
btn-info
このスタイルは、情報をポップアップするボタンに使用できます.
btn-warning
慎重に操作するボタンを表示します.
btn-danger
危険な動作を表すボタン操作
.btn-link
ボタンをリンクのように見えるようにする(ボタンの動作をそのまま保持する)
.btn-lg
大きなボタンを作成します.
btn-sm
小さなボタンを作成します.
.btn-xs
超小型ボタンを作成します.
btn-block
ブロックレベルボタン(親要素の幅100%まで伸ばす)
.active
ボタンをクリックします
.disabled
無効ボタン
まず違う色のボタンを見てください.
 
 
   
   
   
   
   
   
   
  BootstrapDemo 
   
   
 
   
     
     
     
     
     
     
     
     
     
     
     
     
     
     
   
効果:
btn-default/btn-prmary/btn-success/btn-info/btn-warning/btn-danger/btn-linkはボタンに異なるスタイルを加えました.
ボタンのサイズ
headの部分は全部同じですので、Bodyの内容だけを書きます.
 
   
   
   
  







効果は以下の通りです.
ボタンの状態
ボタンはactiveとdisabledの2つの状態、アクティブ状態に分けられます.ボタンは押された外観、すなわち背景の色が深くなり、暗い枠と影があります.無効状態:ボタンの色は50%薄くなり、グラデーションが失われます.
具体例を見ます.
 
   
   
   
  













?
ボタンラベル
a,inputはボタンのように表現できますが、ブラウザをまたぐことで一致しないようにしてください.
 
  ハイパーリンクボタン 
   
   
   
?
以上の内容はBootstrapボタンに関する知識を勉強して整理しました.