icon RUS

Последняя активность

imazin

imazin добавил комментарий на [#41 Всплывающие сообщения не работает же ,и когда ...]

В документации в примере для кнопки Live /docs/4.6/components/toasts/#live запускается ещё код

$("#liveToastBtn").click(function() {
  $("#liveToast").toast("show");
});
imazin

imazin добавил комментарий на [#42 а бутстрапе от 4.6 и 5.1 нету разницы только о...]

Можете посмотреть какие разделы документации появились в сравнении /docs/overview
Или здесь есть кнопка новое в v5 https://cheatsheet.getbootstrap.su/
imazin

imazin оценил комментарий на [Как переопределить CSS по умолчанию в Bootstrap]

Всем привет. А почему нет новых тем? неужели bootstrap на самом деле неактуален? Ради интереса, зашел на npmjs.com — там за последнюю неделю, 5 589 822 скачиваний, просто вдумайтесь — почти 6 млн. в НЕДЕЛЮ!!! и это только с одного сервиса, а еще ведь устанавливают локально, просто файлами. да и CDN еще.Вобщем что хочу сказать, статье более 2х лет. Интересно мнение как самого автора, так и читателей, почему использовать bootstrap считается неактуальным? Какие причины? Как по мне, это крутая технология. которая актуально по всему миру, разобраться в которой требует много времени, но по итогу думаю, те знания. которые получишь — точно пригодяться. Некоторые используют только сетку, но думаю просто не хотят морочиться и углубиться в технологию с головой. Сколько у вас уходит на адаптацию под мобилки и прочих девайсов, каждого сайта?.. А сколько потраченного времени в сумме на адаптацию в месяц или год. А тут все из коробки. Кто нибудь может объяснить чем адаптив от Bootstrap хуже «самописного»? Конечно. при верстке «боевого проекта» на Bootstrap сложно добиться идеального совпадения, но опять же думаю, это просто от неполного знания технологий. все что видел в (ru)нете, это поверхностные описания которые мягко говоря ни о чем. Как просто установить, как стартануть, как сделать адаптивное меню, как переопределить цвет. На этом все… более никто ничего не пишет. В общем, пишут то, что сами разобрали за пару часов, самые азы. Если кто то знает «годный современный ресурс» киньте ссылку пожалуйста, мне очень интересно. В заключеннии скажу. кому так же как и мне интересна данная тема в 2023 году, пишите в лс.У меня много вопросов, по Bootstrap, на которые пока не знаю ответов, и пока это мое хобби, которое хочу со временем успешно использовать в верстке.
imazin

imazin добавил комментарий на [Как разместить div горизонтально по центру в Boots...]

Спасибо! Исправили
imazin

imazin оценил комментарий на [Как разместить div горизонтально по центру в Boots...]

Попробовал ваш код ни фига не получается. Потом зашел в «Смотреть в Codepen» и там
увидел что надо добавить css стили. Почему об этом в статье ничего не сказано?
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');
    });   
});

imazin

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

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

imazin

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

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

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

imazin оценил комментарий на [#24 Как центрировать div в колонке?]

Как вариант
<header>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-5 d-flex ">
                <div  class="mx-auto">
                    <h3>> 1</h3>                
                    <h3>> 2</h3>
                    <h3>> 3</h3>
                    <h3>> 4</h3>                
                    <h3>> 5</h3>
                    <h3>> 6</h3>
                </div>
            </div>
        </div>
    </div> 
</header>
imazin

imazin добавил комментарий на [#23 Как в Bootstrap 3 зафиксировать меню вверху пр...]

Если я правильно понял цель прилепить только тогда когда прокрутка достигает навигацию
попробуйте заменить в классе .navbar-fixed-top свойство position: fixed на sticky либо добавьте новый класс .navbar-sticky-top, чтобы не портить фиксированное расположение
расположите ниже класса .navbar-fixed-top, чтобы перекрыть значение
.navbar-sticky-top {
    position: sticky;
}

и используйте вместе с .navbar-fixed-top

imazin

imazin добавил комментарий на [#22 Как выделить подпункт в боковом меню sidebar]

Насколько мне известно в исходниках bootstrap нет sidebar, он также не описан в документации. sidebar есть в исходниках документации bootstrap-4.4.1\site\docs\4.4\assets\scss\_sidebar.scss
Необходимо смотреть у вас текущую реализацию, возможно она вообще сторонняя судя по описанному sidebar-item
А так обычно два варианта либо класс .active на <li> либо на <a>


Посмотрите в исходном коде что отвечает за :hover списка меню


imazin

imazin оценил комментарий на [#21 Система сеток flex Bootstrap 4]

А чем не устраивает bootstrap-grid.css, который поставляется в релизе B4?
imazin

imazin добавляет обсуждение [Компиляция и отслеживание Sass]

Активность