Ответы пользователя по тегу Bootstrap
  • Как сделать анимацию перекрытия в карсели бутстрап?

    Sergei_Erjemin
    @Sergei_Erjemin
    Улыбайся, будь самураем...
    Какая версия Bootstrap? В 5.1.x, например, надо добавить класс carousel-fade. В первой строчке твоего кода получится:
    <div id="carouselExampleInterval" class="carousel slide carousel-fade" data-bs-ride="carousel">
    Ответ написан
    Комментировать
  • Как в Bootstrap настроить Поиск?

    Sergei_Erjemin
    @Sergei_Erjemin
    Улыбайся, будь самураем...
    ...для этого в form надо указать actionи method...
    Ответ написан
    Комментировать
  • Как сделать самозакрывающийся collapse в bootstrap?

    Sergei_Erjemin
    @Sergei_Erjemin Автор вопроса
    Улыбайся, будь самураем...
    Пока вопрос решился добавлением:
    $('#id_коллапсатора').collapse('hide')"
    для каждого collapse делается свой id. Формируются JavaScript-функции для установки каждого блока в collapse в состояние нужное для каждого управляющего этими collapse элемента. Эти функции вызываются по onclick для каждого управляющего элемента.

    P.S. Если нужно чтобы некоторые collapse управлялись с нескольких управляющих элементов, то надо отказаться от class="in". Инициализировать исходное состояние всех collapse нужно вызовом соответствующей ему JavaScrip-функции. Почему-то вызов надо сделать дважды, иначе исходное состояние не устанавливается.

    Пример:
    <script type="text/javascript">
    function in_ntr(){ // колапсаторы для раздела ВОЙТИ
      $('#ili').collapse('hide');
      $('#mail').collapse('hide');
      $('#pwd1').collapse('show');
      $('#pwd2').collapse('hide');
      $('#capt').collapse('hide');
      $('#b_vost').collapse('hide');
      $('#b_reg').collapse('hide');
      $('#b_vhod').collapse('show');
    }
    function in_reg(){ // колапсаторы для раздела РЕГИСТРАИЦЯ
      $('#ili').collapse('hide');
      $('#mail').collapse('show');
      $('#pwd1').collapse('show');
      $('#pwd2').collapse('show');
      $('#capt').collapse('hide');
      $('#b_vhod').collapse('hide');
      $('#b_vost').collapse('hide');
      $('#b_reg').collapse('show');
    }
    function in_vost(){ // колапсаторы для раздела ВОССТАНОВИТЬ ПАРОЛЬ
      $('#ili').collapse('show');
      $('#mail').collapse('show');
      $('#pwd1').collapse('hide');
      $('#pwd2').collapse('hide');
      $('#capt').collapse('show');
      $('#b_vhod').collapse('hide');
      $('#b_reg').collapse('hide');
      $('#captcha').load('captcha.html'); // подгрузить GOOGLE CAPTCHA
      $('#b_vost').collapse('show');
    }
    $(document).ready(function(){
      in_ntr(); // установить колапсаторы в исходное состояние, раздел ВОЙТИ
    })
    </script>
    
    <form id="login-logout-form">
      <div class="input-group">
        <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
        <input type="text" class="form-control" id="login" placeholder="login" />
       </div>
    
       <dIV class="collapse" id="ili">
          <small class="input-group">или<br/></small>
        </dIV>
    
        <dIV class="collapse" id="mail">
          <div class="input-group">
            <div class="input-group-addon">@</div>
            <input type="email" class="form-control" id="email" placeholder="you@email.ru" />
          </div>
        </dIV>
    
        <dIV class="collapse" id="pwd1">
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
            <input type="password" class="form-control" id="pwd_main" placeholder="passport" />
          </div>
        </dIV>
    
        <dIV class="collapse" id="pwd2">
          <div class="input-group">
            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
            <input type="password" class="form-control" id="pwd_rep" placeholder="повторите passport" />
          </div>
        </dIV>
    
        <dIV class="collapse" id="capt">
          <div class="input-group" id="captcha"><!---по onclick="$('#capcha').load('capcha');" погрузиться каптча ---></div>
        </dIV>
    
        <dIV class="collapse" id="b_vhod">
          <div class="input-group"><nobr>
            <button type="submit" class="btn btn-primary btn-sm">Войти</button>
            <small>
              <a href="#" data-toggle="collapse" data-target="#b_reg" onclick="in_reg()">Регистрация</a>
              <a href="#" data-toggle="collapse" data-target="#b_vost" onclick="in_vost()">Воcстановить пароль</a>
            </small>
           </nobr></div>
        </dIV>
    
        <dIV class="collapse" id="b_vost">
          <div class="input-group"><nobr>
            <button type="submit" class="btn btn-primary btn-sm">Восстановить пароль</button>
              <small>
                <a href="#" data-toggle="collapse" data-target="#b_reg" onclick="in_reg()">Регистрация</a>
                <a href="#" data-toggle="collapse" data-target="#b_vhod" onclick="in_ntr()">Войти</a>
              </small>
            </nobr></div>
          </dIV>
    
           <dIV class="collapse" id="b_reg">
              <div class="input-group"><nobr>
                <button type="submit" class="btn btn-primary btn-sm">Регистрация</button>
                <small>
                  <a href="#" data-toggle="collapse" data-target="#b_vhod" onclick="in_ntr()">Войти</a>
                  <a href="#" data-toggle="collapse" data-target="#b_vost" onclick="in_vost()">Воcстановить пароль</a>
                </small>
             </nobr></div>
           </dIV>
    </form>


    Внутри подгружается блок GOOGLE CAPTHCA:
    captcha.html
    <script src="https://www.google.com/recaptcha/api.js?hl=ru&" async defer></script>
    <div class="g-recaptcha" data-sitekey="ваш-ключ" data-type="image" data-theme="light"></div>
    Ответ написан
    Комментировать
  • Как привязать footer к низу экрана в Twitter Bootstrap?

    Sergei_Erjemin
    @Sergei_Erjemin
    Улыбайся, будь самураем...
    Блин… что за советы… там есть встроенный класс: navbar-fixed-bottom

    <div class="navbar-fixed-bottom row-fluid">
          <div class="navbar-inner">
              <div class="container">
    
    Ответ написан
    7 комментариев