Разница между входной группой и формой-группой

В чем разница между тегами <input-group> и <form-group>?Разница между входной группой и формой-группой

2016-04-25 Nero Vanbiervliet

Классы? («input-group» и «form-group») – tempranova

Группы ввода расширены. Используя группы ввода, вы можете легко добавить и добавить текст или кнопки в текстовые входы. Например, вы можете добавить символ $, @ для имени пользователя Twitter или что-либо еще по мере необходимости.

Группы форм используются для обертывания меток и элементов управления форматом в div, чтобы получить оптимальное расстояние между меткой и элементом управления.

Следовательно, при необходимости используйте как группу форм, так и группу ввода. Упакуйте свой ярлык и ввод в тег группы форм. Если какое-либо из полей ввода необходимо добавить/добавить с помощью кнопки text/button, оберните элемент управления с помощью группы ввода. Ниже приведен пример, объединяющий оба из них. Надеюсь, что это помогает

<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

Попробуйте этот пример и у вас возникнут какие-либо вопросы, верните его. Помогите решить –

Пожалуйста, дайте мне знать, если это поможет. Если он ответит на ваш вопрос, подтвердите свой ответ. Если не дайте мне знать подробности, чтобы помочь вам –

Я обновлении таблицы стилей проекта ASP.NET WebForms используется при загрузке. Одна заметная разница, форма-группа максимизирует ширину элемента управления. 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

Разница между входной группой и формой-группой

ответ

Смежные вопросы