Популярные ответы с меткой

12 голосов

В каком месте страницы лучше подключать js-файлы?

Лучше подключать JavaScript в конце, т.к. время загрузки скриптов можно потратить с пользой на оформление страницы, что собственно bootstrap и делает. Многие браузеры отрисовывают контент по мере ...
Cobalt's user avatar
  • 633
10 голосов
Принятый

Bootstrap отключить закрытие модального окна при нажатии на темный фон

<script type="text/javascript"> $('#myModal').modal({ backdrop: 'static', keyboard: false }) </script> Или <div class="modal fade" id="myModal" role="dialog" data-...
SVE's user avatar
  • 22.3k
10 голосов
Принятый

Не работает "hidden" в bootstrap 4

В beta версии в очередной раз все переиграли и теперь группа классов имеет вид: .d-*-none Стоит так же обратить внимание, что теперь условия применяются не на конкретный диапазон, например, только ...
Grundy's user avatar
  • 80k
10 голосов

Не работает "hidden" в bootstrap 4

Классы hidden-* и visible-* в бета-версии Bootstrap 4 удалены. Если вы хотите скрыть элемент на определенных уровнях или контрольных точках в Bootstrap 4, используйте классы отображения d- *. hidden-...
soledar10's user avatar
  • 27.4k
9 голосов

Изменить высоту карусели Bootstrap

Растянуть изображения на всю ширину страницы .carousel-inner img { height: auto; width: 100%; } @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); ....
Gleb Kemarsky's user avatar
9 голосов
Принятый

Как в WordPress зарегистрировать и добавить выпадающее при наведении меню?

Нужно использовать класс Walker, следующий код при добавлении в function.php, добавляет нужные классы к пунктам меню и ссылкам внутри него, при этом стандартные классы меню wordpress не выводятся. ...
pepel_xD's user avatar
  • 1,077
9 голосов

Что такое Bootstrap?

Рекомендую учебный раздел на Webreference.ru. Там изложены базовые понятия Бутстрапа, а  рядом — справочники по CSS и HTML. Бутстрап — конструктор с набором ...
Gleb Kemarsky's user avatar
8 голосов
Принятый

Как Bootstrap переключается между размерами экранов (md-xs)

В бутстрапе адаптивность достигается за счет медиа запросов. Они прописываются в стилях css. Внешний вид страницы напрямую зависит от шрины окна баузера, в том числе от ширины окна браузера устройства....
kizoso's user avatar
  • 9,303
8 голосов

