кодесурса
«Twitter

Twitter Bootstrap Nav, вкладки и таблетки учебник

script1adsense2code
script1adsense3code

Вступление

В этом уроке вы узнаете, как использовать Twitter Bootstrap toolkit для создания навигаций на основе навигации, вкладок и таблеток.

Мы продемонстрировали примеры и объяснили базовую навигацию на основе вкладок и таблеток, составную или вертикальную навигацию на основе вкладок и таблеток, раскрывающийся список на основе вкладок и таблеток, используя список навигации для построения составной навигации и построения навигации с вкладками с помощью JavaScript (и это слишком в разных направлениях) ,

Основные вкладки

Два CSS-класса .nav и .nav-tabs используются для создания базовой навигации на основе вкладок. В Twitter Bootstrap версии v2.0.1 стили для класса CSS .nav объявляются от строки 2176 до 2220 (некоторые связанные стили также существуют там). Строки с 2222 по 2267 содержат стили для вкладок .nav. В следующем примере показано, как создать базовую навигацию на основе вкладок с помощью Twitter Bootstrap.

Пример базовой навигации на основе вкладок с использованием Twitter Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title> 
<meta name="description" content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a> </li> 
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
</ul>
</div>
</div>
</div>
</body>
</html>

Выход


Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Основные таблетки

Если вы знаете, как создать базовую навигацию на основе вкладок с помощью Twitter Bootstrap, можно легко создать базовую навигацию на основе таблеток. Вместо того, чтобы использовать класс .nav-tabs, здесь используется класс .nav-pills. Стили для таблеток .nav находятся в строке с 2222 по 2224 и снова в строке с 2268 по 2280 файла bootstrap.css (используется в последнем примере).

В следующем примере показано создание базовой навигации на основе таблеток.

Пример базовой навигации на основе таблеток с использованием Twitter Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Basic pills Based Navigation Example</title> 
<meta name="description" content="Twitter Bootstrap Basic pills Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span8">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>   
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
</ul>
</div>
</div>
</div>
</body>
</html>

Выход


Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Сложенные или вертикальные вкладки

Чтобы создать стековую или вертикальную навигацию на основе табуляции, вы должны добавить .nav-stacked в дополнение к классам .nav и .nav-tabs (которые создают навигацию по умолчанию на основе горизонтальной табуляции) к вашей разметке. От строки № 2281 до 2309 содержат стили для .nav-stacked. Ниже приведен пример.

Пример Навигации на основе сложенной или вертикальной вкладки с помощью Twitter Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Stacked or vertical Tab Based Navigation Example</title> 
<meta name="description" content="Twitter Bootstrap Stacked or vertical Tab Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span8">
<ul class="nav nav-tabs nav-stacked">
<li class="active">
<a href="#">Home</a>   </li>   
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
</ul>
</div>
</div>
</div>
</body>
</html>

Выход


Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Сложенные или вертикальные таблетки

Как и при создании вкладок «С накоплением» или «Вертикально», вам нужен класс CSS, кроме того, для создания навигации с накоплением или «Вертикальной пилюли» Это класс .nav-stacked, который находится в строке от 2281 до 2309 и содержит стили для .nav-stacked. Ниже приведен пример.

Пример составленной или вертикальной таблетки на основе навигации с помощью Twitter Bootstrap

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Stacked or vertical Pills Based Navigation Example</title> 
<meta name="description" content="Twitter Bootstrap Stacked or vertical Pills Based Navigation Example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<div class="row">
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">Home</a></li>   
<li><a href="#">Tutorials</a></li>
<li><a href="#">Practice Editor </a></li> 
<li><a href="#">Gallery</a></li> 
<li><a href="#">Contact</a></li> 
</ul>
</div>
</div>
</div>
</body>
</html>

Выход

«Твиттер-Бутстрап стеки или-вертикальная-таблетка на основе-навигация-пример»

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Раскрывающиеся списки

