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

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

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

■ドロップダウンについて

ボタンをクリックするとメニューがプルダウンする、というインターフェイスは、アプリケーションでよく使われていますね。HTMLの場合、<select>を使い、1行だけ表示させれば似たようなものが作れます。が、<select>はあくまで複数の中から項目を選ぶためのものです。一般的なメニューのように、何かを実行させたりする使い方はしません(JavaScriptを書いて対応させることはできますが……)。

こうした、「クリックするとメニューが現れ、選ぶと何か実行する」というインターフェイスを簡単に作成できるのが、Bootstrapの「ドロップダウン」です。これは、以下のような形で記述します。
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle"
        data-toggle="dropdown">

        ボタンの表示テキスト
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" role="menu">
        <li role="presentation">

            <a href="#">メニュー項目</a>
        </li>
        ……<li>でメニュー項目を用意……
    </ul>
</div>

けっこう複雑そうに見えますが、<div class="dropdown">タグの中に、ボタンのタグと、表示されるメニューの内容となる<ul>タグが用意されているのがわかるでしょう。ざっと各タグを整理しておきましょう。


・ドロップダウンのタグ
<div class="dropdown">
一番外側にある、ベースとなるタグですね。これは、dropdownをクラスに指定しておきます。


・ボタンのタグ
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
ボタンの表示部分となるタグです。これは、けっこうややこしいです。まず、class属性に、表示するボタンに関するクラスと、「dropdown-toggle」というクラスを用意します。そして、data-toggle="dropdown"という属性を追加します。これでボタンの用意は完了です。

ただし、よく見ると<button>タグの中に、<span class="caret"></span>というタグが追加されていることに気がつくでしょう。これは何かというと、ボタン名の最後に付ける▼を表示するためのものなのです。まぁ、なくともドロップダウンの動作には支障はありません。


・メニューの<ul>タグ
<ul class="dropdown-menu" role="menu">
表示するメニューは、<ul>タグを使ったリストとして用意をします。この<ul>タグには、「dropdown-menu」というクラスを設定しておきます。それに加え、role="menu"という属性を用意しておきます。


・メニュー項目の<li>タグ
<li role="presentation">

<ul>タグ内に用意する、メニューの項目は<li>タグを使って用意します。このタグには、role="presentation"という属性を追加しておきます。

この<li>タグ内に用意するメニュー項目のテキストは、<a>タグを使って記述します。これを忘れると、メニューが選択できなくなってしまいます。

では、実際の利用例を下に掲載しておきましょう。「Number」というボタンを表示し、これをクリックすると3つのメニュー項目がドロップダウンして現れます。

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

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 >dropdown</h2>
        </div>
        
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle"
                data-toggle="dropdown">
                Number
                <span class="caret"></span>
                </button>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation">
                    <a href="#">One</a>
                </li>
                <li role="presentation">
                    <a href="#">Two</a>
                </li>
                <li role="presentation">
                    <a href="#">Three</a>
                </li>
            </ul>
        </div>
    </div>
</div>

</div>

</body>
</html>

※関連コンテンツ

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