icon RUS

80

imazin / Комментарии

imazin
  • imazin
  • 10 месяцев назад
  • 5 лет назад
  • 7
imazin ответил на вопрос [#41 Всплывающие сообщения не работает же ,и когда хотел добавить кнопка есть ,а сам сообщение нету?!]

14:29

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

$("#liveToastBtn").click(function() {
  $("#liveToast").toast("show");
});
imazin ответил на вопрос [#42 а бутстрапе от 4.6 и 5.1 нету разницы только один разница есть вот это:]

13:45

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

09:24

вообще за анимацию модального окна отвечает класс .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 ответил на вопрос [#29 радио кнопки Bootstrap не работают]

08:22

попробуйте применить onclick на lable
    <label class="btn btn-primary" onclick="alert('Scenery!')">
        <input type="radio" id="scenery-option" /> Scenery
    </label>
imazin ответил на вопрос [#31 как стилизовать bootstrap чекбокс switch]

09:19

есть один миксин для 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 ответил на вопрос [#25 Как исправить размер изображения в карусели]

23:57

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

Пример на https://jsfiddle.net
imazin ответил на вопрос [#23 Как в Bootstrap 3 зафиксировать меню вверху при достижении верхней границы]

13:29

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

и используйте вместе с .navbar-fixed-top
imazin ответил на вопрос [#22 Как выделить подпункт в боковом меню sidebar]

21:01

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


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


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

22:51

Имеется ввиду, что не поддерживаются CSS переменные. Но не говорится про sass переменные с ними всё хорошо они работают и функционируют
imazin ответил Анастасия [#20 Почему Bootstrap использует устаревшие размеры точек перехода?]

22:38

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

собрал статью для начинающих Как переопределить CSS по умолчанию в Bootstrap есть видео можете посмотреть
imazin ответил на вопрос [#20 Почему Bootstrap использует устаревшие размеры точек перехода?]

22:25

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 ответил на вопрос [#17 Как преобразовать кнопку в спиннер?]

14:29 

$(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/
imazin добавил к обсуждению [Какие редакторы для Bootstrap вы используете]

20:33

Редактор кода или редактор шаблонов? К примеру онлайн редактор шаблонов layoutit Где можно накидать элементы и скачать получившийся шаблон
imazin ответил на вопрос [#12 Ширина поля Bootstrap изменяется при применении классов проверки]

02:49 

.form-inline input:not(.is-invalid),
.form-inline input:not(.is-valid) {
    padding-right: calc(1.5em + 0.75rem);
}

Активность