libro
www.tuyano.com
初心者のためのBootstrap入門

Bootstrapの入力コンポーネント (2/6)

作成:2017-03-04 08:20
更新:2017-03-04 08:20

■ボタンツールバーについて

ボタングループは、複数のボタンを１つにまとめるものでした。このボタングループは、更に複数のグループをひとまとめにして扱える「ボタンツールバー」というもので使うことができます。

ボタンツールバーは、ツールバーを作成するためのものです。ツールバーというのは、パソコンの一般的なビジネスソフトなどでよく用いられているインターフェイスですね。メニューバーの下に、アイコンを表示した小さなボタンがずらっと横一列に並んでいる、あれです。

こうしたツールバーは、ボタンがずらっと全部つながっているわけではありません。関連あるものがいくつかグループになっていて、それが横に並んだ形をしています。ボタンツールバーは、こうしたツールバーをボタンで作成していくのに使います。

ボタンツールバーは、複数のボタングループを１つにまとめた形をしています。整理すると、以下のような形をしているでしょう。
<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-default">テキスト</button>
        ……ボタンが並ぶ……
    </div>

    ……ボタングループが並ぶ……

</div>

<div class="btn-toolbar">というタグがベースとなっており、その中に<div class="btn-group">でボタングループを用意していきます。ボタングループがわかれば、それほど複雑ではないでしょう。

実際の利用例を下に挙げておきましょう。ここでは、全部で７つのボタンを３つのボタングループにまとめて表示しています。

コードを見てみるとわかりますが、<button>や<input type="button">だけでなく、<div>タグでボタングループを作ったりしていますね。class="btn btn-default"というようにボタンのクラスを設定してやれば、ボタン関係のタグでなくてもボタンの表示を作ることができるのです。もちろん、ちゃんとクリックして使うことができます。

※プログラムリストが表示されない場合

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-toolbar">
            <div class="btn-group">
                <button class="btn btn-default">One</button>
                <button class="btn btn-default">Two</button>
                <button class="btn btn-default">Three</button>
            </div>
            <div class="btn-group">
                <input type="button" class="btn btn-default" value="Four">
                <input type="button" class="btn btn-default" value="Five">
            </div>
            <div class="btn-group">
                <div class="btn btn-default">Six</div>
                <div class="btn btn-default">Seven</div>
            </div>
        </div>
    </div>
</div>

</div>

</body>
</html>
※関連コンテンツ

「初心者のためのBootstrap入門」に戻る