Quelle est la différence d'utilisation entre les balises <input-group> et <form-group> ?
Réponses
Trop de publicités?
Entrée groupes sont étendues à des Contrôles de Formulaire. L'aide de l'entrée des groupes, vous pouvez facilement ajouter et ajouter du texte ou des boutons à la base de texte intrants. Par exemple, vous pouvez ajouter le symbole$, @, pour un nom d'utilisateur Twitter, ou tout autre chose aussi nécessaire.
Former des groupes sont utilisés pour envelopper les étiquettes et les contrôles de formulaire dans un div pour obtenir l'espacement optimal entre l'étiquette et le contrôle.
Par conséquent, utilisez le formulaire-groupe et l'entrée-groupe tel que requis. N'enveloppez votre étiquette et de saisie dans un formulaire-groupe tag. Si l'un de vos champ de saisie nécessaire de préfixer/ajouté au texte du bouton/, envelopper le contrôle, avec l'aide de groupe. Ci-dessous l'exemple, en combinant les deux d'entre eux. Espérons que cette aide
<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>
JoshYates1980
Points
137
Je me suis mise à niveau de la feuille de style d'un ASP.NET webforms projet de bootstrap. Une différence notable, la forme du groupe de maximiser la largeur du contrôle. entrée-groupe utilisera uniquement la largeur requise. Par exemple, une ligne avec une colonne de largeur 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>
