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

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

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

■インライン・フォームについて

フォームは、基本的に縦に並ぶようになっています。が、入力項目がそれほど多くないような場合は、横一列に表示できるといい場合もあります。

このような場合、Bootstrapでは「インライン・フォーム」というものを使うことができます。これは非常に簡単で、<form>タグに以下のようにしてクラス設定を用意するだけです。
<form class="form-inline">

これで、フォームの入力項目が横一列に表示されるようになります。フォームに組み込まれるコントロール類の記述は、通常とまったく同じです。<div class="form-group">タグや、入力タグのclass="form-control"指定なども変わりありません。

非常にユニークなのは、横に表示されるのは横幅が十分にある時で、横幅がある程度より狭くなると自動的に立てに配置されるようになることです。つまり、横配置と縦配置はBootstrapが管理してくれるんですね。

下に簡単な利用例を挙げておきました。横幅を広げて表示すると横1列になりますが、狭くすると縦に変わります。

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

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 class="form-inline">
            <div class="form-group">
                <label for="txt1">Text:</label>
                <input type="text" class="form-control" id="txt1">
            </div>
            <div class="form-group">
                <label for="pw1">Password:</label>
                <input type="password" class="form-control" id="pw1">
            </div>
            <div class="form-group">
                <input type="button" class="btn"
                    value="Click">
            </div>
        </form>
    </div>
</div>
    
</div>

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

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