フォームとGUIコンポーネント (5/6)
作成:2017-02-25 11:13
更新:2017-02-25 11:13
更新:2017-02-25 11:13
■ボタンの表示用クラスについて（１）
ここまでのフォームのサンプルで、実は１つだけ触れていなかった項目があります。それは、「ボタン」です。サンプルのフォームに用意したボタンを見ると、こんな具合に書かれていることがわかるでしょう。
class="btn"と指定がされていましたが、この指定がBootstrap独自のボタン・スタイルを割り当てるためのものなのです。このbtnクラスを指定することで、オリジナルなスタイルのボタンが表示されるようになります。
ただし、このbtnクラスは、プッシュボタンのベースとなるクラスであり、これだけがBootstrapのボタンではありません。この他にも以下のようなクラスが用意されているのです。
これらは、btnクラスと合わせて使います。実際にどのような表示になるか、下にサンプルを挙げておきましょう。ベースとなるデザインはすべて同じで、表示されるボタンの色が変わるだけなのがわかります。
ここでは、<input type="button">を使っていますが、もちろん、<input type="submit">や、<button>でも同じように使うことができます。またフォーム以外（<form>タグ以外）でもこれらは使うことができます。
<input type="button" class="btn"
value="Click">
class="btn"と指定がされていましたが、この指定がBootstrap独自のボタン・スタイルを割り当てるためのものなのです。このbtnクラスを指定することで、オリジナルなスタイルのボタンが表示されるようになります。
ただし、このbtnクラスは、プッシュボタンのベースとなるクラスであり、これだけがBootstrapのボタンではありません。この他にも以下のようなクラスが用意されているのです。
btn-default
btn-primary
btn-success
btn-info
btn-warningg
btn-danger
btn-link
これらは、btnクラスと合わせて使います。実際にどのような表示になるか、下にサンプルを挙げておきましょう。ベースとなるデザインはすべて同じで、表示されるボタンの色が変わるだけなのがわかります。
ここでは、<input type="button">を使っていますが、もちろん、<input type="submit">や、<button>でも同じように使うことができます。またフォーム以外（<form>タグ以外）でもこれらは使うことができます。
(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> <form> <input type="button" class="btn btn-default" value="Default"> <input type="button" class="btn btn-primary" value="Primary"> <input type="button" class="btn btn-success" value="Success"> <input type="button" class="btn btn-info" value="Info"> <input type="button" class="btn btn-warning" value="Warning"> <input type="button" class="btn btn-danger" value="Danger"> <input type="button" class="btn btn-link" value="Link"> </form> </div> </div> </div> </body> </html>
※関連コンテンツ