icon RUS

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

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]

imazin

imazin добавил комментарий на [#20 Почему Bootstrap использует устаревшие размеры...]

Имеется ввиду, что не поддерживаются CSS переменные. Но не говорится про sass переменные с ними всё хорошо они работают и функционируют
imazin

imazin добавил комментарий на [#20 Почему Bootstrap использует устаревшие размеры...]

Такоё чувство что документацию ещё не читали) Начало работы/Настройка темы

собрал статью для начинающих Как переопределить CSS по умолчанию в Bootstrap есть видео можете посмотреть
imazin

imazin добавил комментарий на [#20 Почему Bootstrap использует устаревшие размеры...]

Bootstrap это инструмент и в исходном состоянии имеет значения по умолчанию
ничто не мешает изменить точки перехода на свой вкус, как и другие элементы

// File: theme.scss
// Override default BT variables:
$grid-breakpoints: (
        xs: 0,
        sm: 576px,
        md: 768px,
        lg: 992px,
        xl: 1200px,
        xxl: 1900px
);

$container-max-widths: (
        sm: 540px,
        md: 720px,
        lg: 960px,
        xl: 1140px,
        xxl: 1610px
);

// Import BT sources
@import "../node_modules/bootstrap/scss/bootstrap";

// Your CSS (SASS) rules here...
imazin

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

$(document).ready(function() {
	$(".btn.btn-primary").on("click", function() { 
   $(this).addClass("d-none");
   $(".spinner-border").removeClass("d-none");
  });
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<button class="btn btn-primary">
  Push Me
</button>
<div class="spinner-border d-none" role="status">
  <span class="sr-only">Loading...</span>
</div>


https://jsfiddle.net/dunglnh/uzvw8gmj/11/

Активность