"Vertical Tabs - pirog-studio"
Bootstrap 3.3.0 Snippet by armis

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--Start plani --> <h3>Что входит в стоимость дизайн интерьера <span> Бюджет </span></h3> <div class="container-fluid" style="margin-top: 10px;"> <div class="row"> <div class="col col-sm-3"> <ul class="nav nav-tabs nav-stacked text-center"> <li class="active"><a href="#obmer1" data-toggle="tab">1. Планы помещений</a></li> <li><a href="#planirovka1" data-toggle="tab">2. Планировочные решения</a></li> <li><a href="#mebel1" data-toggle="tab">3. План расстановки мебели</a></li> </ul> </div> <div class="col col-sm-9"> <div class="row tab-content"> <div id="obmer1" class="tab-pane fade active in"> <div class="col col-sm-9"> <h3>1. Планы помещений (обмерочный чертёж)</h3> <p class="text-justify">Работа на объекте начинается с замеров всех помещений. Дизайнер и конструктор измеряют габариты, высоты комнат, замеряется толщина стен, размеры оконных и дверных проёмов, фиксируются инженерные сети и вентиляционные отверстия.</p> <p class="text-justify">После обработки данных Вы получаете важный документ - Обмерный план, в котором будут указаны фактические габариты и площади помещений.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_01.jpg" title="Обмерный план" data-uk-lightbox="Обмерный план"> <img src="/images/plans/standart/standart_01.jpg" alt="Обмерный план" class="img-responsive" /></a></div> </div> </div> <div id="planirovka1" class="tab-pane fade"> <div class="col col-sm-9"> <h3>2. Варианты планировочных решений (перепланировка)</h3> <p class="text-justify">Дизайнер получает пожелания от заказчика и, исходя из своего опыта, рекомендует варианты зонирования помещений, советует на что необходимо обратить внимание.</p> <p class="text-justify">Раздел включает в себя чертёж перепланировки - план демонтажа и возведения перегородок (реконструкции).</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_04.jpg" title="Чертёж перепланировки" data-uk-lightbox="Чертёж перепланировки"> <img src="/images/plans/standart/standart_04.jpg" alt="Чертёж перепланировки" class="img-responsive" /></a></div> </div> </div> <div id="mebel1" class="tab-pane fade"> <div class="col col-sm-9"> <h3>3. План расстановки мебели</h3> <p class="text-justify">Чертёж с 2-3 вариантами расстановки мебели и предметов интерьера.</p> <p class="text-justify">В этот раздел также включается общий план пола и потолка.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_02.jpg" title="План расстановки мебели" data-uk-lightbox="План расстановки мебели"> <img src="/images/plans/standart/standart_02.jpg" alt="План расстановки мебели" class="img-responsive" /></a></div> </div> </div> </div> </div> </div> </div> <!--//End Бюджет --> <h3>Что входит в стоимость дизайн интерьера Базовый</h3> <div class="container-fluid" style="margin-top: 10px;"> <div class="row"> <div class="col col-sm-3"> <ul class="nav nav-tabs nav-stacked text-center"> <li class="active"><a href="#obmer2" data-toggle="tab">1. Планы помещений</a></li> <li><a href="#planirovka2" data-toggle="tab">2. Планировочные решения</a></li> <li><a href="#mebel2" data-toggle="tab">3. План расстановки мебели</a></li> <li><a href="#svet2" data-toggle="tab">4. План освещения</a></li> <li><a href="#santeh2" data-toggle="tab">5. План сантехники</a></li> <li><a href="#rozetki2" data-toggle="tab">6. Расстановка электрофуннитуры</a></li> </ul> </div> <div class="col col-sm-9"> <div class="row tab-content"> <div id="obmer2" class="tab-pane fade active in"> <div class="col col-sm-9"> <h3>1. Планы помещений (обмерочный чертёж)</h3> <p class="text-justify">Работа на объекте начинается с замеров всех помещений. Дизайнер и конструктор измеряют габариты, высоты комнат, замеряется толщина стен, размеры оконных и дверных проёмов, фиксируются инженерные сети и вентиляционные отверстия.</p> <p class="text-justify">После обработки данных Вы получаете важный документ - Обмерный план, в котором будут указаны фактические габариты и площади помещений.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_01.jpg" title="Обмерный план" data-uk-lightbox="Обмерный план"> <img src="/images/plans/standart/standart_01.jpg" alt="Обмерный план" class="img-responsive" /></a></div> </div> </div> <div id="planirovka2" class="tab-pane fade"> <div class="col col-sm-9"> <h3>2. Варианты планировочных решений (перепланировка)</h3> <p class="text-justify">Дизайнер получает пожелания от заказчика и, исходя из своего опыта, рекомендует варианты зонирования помещений, советует на что необходимо обратить внимание.</p> <p class="text-justify">Раздел включает в себя чертёж перепланировки - план демонтажа и возведения перегородок (реконструкции).</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_04.jpg" title="Чертёж перепланировки" data-uk-lightbox="Чертёж перепланировки"> <img src="/images/plans/standart/standart_04.jpg" alt="Чертёж перепланировки" class="img-responsive" /></a></div> </div> </div> <div id="mebel2" class="tab-pane fade"> <div class="col col-sm-9"> <h3>3. План расстановки мебели</h3> <p class="text-justify">Чертёж с 2-3 вариантами расстановки мебели и предметов интерьера.</p> <p class="text-justify">В этот раздел также включается общий план пола и потолка.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_02.jpg" title="План расстановки мебели" data-uk-lightbox="План расстановки мебели"> <img src="/images/plans/standart/standart_02.jpg" alt="План расстановки мебели" class="img-responsive" /></a></div> </div> </div> <div id="svet2" class="tab-pane fade"> <div class="col col-sm-9"> <h3>4. План размещения светильников</h3> <p class="text-justify">Проектировщик разместит осветительные приборы с учётом желаемых типов светильников и инсоляции - степени освещённости помещений</p> <p class="text-justify">На чертеже вы получите чёткое представление о размещении основных и дополнительных светильников.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_12.jpg" title="План расстановки светильников" data-uk-lightbox="План расстановки светильников"> <img src="/images/plans/standart/standart_12.jpg" alt="План расстановки светильников" class="img-responsive" /></a></div> </div> </div> <div id="santeh2" class="tab-pane fade"> <div class="col col-sm-9"> <h3>5. План расстановки сантехники</h3> <p class="text-justify">Расстановка отопительных и сантехнических приборов</p> <p class="text-justify">Развёртки стен в санузлах.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_15.jpg" title="План расстановки сантехники" data-uk-lightbox="План расстановки сантехники"> <img src="/images/plans/standart/standart_15.jpg" alt="План расстановки сантехники" class="img-responsive" /></a></div> </div> </div> <div id="rozetki2" class="tab-pane fade"> <div class="col col-sm-9"> <h3>6. План размещения электрофурнитуры</h3> <p class="text-justify">Чертёж расстановки розеток и выключателей</p> <p class="text-justify">По отдельной договорённости дизайнер выполнит план расстановки электрофурнитуры в 3-D виде или как развёртку стен.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_06.jpg" title="План размещения электрофурнитуры" data-uk-lightbox="План размещения электрофурнитуры"> <img src="/images/plans/standart/standart_06.jpg" alt="План размещения электрофурнитуры" class="img-responsive" /></a></div> </div> </div> </div> </div> </div> </div> <!--//End Базовый --> <h3>Что входит в стоимость дизайн интерьера Стандарт</h3> <div class="container-fluid" style="margin-top: 10px;"> <div class="row"> <div class="col col-sm-3"> <ul class="nav nav-tabs nav-stacked text-center"> <li class="active"><a href="#obmer3" data-toggle="tab">1. Планы помещений</a></li> <li><a href="#planirovka3" data-toggle="tab">2. Планировочные решения</a></li> <li><a href="#mebel3" data-toggle="tab">3. План расстановки мебели</a></li> <li><a href="#svet3" data-toggle="tab">4. План освещения</a></li> <li><a href="#santeh3" data-toggle="tab">5. План сантехники</a></li> <li><a href="#rozetki3" data-toggle="tab">6. Расстановка электрофуннитуры</a></li> <li><a href="#pol3" data-toggle="tab">7. Планы полов</a></li> <li><a href="#potolok3" data-toggle="tab">8. Планы потолков</a></li> <li><a href="#shema3" data-toggle="tab">9. Схема управления освещением</a></li> <li><a href="#okno3" data-toggle="tab">10. Спецификация оконных проёмов</a></li> <li><a href="#dveri3" data-toggle="tab">11. Спецификация дверных проёмов</a></li> <li><a href="#kollazh3" data-toggle="tab">12. Коллажи</a></li> <li><a href="#razvsu3" data-toggle="tab">13. Развёртки стен санузлов</a></li> <li><a href="#recom3" data-toggle="tab">14. Рекомендации</a></li> </ul> </div> <div class="col col-sm-9"> <div class="row tab-content"> <div id="obmer3" class="tab-pane fade active in"> <div class="col col-sm-9"> <h3>1. Планы помещений (обмерочный чертёж)</h3> <p class="text-justify">Работа на объекте начинается с замеров всех помещений. Дизайнер и конструктор измеряют габариты, высоты комнат, замеряется толщина стен, размеры оконных и дверных проёмов, фиксируются инженерные сети и вентиляционные отверстия.</p> <p class="text-justify">После обработки данных Вы получаете важный документ - Обмерный план, в котором будут указаны фактические габариты и площади помещений.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_01.jpg" title="Обмерный план" data-uk-lightbox="Обмерный план"> <img src="/images/plans/standart/standart_01.jpg" alt="Обмерный план" class="img-responsive" /></a></div> </div> </div> <div id="planirovka3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>2. Варианты планировочных решений (перепланировка)</h3> <p class="text-justify">Дизайнер получает пожелания от заказчика и, исходя из своего опыта, рекомендует варианты зонирования помещений, советует на что необходимо обратить внимание.</p> <p class="text-justify">Раздел включает в себя чертёж перепланировки - план демонтажа и возведения перегородок (реконструкции).</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_04.jpg" title="Чертёж перепланировки" data-uk-lightbox="Чертёж перепланировки"> <img src="/images/plans/standart/standart_04.jpg" alt="Чертёж перепланировки" class="img-responsive" /></a></div> </div> </div> <div id="mebel3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>3. План расстановки мебели</h3> <p class="text-justify">Чертёж с 2-3 вариантами расстановки мебели и предметов интерьера.</p> <p class="text-justify">В этот раздел также включается общий план пола и потолка.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_02.jpg" title="План расстановки мебели" data-uk-lightbox="План расстановки мебели"> <img src="/images/plans/standart/standart_02.jpg" alt="План расстановки мебели" class="img-responsive" /></a></div> </div> </div> <div id="svet3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>4. План размещения светильников</h3> <p class="text-justify">Проектировщик разместит осветительные приборы с учётом желаемых типов светильников и инсоляции - степени освещённости помещений</p> <p class="text-justify">На чертеже вы получите чёткое представление о размещении основных и дополнительных светильников.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_12.jpg" title="План расстановки светильников" data-uk-lightbox="План расстановки светильников"> <img src="/images/plans/standart/standart_12.jpg" alt="План расстановки светильников" class="img-responsive" /></a></div> </div> </div> <div id="santeh3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>5. План расстановки сантехники</h3> <p class="text-justify">Расстановка отопительных и сантехнических приборов</p> <p class="text-justify">Развёртки стен в санузлах.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_15.jpg" title="План расстановки сантехники" data-uk-lightbox="План расстановки сантехники"> <img src="/images/plans/standart/standart_15.jpg" alt="План расстановки сантехники" class="img-responsive" /></a></div> </div> </div> <div id="rozetki3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>6. План размещения электрофурнитуры</h3> <p class="text-justify">Чертёж расстановки розеток и выключателей</p> <p class="text-justify">По отдельной договорённости дизайнер выполнит план расстановки электрофурнитуры в 3-D виде или как развёртку стен.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_06.jpg" title="План размещения электрофурнитуры" data-uk-lightbox="План размещения электрофурнитуры"> <img src="/images/plans/standart/standart_06.jpg" alt="План размещения электрофурнитуры" class="img-responsive" /></a></div> </div> </div> <div id="pol3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>7. План-схема полов</h3> <p class="text-justify">В плане отражаются схемы укладки напольных покрытий по помещениям.</p> <p class="text-justify">План отображает количество плитки, паркета или ламината, необходимое для укладки в каждой комнате.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_07.jpg" title="План пола" data-uk-lightbox="План пола"> <img src="/images/plans/standart/standart_07.jpg" alt="План пола" class="img-responsive" /></a></div> </div> </div> <div id="potolok3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>8. Планы потолков</h3> <p class="text-justify">В данном чертеже отображается зонирование потолочного пространства.</p> <p class="text-justify">Дизайнер предложит реализацию потолочных конструкций и декора.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_11.jpg" title="План потолка" data-uk-lightbox="План потолка"> <img src="/images/plans/standart/standart_11.jpg" alt="План потолка" class="img-responsive" /></a></div> </div> </div> <div id="shema3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>9. Схема управления освещением</h3> <p class="text-justify">План коммутации освещением необходим, если Ваш дом имеет много проходных комнат, большое количество светильников или подсветки. На этапе проектирования целесообразно продумать как будут включаться светильники, разбить лампы на группы, продумать проходные выключатели.</p> <p class="text-justify">Дизайнер графически отображает тип выключателя и группы светильников, которые он задействует.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_13.jpg" title="Схема управления освещением" data-uk-lightbox="Схема управления освещением"> <img src="/images/plans/standart/standart_13.jpg" alt="Схема управления освещением" class="img-responsive" /></a></div> </div> </div> <div id="okno3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>10. Спецификация оконных проёмов</h3> <p class="text-justify">Для заказа оконных конструкций дизайнер подготовит спецификацию оконных проёмов.</p> <p class="text-justify">Этот простой документ сэкономит Ваше время при выборе фирмы-подрядчика на изготовление окон.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_06.jpg" title="Спецификация оконных проёмов" data-uk-lightbox="Спецификация оконных проёмов"> <img src="/images/plans/standart/standart_06.jpg" alt="Спецификация оконных проёмов" class="img-responsive" /></a></div> </div> </div> <div id="dveri3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>11. Спецификация дверных проёмов</h3> <p class="text-justify">Для заказа дверей, фрамуг и прочих конструкций, дизайнер подготовит спецификацию дверных проёмов.</p> <p class="text-justify">Этот простой документ сэкономит Ваше время при выборе фирмы-подрядчика на изготовление дверей.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_06.jpg" title="Спецификация дверных проёмов" data-uk-lightbox="Спецификация дверных проёмов"> <img src="/images/plans/standart/standart_06.jpg" alt="Спецификация дверных проёмов" class="img-responsive" /></a></div> </div> </div> <div id="kollazh3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>12. Коллажи</h3> <p class="text-justify">Чтобы заказчикам было легче понять замысел дизайнера интерьера, мы подготавливаем коллажи - развёртки стен по основным помещениям со вставками декоративных элементов, мебели.</p> <p class="text-justify">По отдельной договорённости дизайнер выполнит план расстановки электрофурнитуры в 3-D виде или как развёртку стен.</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/vilkovo/003-w.jpg" title="Коллаж, развёртка стен" data-uk-lightbox="Коллаж, развёртка стен"> <img src="/images/vilkovo/003-w.jpg" alt="Коллаж, развёртка стен" class="img-responsive" /></a></div> </div> </div> <div id="razvsu3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>13. Развёртки стен санузлов</h3> <p class="text-justify">Дизайн интерьера плана "Стандарт" включает чертёж с развёрткми стен санузлов, привязкой сантехники и мебели к габаритам туалета или ванной комнаты.</p> <p class="text-justify">Также чертёж содержит раскладку (схему укладки) плитки в санузлах и информацию по тёплым полам (если необходимо).</p> </div> <div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_15.jpg" title="Развёртка стен санузла" data-uk-lightbox="Развёртка стен санузла"> <img src="/images/plans/standart/standart_15.jpg" alt="Развёртка стен санузла" class="img-responsive" /></a></div> </div> </div> <div id="recom3" class="tab-pane fade"> <div class="col col-sm-9"> <h3>14. Рекомендации</h3> <p class="text-justify">Дизайнер интерьера выдаёт свои рекомендации (устно) по типу и цветовой гамме используемых материалов для отделки помещений.</p> <p class="text-justify">Также вы получите рекомендации по стилю мебели, сантехнических и осветительных приборов.</p> </div> <!--<div class="col col-sm-3"> <div class="thumbnail"><a href="/images/plans/standart/standart_06.jpg" title="План размещения электрофурнитуры" data-uk-lightbox="План размещения электрофурнитуры"> <img src="/images/plans/standart/standart_06.jpg" alt="План размещения электрофурнитуры" class="img-responsive" /></a></div> --> </div> </div> </div> </div> </div> </div> <!--//End Стандарт --> <div class="row"> <ul class="list-inline pull-right"> <li><button type="button" class="btn btn-default prev-step">Previous</button></li> <li><button type="button" class="btn btn-default next-step">Next</button></li> <li><button type="button" class="btn btn-primary ">Save</button></li> </ul> </div> </div>
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; } .nav-stacked > li + li { margin-top: 0px; } .nav-tabs > li > a { padding: 10px 20px 10px 20px !important; color: #AAAAAA; background-color: #E3F2FD; border: 0px; border-radius: 0px; margin: 0; text-align: left; } .nav-tabs > li > a:hover, .nav-tabs > li > a:focus { background-color: #448AFF; color: #FFFFFF; z-index: 99; transition: all 0.5s ease 0s; } .nav-tabs > li.active > a { color: #FFFFFF; background-color: #2962FF; box-shadow: 0 0px 5px rgba(0, 0, 0, .6); z-index: 100; } .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: #FFFFFF; background-color: #2962FF; box-shadow: 0 0px 5px rgba(0, 0, 0, .6); transition: all 0.5s ease 0s; } .btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 1px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); transition: all 0.5s ease 0s; } .btn-primary { background-color: #2962FF; } .btn-primary:hover, .btn-primary:focus { background-color: #0D47A1; }
$(document).ready(function () { $(".next-step").click(function (e) { var $active = $('.nav-tabs li.active'); $active.next().removeClass('disabled'); nextTab($active); }); $(".prev-step").click(function (e) { var $active = $('.nav-tabs li.active'); prevTab($active); }); }); function nextTab(elem) { $(elem).next().find('a[data-toggle="tab"]').click(); } function prevTab(elem) { $(elem).prev().find('a[data-toggle="tab"]').click(); }

Related: See More


Questions / Comments: