Bootstrap боковой панели навигации, как на компоненты сайта

Я хотел бы построить боковую панель навигации, которая behavaves так же, как на странице bootsrap компонентов с той разницей, что оно должно появиться на левой стороне: http://getbootstrap.com/components/Bootstrap боковой панели навигации, как на компоненты сайта

Требования:

Установить активный класс, связанный с последним просмотренным заголовком
Сворачивания/разворачиванием детской

Есть ли предопределенный способ реализовать это?

источник

2016-04-29 user3631654

http://afeld.github.io/bootstrap-toc/

Вы можете найти точное оглавление бутстрапу используя на этой странице.

Использование

В верхней части нормальной установки Bootstrap (см их руководство по началу работы), вам нужно будет включать Bootstrap оглавление таблицы стилей и файлы JavaScript.

<!-- add after bootstrap.min.css --> 
<link rel="stylesheet" href="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.3.0/dist/bootstrap-toc.min.css"> 
<!-- add after bootstrap.min.js --> 
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v0.3.0/dist/bootstrap-toc.min.js"></script>

Via атрибутов данных

Простейшим.

Создайте элемент <nav> с атрибутом data-toggle="toc".

<nav id="toc" data-toggle="toc"></nav>

Вы можете разместить это в любом месте на странице, которая вам нравится. Поскольку этот плагин использует Scrollspy плагин Bootstrap, вы также должны добавить несколько атрибутов к <body>:

<body data-spy="scroll" data-target="#toc">

Via JavaScript

Если вам нужна настройка.

Если вы хотите создать свой навигационный элемент другим способом (например, в пределах одной страницы приложения), вы можете передать объект JQuery в Toc.init().

$(function() { 
var navSelector = '<something>'; 
var $myNav = $(navSelector); 
Toc.init($myNav); 
    $('body').scrollspy({ 
    target: navSelector 
    }); 
});

Смотрите документацию Scrollspy для получения дополнительной информации о инициализации этого плагина ,

Опции

При вызове Toc.init(), вы можете или передать в объект JQuery для <nav> элемента (как показано выше), или варианты объекта:

Toc.init({ 
    $nav: $('#myNav'), 
    // ... 
});

Все опции являются необязательными, если не указано другое.

источник

2016-04-29 13:14:57 Randy

Только для информации. Пример JS, взятый из документов, неверен: https: // github.com/afeld/bootstrap-toc/issues/18 – user3631654

@ user3631654 Вы можете обновить свой вопрос с помощью правильной информации, я сделал это сейчас для справок в будущем. – Randy

Bootstrap боковой панели навигации, как на компоненты сайта

ответ

Смежные вопросы