Горизонтальная галерея вкладок (я не знаю, как это назвать)

Question

Я новичок здесь, но вы уже очень помогли мне в прошлом. Я создаю сайт для своей компании, и я учусь, когда я продвигаюсь вперед. Прямо сейчас я строю с Dreamweaver и Bootstrap, но у меня проблема. Я хотел бы добавить раздел (несколько, но я могу скопировать и вставить, чтобы получить аналогичный результат) с портфолио. Проблема в том, что я даже не знаю, как назвать то, что я хочу. Я хотел бы добавить 4 "вкладку" в строке с изображением, белый, если активен, серый, если нет, и, щелкнув изображение сверху, я хотел бы, чтобы маленькая стрелка (возможно, спроектированная мной) указывала вниз на содержимое, некоторый текст и изображение.

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

После этого я рассмотрел карусель с некоторой настройкой, все же, это не то, что я хочу, может быть, похоже, но это не то же самое. И из coure, у меня все еще есть проблема цвета изображения. Infact, я не знаю, должен ли я использовать оба изображения или есть команда.

Таким образом, чтобы дать вам лучшее изображение того, что я хотел бы, представьте что-то вроде Firefox или вкладки Chrome, с маленькой стрелкой внизу, если выбрано, и значок выбранного белого. Ниже этого содержания, занимая всю ширину.

Прошу прощения, если я сказал что-то не так, но, как я уже сказал, я (медленно) учился.

EDIT: вот визуальный пример: http://imgur.com/0h1VQVQ

Благодаря

Answer 1

Возможно самонастройки-х вкладок поможет вам: http://getbootstrap.com/javascript/#tabs

Html код:

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a data-target="#home" data-toggle="tab">Home <span class="caret"></span></a></li> 
    <li><a data-target="#profile" data-toggle="tab">Profile</a></li> 
    <li><a data-target="#messages" data-toggle="tab">Messages</a></li> 
    <li><a data-target="#settings" data-toggle="tab">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">Home</div> 
    <div class="tab-pane" id="profile">Profile</div> 
    <div class="tab-pane" id="messages">Message</div> 
    <div class="tab-pane" id="settings">Settings</div> 
</div> 

JQuery код:

jQuery(function() { 
    jQuery('#myTab a:first').tab('show'); 
}); 

Рабочий пример: http://jsfiddle.net/xFW8t/1801/