12
голосов
В каком месте страницы лучше подключать js-файлы?
Лучше подключать JavaScript в конце, т.к. время загрузки скриптов можно потратить с пользой на оформление страницы, что собственно bootstrap и делает. Многие браузеры отрисовывают контент по мере ...
10
голосов
Принятый
Bootstrap отключить закрытие модального окна при нажатии на темный фон
<script type="text/javascript">
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
</script>
Или
<div class="modal fade" id="myModal" role="dialog" data-...
10
голосов
Принятый
Не работает "hidden" в bootstrap 4
В beta версии в очередной раз все переиграли и теперь группа классов имеет вид:
.d-*-none
Стоит так же обратить внимание, что теперь условия применяются не на конкретный диапазон, например, только ...
10
голосов
Не работает "hidden" в bootstrap 4
Классы hidden-* и visible-* в бета-версии Bootstrap 4 удалены. Если вы хотите скрыть элемент на определенных уровнях или контрольных точках в Bootstrap 4, используйте классы отображения d- *.
hidden-...
9
голосов
Изменить высоту карусели Bootstrap
Растянуть изображения на всю ширину страницы
.carousel-inner img {
height: auto;
width: 100%;
}
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
....
9
голосов
Принятый
Как в WordPress зарегистрировать и добавить выпадающее при наведении меню?
Нужно использовать класс Walker, следующий код при добавлении в function.php, добавляет нужные классы к пунктам меню и ссылкам внутри него, при этом стандартные классы меню wordpress не выводятся.
...
9
голосов
Что такое Bootstrap?
Рекомендую учебный раздел на Webreference.ru. Там изложены базовые понятия Бутстрапа, а рядом — справочники по CSS и HTML.
Бутстрап — конструктор с набором ...
8
голосов
Принятый
Как Bootstrap переключается между размерами экранов (md-xs)
В бутстрапе адаптивность достигается за счет медиа запросов. Они прописываются в стилях css. Внешний вид страницы напрямую зависит от шрины окна баузера, в том числе от ширины окна браузера устройства....
8
голосов
Занять div`ом всю оставшуюся высоту. Как?
Для такой задачи подходит flex-box. Нужно разместить блоки в контейнере flex 100%-высоты, а в блок, который нужно растянуть, добавить правило flex-grow
.flex {
display: flex;
flex-...
7
голосов
Принятый
Настройка navbar'a
Не совсем понятно, что Вы хотите, но предположу:
ПРИМЕР на JSBIN
.navbar-2 .navbar-collapse {
background: radial-gradient(#265a88 , #337ab7);
}
.navbar-2.navbar-default .navbar-nav > ...
7
голосов
Принятый
Одно модальное окно с разным содержимым
Вариант 1: С помощью JavaScript динамически строить содержимое внутри окна.
Вариант 2: Через ajax подгружать содержимое форм и помещать его внутрь окна.
7
голосов
Принятый
Как сделать так, чтобы правая колонка всплывала вверх?
Бутстрап умеет менять колонки местами: http://getbootstrap.com/css/#grid-column-ordering
Их надо расположить так, как они будут стоять на мобильном, и при переходе к широкому экрану ...
7
голосов
Принятый
Для чего нужен отрицательный margin и положительный padding в bootstrap?
Это сделано для выравнивания.
У каждой колонки слева и справа есть padding, равный 15px. Он нужен для генерации одинакового отступа между колонками. Однако в этом случае отступ слева у первой и ...
7
голосов
Принятый
Фотогалерея на bootstrap для изображений разных размеров
Попробуйте плагин фоторама. Все картинки разных размеров.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/...
7
голосов
Принятый
Bootstrap 4: зачем нужен метод $('.alert').alert()
Бутстрап предусмотрел два способа использовать свои JS плагины:
Написать скрипт с помощью методов и событий из документации Бутстрапа.
Расставить атрибуты data, как указано в ...
6
голосов
Принятый
Сдвиг на мобильном виде
В подобных ситуациях, чтобы выявить проблемный блок - действуйте так:
Открывайте веб-инспектор, переходите на вкладку Elements (там, где html-элементы) и поочередно удаляйте крупные блоки, наблюдая ...
6
голосов
Принятый
Как в bootstrap растянуть содержимое контейнера на всю ширину страницы?
Для этого в bootstrap используется класс container-fluid
Пример
[class*=container] {
border: 1px solid #ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap....
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;
}
Результат:
...
6
голосов
Картинки разных размеров в ровный ряд
.wrap {
display: flex;
background: #ccc;
padding: 5px;
}
.col {
display: flex;
flex-direction: column;
}
.col__item {
display: flex;
width: 100px;
height: 100px;
...
6
голосов
Что такое top-level position в HTML?
Они имели ввиду свойство z-index которое должно отвечать за позиционирование элемента по оси Z (ближе к пользователю или дальше), что бы его не перекрывали другие элементы.
(На данный момент это ...
6
голосов
Как сделать такой коллапс
const accordeonItems = document.querySelectorAll('.accordeon-item');
let timer;
accordeonItems.forEach((item, i) => {
if(i > 0){
//"прижимаем" вправо все элементы, начиная со второго
...
6
голосов
Всплывающая форма обратной связи при наведении на картинку
$('[data-toggle="modal"]').hover(function(){
$('#exampleModal').modal('show');
});
Пример:
$('[data-toggle="modal"]').hover(function() {
$('#exampleModal').modal('show');
});
<link rel=...
6
голосов
Bootstrap 5 как подсветить input(сделать обводку красной) при ошибке?
Есть! Класс is-invalid добавь его к input
Сейчас посмотрел, почему то в 5-ой версии bootstrap это почему то так же явно в документации не указали(может ещё поправят конечно), так что исследуй ...
5
голосов
Принятый
Управление стилями по умолчанию Summernote
Проблема оказалась тривиальной: у Summernote нет конфигурации включенных стилей по умолчанию (во всяком случае, я ничего такого не обнаружил), однако он подтягивает стили того элемента, на котором ...
5
голосов
Принятый
Не работает валидация форм с помощью Bootstrap
В коде инициализации валидатора ошибка - скобка поставлена неверно и поле stringLength не входит в объект validators.
$(document).ready(function () {
$('#timeValidationForm').bootstrapValidator({
...
5
голосов
Принятый
Разные блоки на разных устройствах
Не надо придумывать велосипеды, в бутстрапе уже все это есть http://getbootstrap.com/css/#visible-on
5
голосов
В каком месте страницы лучше подключать js-файлы?
стандартное правило, если подключать javaScript вначале то (в общем случае, но не всегда) body не будет отрисовываться, пока не выполнится подключаемый js скрипт. потому рекомендуется подключать js в ...
5
голосов
Принятый
Как настроить ширину input в форме с bootstrap 3?
Прочитайте документацию по bootstrap3 подробнее, Вы путаете основы - col-xs-N - это колонка, которая должна быть помещена в строку row;
Вам необходимо сделать так:
<div class="container">
<...
5
голосов
убрать href ссылки для media print
@media print {
a[href]:after {
content: "";
}
}
Разумеется, при этом это переопределение должно идти после стилей бутстрапа.
Only top scored, non community-wiki answers of a minimum length are eligible
Связанные метки
bootstrap × 2591css × 1336
html × 1311
javascript × 557
jquery × 354
вёрстка × 188
css3 × 133
html5 × 121
php × 104
bootstrap4 × 98
адаптивная-верстка × 74
wordpress × 52
reactjs × 42
django × 40
веб-программирование × 34
ajax × 31
sass × 27
python × 26
laravel × 26
flexbox × 26
angularjs × 25
vue.js × 23
asp.net-mvc × 23
java × 20
c# × 19