Bootstrap или CSS с Div, загружающим основное содержимое с помощью левого меню и загружающим дополнительное содержимое с помощью щелчков по ссылке основного содержимого (т. Е. Div как фреймы)

Question

Я создал свой собственный макет Верхний колонтитул, Навбар, Левое меню, Контент, Правый контент, Нижний колонтитул до bootstrap Контейнер-флюид, Строка и соответствующие размеры столбцов col-md12 для заголовка, навигационной панели, нижнего колонтитула и col-md-3 col-md6, col-md-3. Хотя это как-то заставило его работать с помощью сообщества, каков правильный совет и стандартный подход к этой теме c.

Текущее состояние: я искал в stackoverflow / google и нашел какое-то решение, в то же время, что является стандартным процессом и как сайт bootstrap решает эту проблему. то есть, bootstrap справка по документации имеет заголовок, панель навигации, левое меню, контент и правое меню и загружается аналогично моему вопросу.

Ограничения: я не хочу использовать framews или iframes, только с ajax bootstrap с js или css и javascript необходимо создать аналогичный тип фрейма, цель которого достигается с помощью div, когда при нажатии одного меню из одного div другой div получает основное содержимое, и снова, когда основное содержимое имеет темы щелкнул sub = содержимое загружается в другой div

How-To: щелчок левой кнопкой мыши в меню (div) загружает содержимое в div div

Когда я нажимаю на левое меню, ссылки на содержимое должен быть загружен в Content Menu div через ajax динамически (это должно быть разработано изначально без веб-сервера или веб-сервера vs-кода), что является стандартным способом сделать это

How-To: После того, как контент Загруженные в Контенте, некоторые темы щелкали по контенту - ссылка на контент загружалась на Страницу с правым контентом.

Инструкции: Как только мы начнем, щелкните по любому элементу слева. В меню должно быть очищено правое содержимое, так как оно устарело для нового содержимого левого меню.

How-To: сделать это через стандартную bootstrap ссылку (как) bootstrap site

  <div class="container-fluid">
   <div class="row">
        <div id="header" class="col-md-12">Header</div>
   </div>
   <div class="row">
        <div id="navbar" class="col-md-12">Navbar

        </div>
   </div>
   <div class="row">
        <div id="left_menu" class="col-md-3">
            <h3>Table of Contents</h3>
            <div id='booklist'>
            <a id='book' href="book1/book1.intro.html">Introduction</a><br/>
            <a id='book' href="book1/book1.preface.html">Preface</a><br/>
            <a id='book' href="book1/book1.chapter1.html">Chapter1: Initial Setup</a><br/>
            <a id='book' href="book1/book1.chapter2.html">Chapter2: Overview</a><br/>
            <a id='book' href="book1/book1.about.html">About</a><br/>
            </div>
        </div>
        <div id="content" class="col-md-6 overflow-auto">   
            <section id="dynamic"></section>
        </div>
        <div id="right_pane" class="col-md-3">
            <section id="topics"></section>

        </div>
    </div>
    <div class="row">
        <div id="footer" class="col-md-12">&copy; Layout1</div>
    </div>

 <script>
    $(document).ready(function(){
        $("div#booklist a").click(function(e){
            e.preventDefault();
            $("#dynamic").load($(this).attr('href'));
        });
        $("div#infolist a").click(function(e){
            e.preventDefault();
            $("#topics").load($(this).attr('href'));
        });
    });
</script>

Пожалуйста, сообщите.

Спасибо, div content layout