Я только что посетил эту страницу http://www.elmastudio.de/ и задался вопросом, можно ли с помощью Bootstrap 3 создать коллапс левой боковой панели.
Код для свертывания боковой панели сверху (только на телефоне):
<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
<span class="sr-only">Sidebar</span>
<span class="glyphicon glyphicon-check"></span>
</button>
Сама боковая панель имеет класс hidden-xs. Удаляется с помощью следующих js
$('.sidebar-toggle').click(function(){
$('#sidebar').removeClass('hidden-xs');
});
Если вы нажмете кнопку, боковая панель будет переключена сверху. Приятно видеть, как боковая панель ведет себя так, как показано на веб-сайте выше. Любая помощь приветствуется!
Ответы:
Бутстрап 3
Да, это возможно. Этот пример «вне холста» должен помочь вам начать работу.
https://codeply.com/p/esYgHWB2zJ
В основном вам нужно обернуть макет во внешний div и использовать медиа-запросы для переключения макета на меньших экранах.
Кроме того, здесь есть еще несколько примеров боковой панели Bootstrap
Бутстрап 4
Создать адаптивный «ящик» боковой панели навигации в Bootstrap 4?
источник
http://getbootstrap.com/examples/offcanvas/
Это официальный пример, для кого-то может быть лучше. Он находится в разделе примеров экспериментов, но, поскольку он является официальным, его следует обновлять до текущей версии начальной загрузки.
Похоже, они добавили файл css вне холста, используемый в их примере:
http://getbootstrap.com/examples/offcanvas/offcanvas.css
И немного кода JS:
источник
РЕДАКТИРОВАТЬ: я добавил еще один вариант для боковых панелей начальной загрузки.
На самом деле существует три способа сделать боковую панель bootstrap 3. Я старался сделать код максимально простым.
Фиксированная боковая панель
Здесь вы можете увидеть демонстрацию простой фиксированной боковой панели, которую я разработал, такой же высоты, как и страница.
Боковая панель в столбце
Я также разработал довольно простую боковую панель столбцов, которая работает на странице из двух или трех столбцов внутри контейнера. Требуется длина самого длинного столбца. Здесь вы можете увидеть демо
Панель приборов
Если вы используете панель управления загрузкой Google, вы можете найти несколько подходящих панелей, таких как эта . Однако для большинства из них требуется много кода. Я разработал приборную панель, которая работает без дополнительного javascript (рядом с javascript начальной загрузки). Вот демо
Для всех трех примеров вы, конечно, должны включить файлы jquery, bootstrap css, js и theme.css.
Ползунок
Если вы хотите, чтобы боковая панель скрывалась при нажатии кнопки, это также возможно с помощью небольшого JavaScript. Вот демонстрация
источник
Через Angular: используя
ng-class
Angular, мы можем скрыть и показать боковую панель.http://jsfiddle.net/DVE4f/359/
.
источник
Это не упоминается в документе, но левая боковая панель в Bootstrap 3 возможна с использованием метода "Collapse".
Как упоминалось в bootstrap.js:
Это означает, что добавление класса "width" в цель будет расширяться по ширине, а не по высоте:
http://jsfiddle.net/2316sfbz/2/
источник