Вы можете создать раскрывающуюся вкладку, используя Twitter Bootstrap. Существует четыре класса CSS - .dropdown, .dropdown-toggle, .dropdown-menu и .caret, которые вам нужны в дополнение к классам .nav и .nav-tabs для этого. В bootstrap.css (версия 2.0.1) строка с номерами 1545–1547 содержит стили для класса .dropdown, строка с 1548 по 1553 содержит стили для .dropdown-toggle, с 1576 по 1632 содержит стили для .dropdown-menu и строки 1554 до 1575 содержит стили для .caret. В показанном примере также используется другой класс CSS .divider, но это не обязательно.

И, конечно же, в файл HTML нужно включить три файла JavaScript - jquery.js, bootstrap-dropdown.js и application.js. Все они находятся в папке docs / assets / js /.

Вот пример:

Пример навигации на основе вкладок с помощью Twitter Bootstrap

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="utf-8"> 
  <title>Twitter Bootstrap tab based dropdown Navigation Example</title> 
  <meta name="description" content="Twitter Bootstrap tab based dropdown Navigation Example">
  <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
  <style type="text/css"> 
  .container {
  margin-top: 200px;
  }
  </style>
  </head>
  <body>
  <div class="container">
  <div class="row">
  <div class="span6">
  <ul class="nav nav-tabs">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Twitter Bootstrap</a></li>
            <li><a href="#">Google Plus API</a></li>
            <li><a href="#">HTML5</a></li>
            <li class="divider"></li>
            <li><a href="#">Examples</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
          <ul class="dropdown-menu bottom-up pull-right">
            <li><a href="#">PHP</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">PostgreSQL</a></li>
            <li class="divider"></li>
            <li><a href="#">Live Demos</a></li>
          </ul>
        </li>
      </ul>
</li>
</ul>
</div>
</div>
</div>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>   

Примечание. Мы добавили отдельный тег стиля и включили небольшой набор стилей для создания верхнего поля в 200 пикселей для контейнера удержания. Но это только для демонстрационных целей. data-toggle - это специфический атрибут Twitter Bootstrap. Установка его значения на «выпадающий» создает выпадающую навигацию.

Выход

Раскрывающийся список на основе вкладок:


Dropup на основе вкладок:

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Таблетки на основе выпадающих

Разметка и CSS, необходимые для создания раскрывающейся навигации на основе таблеток, аналогичны раскрывающимся базам вкладок. Единственное, вам нужно заменить .nav-tabs на класс .nav-pills. Вот пример.

Пример раскрывающегося списка на основе таблеток с помощью Twitter Bootstrap

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="utf-8"> 
  <title>Twitter Bootstrap pills based dropdown Navigation Example</title> 
  <meta name="description" content="Twitter Bootstrap pills based dropdown Navigation Example">
  <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
  <style type="text/css"> 
  .container {
  margin-top: 200px;
  }
  </style>
  </head>
  <body>
  <div class="container">
  <div class="row">  
  <div class="span6">
  <ul class="nav nav-pills">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Twitter Bootstrap</a></li>
            <li><a href="#">Google Plus API</a></li>
            <li><a href="#">HTML5</a></li>
            <li class="divider"></li>
            <li><a href="#">Examples</a></li>
          </ul>
        </li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
          <ul class="dropdown-menu bottom-up pull-right">
            <li><a href="#">PHP</a></li>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">PostgreSQL</a></li>
            <li class="divider"></li>
            <li><a href="#">Live Demos</a></li>
          </ul>
        </li>
      </ul>
  </li>
  </ul>
  </div>
  </div>
  </div>
	<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
	<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
	<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
  </body>
  </html>  
  

Выход

Таблетки на основе раскрывающегося списка

«Таблетка на основе-выпадающий»

Таблетки на основе выпадающего


Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Использование списка навигации для составной навигации с дополнительными заголовками

