Ввод и кнопка в HTML - PullRequest
Новая
       8

Ввод и кнопка в HTML

0 голосов
/ 27 июня 2018

Я использую Bootstrap 3. Как подключить кнопку поиска к входу?

Как:

| ВХОД | ПОИСК | <== они вместе </p> 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" 
         uib-tooltip="Search by Account ID" 
         validator="/^[0-9]{1,15}$/" 
         validator-invoke="watch" 
         validator-error="Account ID must have 1 to 15 digits." 
         type="number" 
         placeholder="Search by Account ID" 
         ng-model="accountID"
         min="1">
</div>
<div class="col-xs-5">
  <button class="btn btn-default w100" 
          type="button" 
          ng-click="searchCustomer()">Search</button>
</div>

Ответы [ 6 ]

0 голосов
/ 27 июня 2018

Что-то подобное может быть полезным? Я думаю, что это может быть хорошим ориентиром Bootstrap-3-input-groups 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<body>
<div class="row">

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Search!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</body>
0 голосов
/ 27 июня 2018

вы можете использовать 

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <span class="input-group-btn">
         <button class="btn btn-default" type="button">
             <i class="glyphicon glyphicon-search"></i>
         </button>
    </span>
</div>

для получения дополнительной информации перейдите к https://getbootstrap.com/docs/3.3/components/

0 голосов
/ 27 июня 2018 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div style="margin-top:30px;" class=" col-xs-7 form-group">
  <input style="margin-right: -7px;height: 32.5px;" ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>
0 голосов
/ 27 июня 2018

Заставьте их разделить родительский div, чтобы они могли выровняться рядом друг с другом. 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class=" col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1">

  <button class="btn btn-default w100" type="button" ng-click="searchCustomer()">Search</button>

</div>
0 голосов
/ 27 июня 2018

Вы ищете группу ввода

EG: 

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
    <input type="text" class="form-control" placeholder="Username">
</div>
0 голосов
/ 27 июня 2018

Для работы необходимо добавить Bootstrap 04: 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">



<div class="input-group mb-3 col-xs-7 form-group">
  <input ng-if="filterOption == 'Account ID'" uib-tooltip="Search by Account ID" validator="/^[0-9]{1,15}$/" validator-invoke="watch" validator-error="Account ID must have 1 to 15 digits." type="number" placeholder="Search by Account ID" ng-model="accountID"
    min="1" class="form-control" >
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button"  ng-click="searchCustomer()">Search</button>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...