Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）-htmlチュートリアル-php.cn

Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）

PHPz

リリース： 2018-10-15 16:07:06

オリジナル

4627 人が閲覧しました

Bootstrap とは何ですか? Bootstrap は Web アプリケーションと Web サイトを迅速に開発するためのフロントエンドフレームワークです。 Bootstrap は、いくつかの単純な HTML タグと拡張クラスを使用して、さまざまなスタイルのフォームを作成します。Bootstrap がどのようにフォームを作成するかを見てみましょう。

ブートストラップフォームレイアウト

【関連ビデオ推奨: ブートストラップチュートリアル】

ブートストラップは、次のタイプのフォームレイアウトを提供します: 垂直フォーム (デフォルト)、インラインフォーム、水平フォーム、垂直フォームまたは基本フォーム

基本的なフォーム構造はブートストラップに付属しており、個々のフォームコントロールはいくつかのグローバルスタイルを自動的に受け取ります。基本的なフォームを作成する手順を以下に示します。

role="form" を親

要素に追加します。

クラス .form-group を使用して、ラベルとコントロールを

に配置します。これは最適な間隔を得るために必要です。

すべてのテキスト要素、、<select> に class ="form-control" を追加します。 </select>

例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 基本表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 选择打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
    
</body>
</html>

ログイン後にコピー

実行結果は次のとおりです:

Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）

インラインフォーム

フォームを作成する必要がある場合、そのすべての要素はインラインで左揃えであり、ラベルは並べて表示はい、クラス .form-inline をタグに追加してください。

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 内联表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 请打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

ログイン後にコピー

実行結果は次のとおりです:

Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）

デフォルトでは、Bootstrap の input、select、textarea の幅は 100% です。インラインフォームを使用する場合、フォームコントロールで幅を設定する必要があります。

クラス .sr-only を使用すると、インラインフォームのラベルを非表示にすることができます。

横型フォーム

横型フォームは、マークの数だけでなく、フォームの表示形式も他のフォームと異なります。水平方向にレイアウトされたフォームを作成するには、次の手順に従います。

クラス .form-horizontal を親要素に追加します。

クラス .form-group を使用して、ラベルとコントロールを

に配置します。

クラス .control-label をラベルに追加します。

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 水平表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname" 
                   placeholder="请输入名字">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname" 
                   placeholder="请输入姓">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 是否记住
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

</body>
</html>

ログイン後にコピー

結果は以下の通りです

サポートされているフォームコントロール

Bootstrapは、主にinput、textarea、checkbox、radio、selectなどの最も一般的なフォームコントロールをサポートしています。

入力ボックス (入力)

最も一般的なフォームのテキストフィールドは、入力ボックスの入力です。ユーザーは、ほとんどの必要なフォームデータをそこに入力できます。 Bootstrap は、テキスト、パスワード、日時、ローカル日時、日付、月、時刻、週、数値、電子メール、URL、検索、電話番号、色など、すべてのネイティブ HTML5 入力タイプのサポートを提供します。入力を完全にスタイル設定するには、適切な型宣言が必要です。

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 输入框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">标签</label>
        <input type="text" class="form-control" placeholder="文本输入">
    </div>
 </form>

</body>
</html>

ログイン後にコピー

実行結果は以下の通りです。

Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）

テキストボックス(テキストエリア)

複数行入力する必要がある場合は、テキストボックスのテキストエリアを使用できます。必要に応じて、行属性を変更します (行が少ない = 小さなボックス、行が多い = 大きなボックス)。

例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 文本框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">文本框</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

</body>
</html>

ログイン後にコピー

結果は次のとおりです:

Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）

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

チェックボックスとラジオボタンは、ユーザーが一連のプリセットから選択できるようにするために使用されます。オプションから選択します。

フォームを作成するとき、ユーザーがリストから複数のオプションを選択できるようにするには、チェックボックスを使用します。ユーザーが 1 つのオプションのみを選択できるように制限する場合は、無線を使用します。

一連のチェックボックスとラジオボタンに .checkbox-inline または .radio-inline クラスを使用して、それらが同じ行に表示されるように制御します。

次の例は両方のタイプ (デフォルトとインライン) を示しています:

インスタンス

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 复选框和单选按钮</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
    </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
    </label>
</div>

</body>
</html>

ログイン後にコピー

実行結果は次のとおりです:

Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）

選択ボックス (選択)

ユーザーに複数のオプションから選択したい場合に選択ボックスを使用しますが、デフォルトでは選択できるオプションは 1 つだけです。

后使用 .help-block。下面的实例演示了这点：

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单帮助文本</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <span>帮助文本实例</span>
    <input class="form-control" type="text" placeholder="">
    <span class="help-block">一个较长的帮助文本块，超过一行，
        需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

</body>
</html>

ログイン後にコピー

运行结果如下：

Bootstrap フォームをレイアウトするにはどのような方法がありますか? Bootstrapフォームレイアウトの作成方法（コード付き）