icon RUS

Лента активности

10 декабря 2020

imazin

imazin добавил комментарий на [#27 как быстро закрыть bootstrap modal?]

вообще за анимацию модального окна отвечает класс .fade Если его убрать то можно увидеть как статично оно становится на открытии и закрытии. Если нужно сделать только на закрытии, то можно удалять этот класс перед $('#a').modal('hide'); через событие hide.bs.modal и потом снова возвращать можно тоже на событии но уже show.bs.modal

Здесь пример jsfiddle

$(function () {
    $(".custom-close").on('click', function() {
       $('#a').modal('hide');
    });
    
    $('#a').on('hide.bs.modal', function (e) {
      $('#a').removeClass('fade');
    });
    
    $('#a').on('show.bs.modal', function (e) {
      $('#a').addClass('fade');
    });   
});

7 декабря 2020

Сергей Гривцов

Сергей Гривцов добавляет вопрос [#32 как сделать Bootstrap сетку]

imazin

imazin добавил комментарий на [#29 радио кнопки Bootstrap не работают]

попробуйте применить onclick на lable
    <label class="btn btn-primary" onclick="alert('Scenery!')">
        <input type="radio" id="scenery-option" /> Scenery
    </label>

4 декабря 2020

imazin

imazin добавил комментарий на [#31 как стилизовать bootstrap чекбокс switch]

есть один миксин для checkbox switch c ним можно использовать классы .custom-switch-sm, .custom-switch-md, .custom-switch-lg, .custom-switch-xl
Здесь пример

или этот css


.custom-switch.custom-switch-sm .custom-control-label {
  padding-left: 1rem;
  padding-bottom: 1rem;
}
.custom-switch.custom-switch-sm .custom-control-label::before {
  height: 1rem;
  width: calc(1rem + 0.75rem);
  border-radius: 2rem;
}
.custom-switch.custom-switch-sm .custom-control-label::after {
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  border-radius: calc(1rem - (1rem / 2));
}
.custom-switch.custom-switch-sm .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(calc(1rem - 0.25rem));
}
.custom-switch.custom-switch-md .custom-control-label {
  padding-left: 2rem;
  padding-bottom: 1.5rem;
}
.custom-switch.custom-switch-md .custom-control-label::before {
  height: 1.5rem;
  width: calc(2rem + 0.75rem);
  border-radius: 3rem;
}
.custom-switch.custom-switch-md .custom-control-label::after {
  width: calc(1.5rem - 4px);
  height: calc(1.5rem - 4px);
  border-radius: calc(2rem - (1.5rem / 2));
}
.custom-switch.custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(calc(1.5rem - 0.25rem));
}
.custom-switch.custom-switch-lg .custom-control-label {
  padding-left: 3rem;
  padding-bottom: 2rem;
}
.custom-switch.custom-switch-lg .custom-control-label::before {
  height: 2rem;
  width: calc(3rem + 0.75rem);
  border-radius: 4rem;
}
.custom-switch.custom-switch-lg .custom-control-label::after {
  width: calc(2rem - 4px);
  height: calc(2rem - 4px);
  border-radius: calc(3rem - (2rem / 2));
}
.custom-switch.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(calc(2rem - 0.25rem));
}
.custom-switch.custom-switch-xl .custom-control-label {
  padding-left: 4rem;
  padding-bottom: 2.5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::before {
  height: 2.5rem;
  width: calc(4rem + 0.75rem);
  border-radius: 5rem;
}
.custom-switch.custom-switch-xl .custom-control-label::after {
  width: calc(2.5rem - 4px);
  height: calc(2.5rem - 4px);
  border-radius: calc(4rem - (2.5rem / 2));
}
.custom-switch.custom-switch-xl .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(calc(2.5rem - 0.25rem));
}

Павел

Павел добавил(а) комментарий на [#31 как стилизовать bootstrap чекбокс switch]

попробуйте измените ширину label::before и label:after
.custom-switch .custom-control-label::before {
    width:50px !important; 
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
   background-color: #fff;
   transform: translateX(1.75rem)!important;
}

3 декабря 2020

Соня

Соня добавляет вопрос [#31 как стилизовать bootstrap чекбокс switch]

2 декабря 2020

Mosoyne

Mosoyne добавил комментарий на [#28 Как я могу инициализировать разные виды попове...]

Это действительно вопрос селектора jQuery, который вы используете. Почему бы не дать каждому элементу popover уникальный идентификатор? Затем инициализируйте их по отдельности с помощью id…

<a href="" id="item1" data-toggle="popover">popover element</a>
<a href="" id="item2" data-toggle="popover">popover element</a>

$('#item1').popover();
$('#item2').popover();

27 ноября 2020

Леонид

Леонид добавляет вопрос [#29 радио кнопки Bootstrap не работают]

26 ноября 2020

Иван

Иван добавил комментарий на [#26 Фокус в поле ввода при нажатии кнопки]

Нужна задержка используйте setTimeout
$("#regularButton").click(function() {
  setTimeout(function() {
    $("#test-id").focus();
  }, 1000);
});

24 ноября 2020

imazin

imazin добавил комментарий на [#25 Как исправить размер изображения в карусели]

попробуйте применить следующий стиль на <img>
img{
    object-fit: cover;
    vertical-align: middle;
    border-style: none;
    height: 70vh;
}

Пример на https://jsfiddle.net

22 ноября 2020

Евгений

Евгений добавляет вопрос [#27 как быстро закрыть bootstrap modal?]

21 ноября 2020

Евгений

Евгений добавил(а) комментарий на [#24 Как центрировать div в колонке?]

То что надо. Спасибо)

Активность