StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
08.10.2016
00:07
5365
1
Вкладки. Основы bootstrap 3 для начинающих. Урок №21
Всем привет!
В сегодняшнем уроке вы научитесь создавать вкладки. Это необычные вкладки. Попробую все объяснить. Это своего рода меню, где при нажатии вы не переходите на другую страницу, а просто для вас откроется закрытый текст на этой же странице. Классная штучка! Подойдет для создания админ-панели.
Куда применять вкладки, решать уже вам. Может они вам и не пригодятся, но рассказать о них я должен.
Итак, добавьте между тегами <body></body> вот такой код навигации:
<!-- Nav tabs --> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab">Главная</a></li> <li><a href="#profile" data-toggle="tab">Профиль</a></li> <li><a href="#messages" data-toggle="tab">Сообщения</a></li> <li><a href="#settings" data-toggle="tab">Настройки</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Выпадающее меню <b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#dropdown1" tabindex="-1" data-toggle="tab">@fat</a></li> <li><a href="#dropdown2" tabindex="-1" data-toggle="tab">@mdo</a></li> </ul> </li> </ul>
В ссылках обязательно должны присутствовать:
data-toggle="tab"
href="#уникальное название"
Теперь выведем панель с текстом (вставляем между тегами <body></body>):
<!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active fade in" id="home">Главная страница</div> <div class="tab-pane fade" id="profile">страница профиль</div> <div class="tab-pane fade" id="messages">страница сообщения</div> <div class="tab-pane fade" id="settings">страница с настройками</div> <div class="tab-pane fade" id="dropdown1">страница @fat</div> <div class="tab-pane fade" id="dropdown2">страница @mdo</div> </div>
Заметьте, вкладки и панель я связываю уникальным «id», то есть, если мы присвоили «id="home"» для панели с текстом «Главная страница»:
<!-- Tab panes --> <div class="tab-pane active fade in" id="home">Главная страница</div>
То для вызова этой панели нам в ссылке нужно прописать этот «id» через знак «#»:
<a href="#home" data-toggle="tab">Главная</a>
За счет класса «fade» содержание будет плавно появляться:
<div class="tab-pane fade" id="profile">страница профиль</div>
Вот и все. Осталось только показать демонстрацию:
Главная страница
страница профиль
страница с настройками
страница @fat
страница @mdo
Жду вас на следующих уроках. Подписывайтесь на обновления блога.
Случайные записи:
- Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7
- Иконки от Glyphicons. Основы bootstrap 3 для начинающих. Урок №6
- Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
- Бегущая строка на HTML. Основы HTML для начинающих. Урок №9
- Плавающие блоки в CSS. Основы CSS для начинающих. Урок №15
Желательно ещё добавить плдгрущку через аякс при открытии вкладки
Ответить