ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Общение без духовной цели есть скорейшая дорога в ад (Авессалом Подводный).

Bootstrap – Элементы навигации

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
Bootstrap - Элементы навигации
Bootstrap предоставляет несколько различных вариантов для стилизации элементов навигации. Все они разделяют ту же разметку и базовый класс, .nav. Bootstrap также предоставляет вспомогательный класс, чтобы разделить разметку и состояния. Классы модифиции для переключения между каждым стилем.

Табличные навигации или вкладки

Для создания вкладок навигации по меню:

  • Начнем с основного неупорядоченного списка с базовым классом .nav
  • Добавить класс .nav-tabs.

Следующий пример демонстрирует это:

 

Навигация на планшете

Основные планшеты

Чтобы включить вкладки в планшете, выполните те же действия, что и выше, используйте класс .nav-pills вместо .nav-tabs.

Следующий пример демонстрирует это:

 

Вертикальная навигация на планшетах

Вы можете показать на планшетах по вертикали, используя класс .nav-stacked вместе с классами: .nav, .nav-pills.

Следующий пример демонстрирует это:

 

Выравненная навигация на планшетах

Вы можете сделать вкладки равной ширины, как их родителей на экранах шире 768px с использованием класса .nav-justified наряду с .nav, .nav-tabs или .nav, .nav-pills соответственно. На небольших экранах, СЧ ссылки сложены.

Следующий пример демонстрирует это:

 

Недоступные ссылки

Для каждого из классов .nav, если добавить класс .disabled, он будет создавать серую ссылку, которая также отключает состояние :hover, как показано в следующем примере:

 

Этот класс только изменит внешний вид <a>, а не его функциональность. Использовать пользовательские JavaScript, чтобы отключить ссылки здесь.

Выпадающие списки

Меню Навигации разделяет подобный синтаксис с выпадающим меню. По умолчанию, у вас есть элемент списка, который имеет якорь, работающий в сочетании с некоторыми данными, атрибуты, чтобы вызвать неупорядоченный список с классом .dropdown-menu.

Вкладки с выпадающим списком

Чтобы добавить выпадающее меню на вкладку:

  • Начнем с основным неупорядоченным списком с базовым классом .nav
  • Добавьте класс .nav-menu.
  • Теперь добавьте неупорядоченный список с классом .dropdown-menu.
 

Выпадающие списки на планшете

Для того, чтобы сделать то же самое с планшетом, просто поменяйте класса .nav-tabs на .nav-pills, как показано в следующем примере:

 

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

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Простая логическая игра "Поймай кота". Задача игры окружить кота точками так, чтобы он не смог убежать с поля. Постигла неудача - начни игру снова!

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close