Как сделать форму

205

18 августа 2018, 04:20

Как сделать такую форму в bootstrap. Есть, где это можно будет прочитать. Весь гугл перегуглил. Ничего не нашёл по этой теме.

Answer 1

Что-то в таком роде, подстроить под себя css и будет отлично.

$('select').on('change', function() { 
  $('li > a > span.text-primary').text($(this).val()); 
});

* { 
  border-radius: 0 !important; 
} 
 
.bg-orange { 
  background: #f4a442 !important; 
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
 
<div class="container py-3"> 
 
  <ul class="nav nav-tabs border-0"> 
    <li class="nav-item"> 
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Город вылета: <span class="font-weight-bold text-primary"></span></a> 
    </li> 
 
    <li class="nav-item bg-orange"> 
      <a class="nav-link text-white bg-orange font-weight-bold" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Горячие туры <span class="badge badge-pill text-danger badge-light">-50%</span></a> 
    </li> 
  </ul> 
 
  <div class="tab-content" id="myTabContent"> 
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> 
 
      <form> 
        <div class="form-row"> 
          <div class="col-4 border-right-0 pr-0"> 
            <select class="form-control border-right-0"> 
              <option disabled selected>Выбирете город</option> 
              <option>Киев</option> 
              <option>Москва</option> 
              <option>Лондон</option> 
              <option>Париж</option> 
            </select> 
          </div> 
          <div class="col-3 p-0"> 
            <input type="date" class="form-control border-right-0" placeholder="Date"> 
          </div> 
          <div class="col-3 p-0"> 
            <input type="number" class="form-control border-right-0" placeholder="Кол-во пассажиров"> 
          </div> 
          <div class="col-2 p-0"> 
            <button type="submit" class="btn btn-block bg-orange font-weight-bold text-white">Искать</button> 
          </div> 
        </div> 
      </form> 
 
    </div> 
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> 
      Тут ещё что-то 
    </div> 
  </div> 
 
</div>

Answer 2

Пример

$('.datepicker').datepicker();

form { 
  padding: 1em; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script> 
 
<div class="container"> 
  <!-- Nav tabs --> 
  <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li> 
    <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li> 
  </ul> 
 
  <!-- Tab panes --> 
  <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="tab1"> 
 
      <form class="form-inline" action="#"> 
        <div class="form-group"> 
          <input type="country" class="form-control" placeholder="Страна" required> 
        </div> 
        <div class="form-group"> 
          <input type="text" class="form-control datepicker" placeholder="Дата вылета" required> 
        </div> 
        <div class="form-group"> 
          <input type="number" class="form-control" min="1" placeholder="Кол-во ночей" required> 
        </div> 
        <div class="form-group"> 
          <input type="number" class="form-control" min="1" placeholder="Кто поедет" required> 
        </div> 
        <button type="submit" class="btn btn-warning">Искать</button> 
      </form> 
 
    </div> 
    <div role="tabpanel" class="tab-pane" id="tab2"> 
      Горящие туры 
    </div> 
  </div> 
</div>