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

フォームとGUIコンポーネント (2/6)

作成:2017-02-25 11:08
更新:2017-02-25 11:08

■チェックボックスとラジオボタン

フォームのスタイル設定で注意が必要なのは、チェックボックスとラジオボタンです。これらは、class="form-group"とclass="form-control"は使いません。代りに、専用のクラスが用意されています。

・チェックボックス
<div class="checkbox">
    <label for="○○">
        <input type="checkbox" id="○○">
        ラベル
    </label>
</div>


チェックボックスは、<div class="checkbox">というタグで囲んで記述します。これにより、Bootstrapのスタイルでチェッボックスが表示されます。

・ラジオボタン
<div class="radio">
    <label for="○○">
        <input type="radio" id="○○">
        ラベル
    </label>
</div>


ラジオボタンは、<div class="radio">というタグで囲んで記述します。これでラジオボタンのBootstrapスタイルが完成します。

いずれも、実際の利用には<label>を使ったラベル表示を組み合わせることになるでしょう。<label>は、<div>タグ内に組み込んで表示しておきます。


・ディスエーブルのクラスについて
チェックボックスやラジオボタンを利用不可にしておく場合、それらのタグに「disabled」を指定することができます。この場合、<div>タグのclassにも、「disabled」クラスを追加しておきます。これにより、マウスポインタがコントロール上にくると使えないことを示すカーソルに変わるようになります。

では、これも簡単な利用例を下に挙げておきましょう。チェックボックスとラジオボタンで、それぞれ利用可能なものと利用不可なものを表示しています。

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

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>
            <div class="checkbox">
                <label for="cb1">
                    <input type="checkbox" id="cb1">
                    Check Box
                </label>
            </div>
            <div class="checkbox disabled">
                <label for="cb2">
                    <input type="checkbox" id="cb2" disabled>
                    Check Box
                </label>
            </div>
            <div class="radio">
                <label for="rb1">
                    <input type="radio" id="rb1" name="rb">
                Radio Button No, 1.
                </label>
            </div>
            <div class="radio">
                <label for="rb2">
                    <input type="radio" id="rb2" name="rb" checked>
                Radio Button No, 2.
                </label>
            </div>
            <div class="radio disabled">
                <label for="rb3">
                    <input type="radio" id="rb3" name="rb" disabled>
                Radio Button No, 3.
                </label>
            </div>
            <div class="form-group">
                <input type="button" class="btn"
                    value="Click">
            </div>
        </form>
    </div>
</div>
    
</div>

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

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