Report

Как сделать такое на бутстрапе 3?

Как сделать такое на бутстрапе 3?

Порекомендуйте пожалуйста статьи или видеоуроки по bootstrap.

Делаю первый раз верстку под bootstrap — решил осваивать фреймворк и все такое. Проблема — «плывет» при сужении экрана. Он высокий, 400px, фоном стоит картинка. При сужении экрана столбцы, которые не помещаются по ширине, уходят вниз, но картинка не «размножается» по вертикали (вариант repeat-y не срабатывает так, как надо). Далее, под футером стоит еще одна строка (div height:80px) более темная по фону (в ней копирайты). При сужении экрана она не уходит вниз под все выстроившиеся вертикально колонки footer, а остается «прилеплена» к нему снизу, таким образом частично закрывая столбцы футера.
Вот нормальный футер, который задуман:

 
А вот после сжатия экрана:

 
В варианте position: absolute; bottom: 0; блок просто залипал внизу страницы, "наезжая" на другие блоки, идущие до самого низа. Это уже пробовал.. и absolute, и fixed.  Как вариант, видится мне в разных моделях девайсов делать разный CSS для footer.. но не знаю, как это сделать; и вопрос .bottomfooter тоже остается. Вот HTML (bootstrap настроен на 24 колонки, не на дефолтовые 12):        <footer>        <div class="container">            <div class="row">                    <section class="col-md-8 col-md-offset-1">                    <h3>Рассылка</h3>                       <!-- форма -->                    </section>                    <section class="col-md-6">                    <h3>Контакты</h3>                       <!-- контент -->                      </section>                    <section class="col-md-8">                    <h3>Форма обратной связи</h3>                       <!-- форма -->                    </section>           </div>            </div>        </footer>        <div class="clearfix"></div>        <div class="bottomfooter">        <section class="col-md-6">              <!-- контент -->            </section>            <section class="col-md-12 text-center">              <!-- контент -->            </section>            <section class="col-md-5 text-right">              <!-- контент -->            </section>            <section class="col-md-1">            <!-- колонка-"заглушка" -->            </section>        </div>Вот CSS:.bottomfooter {height: 80px;padding: 10px 0;background-color: rgb(80,80,80);color: @text-color;font-size: @font-size-base;a {color: @text-color;}}footer {background-image: url('../images/footer-2.png');background-repeat: no-repeat;  color: #dbdbdb;  font-size: @font-size-base;.container { height: 400px;padding: 10px 0;  background: @panel-footer-bg; 

Здравствуйте!
 
Пытаюсь сделать мобильно-дружелюбным меню второго уровня вложенности с использованием компонента navbar от bootstrap 3.
Пока вот что получается
 
Может у вас есть какая идея, как заставить раскрыться вложенный подпункт Dropdown2 по клику бутстрапным образом? Или нужно свой скрипт-обработчик вешать?