フォームとGUIコンポーネント (6/6)
作成:2017-02-25 11:15
更新:2017-02-25 11:15
更新:2017-02-25 11:15
■ボタンの表示用クラスについて（２）
ボタンの表示に関するクラスは、この他にも用意されています。中でも重要な「大きさ」と「状態」に関するものについてまとめておきましょう。
・ボタンサイズ
ボタンの大きさに関するクラスです。これらはボタンのclassに追加することで大きさを調整できます。
・選択状態
ボタンを最初から押した状態で表示したい場合には、classに「active」を追記します。class="btn btn-default active"といった具合ですね。
・利用不可
ボタンを利用できない状態にしておきたい場合は、classに「disabled」を指定します。class="btn btn-default disabled"という形です。
下に、実際の利用例を挙げておきます。ここでは<input type="button">を使っていますが、type="submit"でも<button>でも同様に働きます。
・ボタンサイズ
ボタンの大きさに関するクラスです。これらはボタンのclassに追加することで大きさを調整できます。
btn-lg 大きいボタン
btn-sm 小さいボタン
btn-sx 更に小さいボタン
・選択状態
ボタンを最初から押した状態で表示したい場合には、classに「active」を追記します。class="btn btn-default active"といった具合ですね。
・利用不可
ボタンを利用できない状態にしておきたい場合は、classに「disabled」を指定します。class="btn btn-default disabled"という形です。
下に、実際の利用例を挙げておきます。ここでは<input type="button">を使っていますが、type="submit"でも<button>でも同様に働きます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <script src="./js/jquery-3.1.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <link rel="stylesheet" href="./css/bootstrap.min.css"> <link rel="stylesheet" href="./css/bootstrap-theme.min.css"> </head> <body > <div class="container"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1>コンテンツの表示</h1> <h2 >form</h2> </div> <div> <input type="button" class="btn btn-default btn-lg" value="large"> <input type="button" class="btn btn-default" value="default"> <input type="button" class="btn btn-default btn-sm" value="small"> <input type="button" class="btn btn-default btn-xs" value="extra small"> </div> <hr> <div> <input type="button" class="btn btn-default" value="large"> <input type="button" class="btn btn-default active" value="default"> <input type="button" class="btn btn-default disabled" value="small"> </div> </div> </div> </div> </body> </html>
※関連コンテンツ