Unterschied zwischen Eingabegruppe und Formulargruppe

Worin besteht der Unterschied zwischen den Tags <input-group> und <form-group>?Unterschied zwischen Eingabegruppe und Formulargruppe

Quelle

2016-04-25 Nero Vanbiervliet

Die Klassen? ("Eingabe-Gruppe" und "Formular-Gruppe") – tempranova

Eingabegruppen sind erweiterte Formularsteuerelemente. Mithilfe von Eingabegruppen können Sie Text oder Schaltflächen den textbasierten Eingaben einfach voranstellen und anhängen. Zum Beispiel können Sie das $ -Symbol, @ für einen Twitter-Benutzernamen oder etwas anderes wie erforderlich hinzufügen.

Formulargruppen werden verwendet, um Beschriftungen und Formularsteuerelemente in ein Div einzufügen, um einen optimalen Abstand zwischen dem Label und dem Steuerelement zu erhalten.

Verwenden Sie daher sowohl Formulargruppe als auch Eingabegruppe wie erforderlich. Umwickeln Sie Ihr Etikett und geben Sie es in ein Formulargruppen-Tag ein. Wenn eines Ihrer Eingabefelder mit Text/Schaltfläche vorangestellt/angehängt werden soll, umschließen Sie das Steuerelement mit der Eingabegruppe. Unten ist das Beispiel, das beide kombiniert. Ich verbessere das Stylesheet eines ASP.NET Webforms Projekt Bootstrap Hope this

<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>

Quelle

2016-04-25 10:00:15

Versuchen Sie dieses Beispiel und sollten Sie Fragen haben, kehren Sie zurück. Wird helfen zu lösen –

Bitte lassen Sie mich wissen, wenn dies hilft. Wenn es Ihre Frage beantwortet, genehmigen Sie meine Antwort. Wenn nicht, lassen Sie mich die Details wissen, um Ihnen zu helfen –

hilft. Ein bemerkenswerter Unterschied, Form-Gruppe wird die Breite des Steuerelements maximieren. Die Eingabegruppe verwendet nur die erforderliche Breite. Zum Beispiel kann eine Zeile mit einer Spalte 4 Breite:

<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>

Quelle

2017-01-09 15:05:55 JoshYates1980

Unterschied zwischen Eingabegruppe und Formulargruppe

Antwort

Verwandte Themen