.nav-class может быть использован для создания стекированной навигации, подходящей для боковых панелей. Вы можете добавить заголовки для группы ссылок. Стили для .nav-list располагаются из номера строки
От 2201 до 2221 файла bootstrap.css (версия 2.0.1). Вот пример.

Пример составной навигации со списком навигации

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="utf-8"> 
  <title>Example of stacked navigation with nav list</title> 
  <meta name="description" content="Example of stacked navigation with nav list">
  <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
  </head>
  <body>
  <div class="container">
  <div class="row">
  <div class="span6">
  <ul class="nav nav-list">
  <li class="nav-header">List header</li>
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Library</a></li>
			<li><a href="#">Applications</a></li>
			<li class="nav-header">Another list header</li>
			<li><a href="#">Profile</a></li>
			<li><a href="#">Settings</a></li>
			<li class="divider"></li>
	   <li><a href="#">Help</a></li>
  </ul>
  </div>
  </div>
  </div>
  </body>
  </html> 
   

Выход

«Нав-лист»

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Использование списка навигации для комбинированной навигации с иконками

<!DOCTYPE html> 
  <html lang="en"> 
  <head> 
  <meta charset="utf-8"> 
  <title>Example of stacked navigation with nav list with icons</title> 
  <meta name="description" content="Example of stacked navigation with nav list icons. Nav list consits of several icons like for book, pencil etc.">
  <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
  </head>
  <body>
  <div class="container">
  <row class="span6">
  <ul class="nav nav-list">
          <li class="nav-header">List header</li>
          <li class="active"><a href="#"><i class="icon-white icon-home"></i> Home</a></li>
          <li><a href="#"><i class="icon-book"></i> Library</a></li>
          <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
          <li class="nav-header">Another list header</li>
          <li><a href="#"><i class="icon-user"></i> Profile</a></li>
          <li><a href="#"><i class="icon-cog"></i> Settings</a></li>
          <li class="divider"></li>
          <li><a href="#"><i class="icon-flag"></i> Help</a></li>
  </ul>
  </div>
  </div>
  </body>
  </html>
  

Выход

«Нав-лист-с-иконки»

Смотреть онлайн

Посмотрите приведенный выше пример в другом окне браузера .

Навигация с вкладками и JavaScript

Вы можете создать навигацию с вкладками с помощью облегченного плагина Jquery Twitter Bootstrap и простой разметки.

Как вы создаете Tab Tabable Nav?

Вам нужен CSS-класс с именем «tabbable», который работает как разделение. Внутри этого вы добавляете классы nav и nav-tab к элементу ul. При этом используя data-toggle = "tab" (применяется к связанному элементу привязки), вы создаете вкладки с разделами. И затем, с помощью CSS-класса «tab-content» вы создаете div, и этот div может содержать несколько элементов div с CSS-классом «tab-pane», который содержит фактический контент.

Для работы Tabbable Nav вам понадобятся два JS-файла - jquery.js и bootstrap-tab.js; оба находятся в папке docs / assets / js.

Следующий пример показывает Tabbable Nav в действии.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Example tabbsable nav with Twitter Bootstrap</title> 
<meta name="description" content="Example tabable nav with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
<li class=""><a href="#2" data-toggle="tab">Section 2</a></li>
<li class=""><a href="#3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>You are watching section 1.</p>
</div>
<div class="tab-pane" id="2">
<p>You are watching Section 2.</p>
</div>
<div class="tab-pane" id="3">
<p>You are watching Section 3.</p>
</div>
</div>
</div>
</div>
</div>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
</body>
</html>

Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.

Предыдущая: Twitter Bootstrap icons
Далее: Твиттер Bootstrap Navbar учебник

Новый контент: Composer: менеджер зависимостей для PHP , R программирования


script1adsense4code
script1adsense5code
disqus2code
script1adsense6code
script1adsense7code
script1adsense8code
buysellads2code