入力グループとフォームグループの違い

タグ<input-group>と<form-group>の違いは何ですか？入力グループとフォームグループの違い

2016-04-25 Nero Vanbiervliet

クラス？（ "input-group"と "form-group"） – tempranova

入力グループはフォームコントロールで拡張されています。入力グループを使用すると、テキストベースの入力にテキストやボタンを簡単に追加して追加することができます。たとえば、$記号、Twitterユーザー名の場合は@、必要に応じてその他は追加できます。

フォームグループは、ラベルとコントロール間の最適な間隔を得るために、div内のラベルとフォームコントロールを折り返すために使用されます。

したがって、必要に応じてform-groupとinput-groupの両方を使用してください。ラベルをラップし、フォームグループタグで入力してください。テキスト/ボタンの先頭に追加/追加する必要がある入力フィールドがある場合は、入力グループでコントロールを囲みます。以下は両方を組み合わせた例です。これは私がブートストラップするASP.NETのWebフォームプロジェクトのスタイルシートをアップグレードしています

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> 
 
<body> 
 
    <div class="container-fluid justify-content-center"> 
 
     <form role="form" class="pt-3"> 
 
      <div class="form-group row"> 
 
       <label for="inputfield1" class="col-sm-2 control-label">Generic input</label> 
 
       <div class="col-sm-10"> 
 
        <input type="text" class="form-control" id="inputfield1" placeholder="Generic input..." /> 
 
       </div> 
 
      </div><!-- .form-group --> 
 
      <div class="form-group row"> 
 
       <label for="inputfield2" class="col-sm-2 control-label">Money value</label> 
 
       <div class="input-group col-sm-10"> 
 
        <span class="input-group-prepend input-group-text">$</span> 
 
        <input type="text" class="form-control" id="inputfield2" placeholder="Money value..." /> 
 
        <span class="input-group-append input-group-text">.00</span> 
 
       </div> 
 
      </div><!-- .form-group --> 
 
      <div class="form-group row"> 
 
       <label for="inputfield3" class="col-sm-2 control-label">Username</label> 
 
       <div class="input-group col-sm-10"> 
 
        <span class="input-group-prepend input-group-text">@</span> 
 
        <input type="text" class="form-control" id="inputfield3" placeholder="Username..." /> 
 
       </div> 
 
      </div><!-- .form-group --> 
 
     </form> 
 
    </div> 
 
</body>

出典

2016-04-25 10:00:15

この例を試してください。何か質問があれば元に戻してください。解決するのに役立ちます –

これが役に立ったら教えてください。あなたの質問に答えるなら、私の答えを承認してください。そうでない場合は、あなたに役立つ詳細を教えてください –

に役立ちます願っています。 1つの顕著な違いは、フォームグループはコントロールの幅を最大化します。 input-groupは必要な幅だけを使用します。例えば、4列幅の行：

<div class="row"> 
    <div class="col-md-4"> 
     <div class="form-group"> 
      <asp:UpdatePanel ID="UpdatePanel4" runat="server"> 
       <ContentTemplate> 
        <asp:Label ID="Label3" runat="server" Text="Professional Title" /><br /> 
        <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" 
         OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true" 
         CssClass="form-control" /> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 
    </div> 
</div>

<div class="row"> 
    <div class="col-md-4"> 
     <div class="input-group"> 
      <asp:UpdatePanel ID="UpdatePanel4" runat="server"> 
       <ContentTemplate> 
        <asp:Label ID="Label3" runat="server" Text="Professional Title" /><br /> 
        <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="true" 
         OnSelectedIndexChanged="ddlptitle_SelectedIndexChanged" AppendDataBoundItems="true" 
         CssClass="form-control" /> 
       </ContentTemplate> 
      </asp:UpdatePanel> 
     </div> 
    </div> 
</div>

出典

2017-01-09 15:05:55 JoshYates1980

入力グループとフォームグループの違い

答えて

関連する問題