Bootstrap を使用してフォーム レイアウトを作成する方法

Bootstrap には、縦型フォーム、横型フォーム、インライン フォームの 3 種類のフォーム レイアウトが用意されており、これらは、Bootstrap で外部から JavaScript と CSS ファイルを導入し、フォーム コントロールにクラス名を追加することで設定されます。

#HTML フォームは Web ページやアプリケーションに不可欠な部分ですが、CSS のみを使用してフォーム コントロールを 1 つずつ手動で設定するのは面倒で退屈な場合が多いです。現在、ブートストラップの出現により、フォーム内のラベル、入力フィールド、選択ボックス、送信ボックスなどのフォーム コントロールのスタイル設定と位置合わせのプロセスが大幅に簡素化されました。次の記事では、Bootstrap のフォーム レイアウト スタイルについて詳しく紹介します。

[おすすめコース: Bootstrap コース ]

Bootstrap には 3 つの異なるタイプのフォーム レイアウトが提供されています:

• 縦型フォーム (デフォルトのテーブル レイアウト)

• 横型フォーム

• インラインフォーム

次の記事では、これらのフォームのレイアウトと詳細について詳しく紹介します。 by one フォーム関連の各種 Bootstrap コンポーネント

Bootstrap を外部導入する

<link rel="stylesheet" type="text/css" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
<script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>

縦型フォームレイアウトの作成

これです。デフォルトのブートストラップ フォーム レイアウトでは、基本クラスを

要素に追加したり、マークアップに大きな変更を加えたりすることなく、スタイルがフォーム コントロールに適用されます。

このレイアウトのフォーム コントロールには、左揃えのラベルが上に積み重ねられています

例:

<div style="margin:20px;">
    <form action="#" method="post">
        <div class="form-group">
            <label for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

レンダリング:

横向きのテーブル レイアウトの作成 ##横向き形式では、レイアウト ラベルは右揃えで左にフローティングされ、フォーム コントロールと同じ行に表示されます。横長のフォーム レイアウトでは、デフォルトのフォーム レイアウトでさまざまなマークアップを変更する必要があります。水平フォーム レイアウトを実装するための具体的な手順は次のとおりです。

(1) .form-horizo​​ntal クラスをフォーム要素に追加します

(2) div にパッケージ化タグとフォーム コントロールを実装します。要素を追加し、.form-group classを追加します。

(3) Bootstrap の定義済みグリッド クラスを使用して、ラベルとフォーム コントロールを位置合わせします。

(4) label 要素の

<div>
    <form class="form-horizontal" action="#" method="post">
        <div class="form-group">
            <label for="inputName" class="control-label col-xs-2">用户名</label>
            <div class="col-xs-10">
                <input type="username" class="form-control" id="inputName" placeholder="username" required>
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">密码</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox">记住密码</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">登录</button>
            </div>
        </div>
    </form>
</div>

Rendering:

インライン フォーム レイアウトの作成

フォームでは、フォーム コントロールを並べて配置してレイアウトを圧縮します。この効果を実現したい場合は、form-inline クラスを form 要素に追加できます。

<div   style="max-width:90%">
    <form class="form-inline" action="#" method="post">
        <div class="form-group">
            <label class="sr-only" for="inputName">用户名</label>
            <input type="username" class="form-control" id="inputName" placeholder="username" required>
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">密码</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
        </div>
        <div class="checkbox">
            <label><input type="checkbox">记住密码</label>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
    </form>
</div>

レンダリング:

概要: 以上がこの記事の全内容です。Bootstrap のフォーム レイアウト スタイルを学習していただければ幸いです。助けます。

以上がBootstrap を使用してフォーム レイアウトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。