Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы Bootstrap 3 » Вкладки. Основы bootstrap 3 для начинающих. Урок №21

08.10.2016


00:07


2703


1


Вкладки. Основы bootstrap 3 для начинающих. Урок №21

Вкладки. Основы 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>

Вот и все. Осталось только показать демонстрацию:

Главная страница

страница профиль

страница с настройками

Жду вас на следующих уроках. Подписывайтесь на обновления блога.



Случайные записи:

  1. Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5
  2. Мой отдых на Арабатской стрелке
  3. Комментировать код в HTML. Что это и зачем нужно…
  4. Работа со строками в php. Основы PHP с нуля. Урок №7
  5. Установка локального сервера на компьютер. Основы PHP с нуля. Урок №3

Последние записи рубрики:

  1. Бесплатный курс по основам Bootstrap3
  2. Создание простого сайта на Bootstrap 3. Практика по пройденному материалу
  3. Тесты Bootstrap 3 онлайн. Основы Bootstrap 3 для начинающих
  4. Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
  5. Миниатюры. Основы bootstrap 3 для начинающих. Урок №25

Один ответ на статью: “Вкладки. Основы bootstrap 3 для начинающих. Урок №21”

  1. Кирилл says:

    Желательно ещё добавить плдгрущку через аякс при открытии вкладки

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245