Основной учебник Bootstrap

Bootstrap плагины

Меню навигации Bootstrap Группы полей ввода Bootstrap

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

В этой главе мы рассмотрим некоторые опции, предоставляемые Bootstrap для определения элементов навигации. Они используют одинаковый тег и базовый класс .nav. Bootstrap также предоставляет помощники классов для共享 меток и статуса. Изменение修饰анного класса позволяет переключаться между различными стилями.

Таблицы навигации или метки

Создайте меню навигации в метках:

добавить к метке выпадающее меню с классом .nav начало unordered list.
добавить class .nav-tabs.

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Меню навигации в метках</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Меню навигации в метках</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Проверьте, посмотрите ←/→

Результат показан ниже:

Меню навигации в капсулах

Базовое меню навигации в капсулах

Если нужно изменить стиль на капсулы, достаточно использовать класс .nav-pills вместо .nav-tabs и другие шаги аналогичны.

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Базовое меню навигации в капсулах</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Базовое меню навигации в капсулах</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Проверьте, посмотрите ←/→

Результат показан ниже:

Вертикальное меню навигации в капсулах

Если использовать класс .nav, .nav-pills class .nav-stackedи позволяет капсулам стоять вертикально.

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Вертикальное меню навигации в капсулах</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Вертикальное меню навигации в капсулах</p>
<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Проверьте, посмотрите ←/→

Результат показан ниже:

Элементы навигации, выровненные по обоим краям

Когда ширина экрана больше 768px, можно использовать .nav, .nav-tabs или .nav, .nav-pills class .nav-justifiedи использовать класс

Ниже приведен пример этого:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Пример Bootstrap - Элементы навигации, выровненные по обоим краям</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Элементы навигации, выровненные по обоим краям</p>
<ul class="nav nav-pills nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br><br>
<ul class="nav nav-tabs nav-justified">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Проверьте, посмотрите ←/→

Результат показан ниже:

отключенных ссылок

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

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - Отключенные ссылки в элементах навигации</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Отключенные ссылки в элементах навигации</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li class="disabled"><a href="#">iOS (отключенная ссылка)</a></li>
	<li><a href="#">VB.Net</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul><br><br>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li class="disabled"><a href="#">VB.Net (отключенная ссылка)</a></li>
	<li><a href="#">Java</a></li>
	<li><a href="#">PHP</a></li>
</ul>	
</body>
</html>

Проверьте, посмотрите ←/→

Результат показан ниже:

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

выпадающим меню

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

Метка с выпадающим меню

Шаги добавления выпадающего меню к метке такие:

добавить к метке выпадающее меню с классом .nav начало unordered list.
добавить class .nav-tabs.
добавить с классом .dropdown-menu несколько элементов в unordered list с классом.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap пример - Метка с выпадающим меню</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Метка с выпадающим меню</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Отдельные ссылки</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Проверьте, посмотрите ←/→

Результат показан ниже:

капсулы с выпадающим меню

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

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap пример - К胶囊у с выпадающим меню</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>Капсульные вкладки с выпадающим меню</p>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Отдельные ссылки</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Проверьте, посмотрите ←/→

Результат показан ниже:

Более примеров компонент навигации

Вкладки и капсульные вкладки

Класс	Описание	Пример
.nav nav-tabs	Вкладки	Попробуйте
.nav nav-pills	Капсульные вкладки	Попробуйте
.nav nav-pills nav-stacked	Капсульные вкладки, выложенные вертикально	Попробуйте
.nav-justified	Вкладки, выровненные по обоим краям, на экранах шире 768px, можно легко сделать вкладки или капсульные вкладки равной ширины с помощью класса .nav-justified. На маленьких экранах ссылки для навигации показываются в виде стека.	Попробуйте
.disabled	Отключенные вкладки	Попробуйте
Добавление выпадающего меню к меткам		Попробуйте
Капсульные вкладки с выпадающим меню		Попробуйте
.tab-content	Используйте вместе с .tab-pane и data-toggle="tab" (data-toggle="pill") для изменения содержимого вкладки при её переключении	Попробуйте
.tab-pane	Используйте вместе с .tab-content и data-toggle="tab" (data-toggle="pill") для изменения содержимого вкладки при её переключении	Попробуйте

Меню навигации Bootstrap Группы полей ввода Bootstrap