Bootstrapの入力コンポーネント (1/6)
作成:2017-03-04 08:18
更新:2017-03-04 08:18
更新:2017-03-04 08:18
■ボタングループ
HTMLでは、入力関係の部品は決まっています。が、それらだけでは、面白みのないインターフェイスになってしまいます。もう少し使いやすくデザインされた部品があれば……と思ったことのある人も多いことでしょう。
Bootstrapでは、独自に定義したスタイルやスクリプトなどを使い、標準のHTMLには用意されていないようなインターフェイスを簡単に作成できます。それらについてここでまとめて説明しましょう。
まずは、「ボタングループ」についてです。ボタンは、既に簡単に説明をしました。Bootstrap独自のクラスを使うことで見やすいデザインにすることができましたね。このプッシュボタンを、複数並べてグループ化したものが、ボタングループです。
このボタングループは、先に説明した「インプット・グループ」のボタン版といってもよいでしょう。複数のボタンを１つのつながったバーのように表示します。このボタングループは、以下のように記述します。
class="btn-group"を設定した<div>タグの中に、ボタンを記述していきます。ここでは<button>タグを使いましたが、これは<input type="button">などでもまったく同様に使うことができます。
表示するのはただのボタンですから、Bootstrapに用意されているbtnやbtn-primaryといったボタン用のクラスもそのまま使うことができます。
下に実際の利用例を挙げておきましょう。各種のクラスを設定したボタンを<div class="btn-group">できれいに１つのグループにまとめています。
Bootstrapでは、独自に定義したスタイルやスクリプトなどを使い、標準のHTMLには用意されていないようなインターフェイスを簡単に作成できます。それらについてここでまとめて説明しましょう。
まずは、「ボタングループ」についてです。ボタンは、既に簡単に説明をしました。Bootstrap独自のクラスを使うことで見やすいデザインにすることができましたね。このプッシュボタンを、複数並べてグループ化したものが、ボタングループです。
このボタングループは、先に説明した「インプット・グループ」のボタン版といってもよいでしょう。複数のボタンを１つのつながったバーのように表示します。このボタングループは、以下のように記述します。
<div class="btn-group">
<button class="btn">ボタンの表示テキスト</button>
……略……
</div>
class="btn-group"を設定した<div>タグの中に、ボタンを記述していきます。ここでは<button>タグを使いましたが、これは<input type="button">などでもまったく同様に使うことができます。
表示するのはただのボタンですから、Bootstrapに用意されているbtnやbtn-primaryといったボタン用のクラスもそのまま使うことができます。
下に実際の利用例を挙げておきましょう。各種のクラスを設定したボタンを<div class="btn-group">できれいに１つのグループにまとめています。
(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 >Button Group</h2> </div> <div class="btn-group"> <button class="btn">btn</button> <button class="btn btn-default">default</button> <button class="btn btn-primary">primary</button> <button class="btn btn-success">success</button> <button class="btn btn-info">info</button> <button class="btn btn-warning">warning</button> <button class="btn btn-danger">danger</button> </div> </div> </div> </div> </body> </html>
※関連コンテンツ