Занять div`ом всю оставшуюся высоту. Как?

Для такой задачи подходит flex-box. Нужно разместить блоки в контейнере flex 100%-высоты, а в блок, который нужно растянуть, добавить правило flex-grow .flex { display: flex; flex-...
Crantisz's user avatar
  • 9,710
7 голосов
Принятый

Настройка navbar'a

Не совсем понятно, что Вы хотите, но предположу: ПРИМЕР на JSBIN .navbar-2 .navbar-collapse { background: radial-gradient(#265a88 , #337ab7); } .navbar-2.navbar-default .navbar-nav > ...
SVE's user avatar
  • 22.3k
7 голосов
Принятый

Одно модальное окно с разным содержимым

Вариант 1: С помощью JavaScript динамически строить содержимое внутри окна. Вариант 2: Через ajax подгружать содержимое форм и помещать его внутрь окна.
Dmitry Kozlov's user avatar
7 голосов
Принятый

Как сделать так, чтобы правая колонка всплывала вверх?

Бутстрап умеет менять колонки местами: http://getbootstrap.com/css/#grid-column-ordering Их надо расположить так, как они будут стоять на мобильном, и при переходе к широкому экрану ...
Gleb Kemarsky's user avatar
7 голосов
Принятый

Для чего нужен отрицательный margin и положительный padding в bootstrap?

Это сделано для выравнивания. У каждой колонки слева и справа есть padding, равный 15px. Он нужен для генерации одинакового отступа между колонками. Однако в этом случае отступ слева у первой и ...
VenZell's user avatar
  • 19.8k
7 голосов
Принятый

Фотогалерея на bootstrap для изображений разных размеров

Попробуйте плагин фоторама. Все картинки разных размеров. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/...
Stanislav Hmelevsky's user avatar
7 голосов
Принятый

Bootstrap 4: зачем нужен метод $('.alert').alert()

Бутстрап предусмотрел два способа использовать свои JS плагины: Написать скрипт с помощью методов и событий из документации Бутстрапа. Расставить атрибуты data, как указано в ...
Gleb Kemarsky's user avatar
6 голосов
Принятый

Сдвиг на мобильном виде

В подобных ситуациях, чтобы выявить проблемный блок - действуйте так: Открывайте веб-инспектор, переходите на вкладку Elements (там, где html-элементы) и поочередно удаляйте крупные блоки, наблюдая ...
Виталий Емельянцев's user avatar
6 голосов
Принятый

Как в bootstrap растянуть содержимое контейнера на всю ширину страницы?

Для этого в bootstrap используется класс container-fluid Пример [class*=container] { border: 1px solid #ccc; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap....
soledar10's user avatar
  • 27.4k
6 голосов
Принятый

Конфликт bootstrap 4 и angular 4 - некорректно вычисляется высота блоков

Вы не указали стили к классу .row .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } Результат: ...
Даниил's user avatar
  • 3,443
6 голосов

Картинки разных размеров в ровный ряд

.wrap { display: flex; background: #ccc; padding: 5px; } .col { display: flex; flex-direction: column; } .col__item { display: flex; width: 100px; height: 100px; ...
Илья Шишлачев's user avatar
6 голосов

Что такое top-level position в HTML?

Они имели ввиду свойство z-index которое должно отвечать за позиционирование элемента по оси Z (ближе к пользователю или дальше), что бы его не перекрывали другие элементы. (На данный момент это ...
DiDex's user avatar
  • 2,298
6 голосов

Как сделать такой коллапс

const accordeonItems = document.querySelectorAll('.accordeon-item'); let timer; accordeonItems.forEach((item, i) => { if(i > 0){ //"прижимаем" вправо все элементы, начиная со второго ...
Vadzim Liashkevich's user avatar
6 голосов

Всплывающая форма обратной связи при наведении на картинку

$('[data-toggle="modal"]').hover(function(){ $('#exampleModal').modal('show'); }); Пример: $('[data-toggle="modal"]').hover(function() { $('#exampleModal').modal('show'); }); <link rel=...
SVE's user avatar
  • 22.3k
6 голосов

Bootstrap 5 как подсветить input(сделать обводку красной) при ошибке?

Есть! Класс is-invalid добавь его к input Сейчас посмотрел, почему то в 5-ой версии bootstrap это почему то так же явно в документации не указали(может ещё поправят конечно), так что исследуй ...
Евгений Николаев's user avatar
5 голосов
Принятый

Управление стилями по умолчанию Summernote

Проблема оказалась тривиальной: у Summernote нет конфигурации включенных стилей по умолчанию (во всяком случае, я ничего такого не обнаружил), однако он подтягивает стили того элемента, на котором ...
etki's user avatar
  • 36.1k
5 голосов
Принятый

Не работает валидация форм с помощью Bootstrap

В коде инициализации валидатора ошибка - скобка поставлена неверно и поле stringLength не входит в объект validators. $(document).ready(function () { $('#timeValidationForm').bootstrapValidator({ ...
FLCL's user avatar
  • 607
5 голосов
Принятый

Разные блоки на разных устройствах

Не надо придумывать велосипеды, в бутстрапе уже все это есть http://getbootstrap.com/css/#visible-on
apelsinka223's user avatar
  • 1,268
5 голосов

В каком месте страницы лучше подключать js-файлы?

стандартное правило, если подключать javaScript вначале то (в общем случае, но не всегда) body не будет отрисовываться, пока не выполнится подключаемый js скрипт. потому рекомендуется подключать js в ...
Witalij Kaa's user avatar
5 голосов
Принятый

Как настроить ширину input в форме с bootstrap 3?

Прочитайте документацию по bootstrap3 подробнее, Вы путаете основы - col-xs-N - это колонка, которая должна быть помещена в строку row; Вам необходимо сделать так: <div class="container"> <...
Alex's user avatar
  • 6,478
5 голосов

убрать href ссылки для media print

@media print { a[href]:after { content: ""; } } Разумеется, при этом это переопределение должно идти после стилей бутстрапа.
Qwertiy's user avatar
  • 121k

Only top scored, non community-wiki answers of a minimum length are eligible