Tips

Twitter Bootstrap 3 の基本 フォームのサンプル3

Twitter Bootstrap 3 の基本 フォームのサンプル3

Twitter Bootstrap 3 の基本 フォームのサンプル3

前回作成したフォームのサイズ変更をしていきます。
基本的にクラスを指定することでフォームサイズの変更ができます。
グリッドシステム同様に、横幅をグリッド数指定で決めることが可能です。
それでは早速サンプルを見ていきましょう。

サンプル:フォームサイズを変更する方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
</head>
<body>
<div class="container-fluid">
<h1>フォームのサイズ</h1>
    <p>
    「input-~」クラスで大きさを指定します。<br>
    <input class="form-control input-lg" type="text" placeholder=".input-lg">
    <input class="form-control" type="text" placeholder="指定なし">
    <input class="form-control input-sm" type="text" placeholder=".input-sm">
    「select」タグでもやはり「input-~」クラスを使えます。<br>
    <select class="form-control input-lg"><option value="a">a</option></select>
    <select class="form-control"><option value="b">b</option></select>
    <select class="form-control input-sm"><option value="c">c</option></select>
    </p>
 
    <p>
        グリッドシステムを使用することで、フォームの横幅を指定できます。<br>
        <div class="row">
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder=".col-sm-3">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" placeholder=".col-sm-4">
            </div>
            <div class="col-sm-2">
                <input type="text" class="form-control" placeholder=".col-sm-2">
            </div>
        </div>
    </p>
</div><!-- /container -->
</body>
</html>

フォームのサイズ

まとめ

今回はフォームのサイズについてみてきました。次回はボタンの作成方法を見ていきます。

WEBアプリケーション関連 人気連載リンク

基礎からPHPWEBアプリ開発を学ぶなら・・
PHP基礎 連載

より実践的なWEBアプリ開発講座!Bootstrap活用を学ぶなら・・
魁!小野の塾 連載

Recent News

Recent Tips

Tag Search