icon RUS

80

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

20 января 2022

adams

adams добавляет вопрос [#37 Как расположить объекты по правому краю?]

7 октября 2021

Владимир

Владимир добавляет вопрос [#36 Два календаря на странице на одном не работает...]

22 мая 2021

Andrukva

Andrukva добавляет вопрос [#35 Добавление фоновой картинки и адаптация ее под...]

18 мая 2021

МИХАИЛ

МИХАИЛ добавил(а) комментарий на [Какие редакторы для Bootstrap вы используете]

VSCode с плагином для Bootstrap.

21 марта 2021

Vadim

Vadim добавил(а) комментарий на [#33 как сделать bootstrap modal на всю ширину экра...]

В общем случае, модальное окно будет занимать всю ширину экрана, если его родительский блок занимает всю ширину экрана. Не зная структуры твоей страницы, где находится твое модальное окно и что там происходит вообще, сложно подсказать точно. Нужно смотреть полный код, со стилями. В частности, внутри чего завернуто твоё модальное окно.
Vadim

Vadim оценил(а) комментарий на [#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 марта 2021

2DROTS

2DROTS добавляет вопрос [#34 css]

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');
    });   
});
Александр Попов

Александр Попов добавляет вопрос [#33 как сделать bootstrap modal на всю ширину экра...]

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();

Активность