Latest web development tutorials
×

Bootstrap курс

Bootstrap курс Bootstrap Краткое введение Bootstrap Установка по окружающей среде

Bootstrap CSS

Bootstrap CSS обзор Bootstrap Grid System Bootstrap наборный Bootstrap код Bootstrap таблица Bootstrap форма Bootstrap кнопка Bootstrap изображение Bootstrap Вспомогательный класс Bootstrap Отзывчивый Утилиты

Bootstrap Компоненты макета

Bootstrap значок шрифты Bootstrap Выпадающее меню Bootstrap Группа кнопок Bootstrap Кнопка в раскрывающемся меню Bootstrap группа Поле ввода Bootstrap элементы навигации Bootstrap Панель навигации Bootstrap панировочные сухари Bootstrap пейджинг Bootstrap этикетка Bootstrap знак Bootstrap Большой экран Bootstrap Название страницы Bootstrap Миниатюры Bootstrap предупреждение Bootstrap Шкала прогресса Bootstrap Мультимедийные Bootstrap Список групп Bootstrap панель Bootstrap Wells

Bootstrap Виджет

Bootstrap Plug-Glance Bootstrap эффект перехода Bootstrap режимное окно Bootstrap Выпадающее меню Bootstrap Свиток монитор Bootstrap таб Bootstrap подсказки Bootstrap Всплывающее окно Bootstrap Предупреждение коробки Bootstrap кнопка Bootstrap сгиб Bootstrap карусель Bootstrap Дополнительная навигация

Bootstrap другое

Bootstrap UI редактор Bootstrap V2 курс Bootstrap HTML стандарты кодирования Bootstrap CSS стандарты кодирования

Bootstrap навигации

Панель навигации приятная особенность, является отличительной особенностью сайта Bootstrap. Панель навигации Фонд в качестве компонентов реагирования заголовка навигационной страницы в приложении или на сайте. С учетом мобильного навигационного устройства сгибают, увеличивает доступную ширину окна просмотра навигационной панели будет в горизонтальном положении. Bootstrap основной навигационной панели, навигационная панель включает в себя доменное имя и основные навигационные определенные стили.

Навигации по умолчанию бар

Создание навигации по умолчанию панель A, выполните следующие действия:

  • Метки добавитькласс .navbar, .navbar-умолчанию в <нав>.
  • Добавитьроль = "навигация" , чтобы вышеуказанные элементы, способствуют увеличению доступности.
  • Добавьте названиекласса .navbar-заголовок в <div> элемент содержит <a> внутренние элементы с классомNavBar-брендом. Это позволит сделать текст появится больший.
  • Чтобы добавить ссылку на панели навигации, просто добавить неупорядоченный список может склассом .nav, .navbar-Nav -х годов.

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

примеров

<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <Ul класс = "нав Navbar-нав" > <Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li> <Li> HREF = "#"> SVN < / а> </ li> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:


Отзывчивый панель навигации

Чтобы добавить отзывчивый для навигации, вы должны сложить содержание , завернутое вклассах с .collapse, .navbar-распада <DIV> в.Сложенные панель навигации на самом деле кнопка .navbar-переключателькласса и два data- элементы с.Первый из них являетсяданных тумблер, кнопка используется , чтобы сообщить JavaScript должен делать, а во - вторых, данные-мишень,указывая , на который вы хотите переключить элемент. Три склассом .Icon-бар кнопки <SPAN> , чтобы создать так называемую Гамбург.Эти переключатели для.nav коллапса <div> элемент.Для достижения этих функций, вы должны включать в себя Bootstrap раз (коллапс) штекер .

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

примеров

<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> <Кнопка типа "кнопка" = класс = "Navbar-тумблер" данных тумблер = "коллапс" данных целевых = "# ПРИМЕР- Navbar-коллапс"> <SPAN класс = "стер-только"> Переключение навигации </ SPAN> <SPAN класс = "значок-бар"> </ SPAN> <SPAN класс = "значок-бар"> </ SPAN> <SPAN класс = "значок-бар"> </ SPAN> </ Button> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div класс = "коллапс Navbar-коллапс" ID = "Пример-Navbar-коллапс "> <Ul класс = "нав Navbar-нав" > <Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li> <Li> HREF = "#"> SVN < / а> </ li> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Отзывчивый панель навигации

Форма панели навигации

Форма в панели навигации вместо использования Bootstrap образуют главах класса по умолчанию уже упоминалось, он использует.navbar-класс формы.Это обеспечивает правильное вертикальное выравнивание и форму в узком поведении видового экрана складывания. Используйте опцию выравнивания (которые будут подробно описаны в разделе выравнивания компонентов), чтобы определить содержание навигационной панели находится там, где.

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

примеров

<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <Форма класс = "NavBar-форма NAVBAR- левый" Роль = "Поиск"> <Div класс = "форма-группа"> <Input тип = "текст" класс = "форма-контроль" заполнитель = "Поиск"> </ Div> <Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > Отправить </ кнопка> </ Форма> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Форма панели навигации

Кнопка в панели навигации

Вы можете использоватькласс .navbar-BTN добавить кнопку, кнопка по центру вертикально на панели навигации , чтобы не <форма> Элемент <кнопка>..navbar-БТН может быть использован на <a> и элементов <INPUT>.

Не используйте.navbar-BTN в .navbar-Navна <a> элемент, потому что это не является стандартной кнопки, класс .

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

примеров

<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <Форма класс = "NavBar-форма NAVBAR- левый" Роль = "Поиск"> <Div класс = "форма-группа"> <Input тип = "текст" класс = "форма-контроль" заполнитель = "Поиск"> </ Div> <Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > кнопка отправки </ Кнопка> </ Форма> <Кнопка типа "кнопка" = класс = "БТН БТН-умолчанию NavBar -btn"> кнопка навигационной панели кнопку </> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Кнопка в панели навигации

Текстовая панель навигации

Если вы хотите включить в текстовой строке навигации, использоватькласс .navbar-текст.Это часто используется в сочетании с тегом <p> для обеспечения правильной ведущих и цветов. Следующий пример иллюстрирует этот момент:

примеров

<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <P класс = "NavBar-текст"> w3big Логин пользователя </ p> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Текстовая панель навигации

В сочетании с значок ссылки навигации

Если вы хотите использовать в обычной пиктограмму навигационной составляющей навигационной панели, а затем использовать значок , чтобы установитькласс glyphicon glyphicon- *, больше , см значок Bootstrap , как показано в следующем примере:

примеров

<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Ul класс = "нав Navbar-нав Navbar -Верно"> <Li> HREF = "#"> <SPAN класс = "glyphicon glyphicon-пользователь" > </ SPAN> Регистрация </ A> </ li> <Li> HREF = "#"> <SPAN класс = "glyphicon glyphicon-логарифмическая в"> </ SPAN> Войти </ A> </ li> </ UL> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

В сочетании с значок ссылки навигации

Компонент Выравнивание

Вы можете использовать .navbar налево или.navbar направо или справа утилита классаслева выровненные панель навигациинавигационные ссылки, формы, кнопки, или текстэтих компонентов. Оба добавить класс CSS будет плавать в указанном направлении. Следующий пример иллюстрирует этот момент:

примеров

<Nav класс = "Navbar Navbar-умолчанию" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <! - Выровнять слева -> <Ul класс = "нав Navbar-нав Navbar -Выберите"> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> <Форма класс = "NavBar-форма NAVBAR- левый" Роль = "Поиск"> <Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > Align Left - Добавить Кнопка </ кнопка> </ Форма> <P класс = "NavBar-текст NAVBAR- левый"> Выровнять по левому краю - текст </ p> <! - Выравнивание по правому краю -> <Ul класс = "нав Navbar-нав Navbar -Верно"> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> <Форма класс = "NavBar-форма NAVBAR- право" Роль = "Поиск"> <Кнопка тип = "отправить" класс = "БТН БТН-умолчанию" > Выровнять справа - Добавить Кнопка </ кнопка> </ Форма> <P класс = "NavBar-текст NAVBAR- право"> Выровнять по правому краю - текст </ p> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Компонент Выравнивание

Фиксированный к началу

Bootstrap панель навигации может быть динамическим позиционированием. По умолчанию, это блочным элементом, который основан на местоположении HTML размещены в ориентации. Через несколько вспомогательных классов, вы можете поместить его в верхней или нижней части страницы, или вы можете сделать это вместе со страницей прокрутки статической навигационной панели.

Если вы хотите , панель навигации , прикрепленный к верхней части страницы, добавьтекласс .navbar фиксированной сверху .navbar класс.Следующий пример иллюстрирует этот момент:

Для того, чтобы предотвратить верхнюю панель навигации и тело содержимого страницы с другой в шахматном порядке, пожалуйста, добавьте тег, по крайней мере 50 пикселей дополнения к <тело> (обивка), значение дополнения могут быть установлены в соответствии с вашими потребностями.

примеров

<Nav класс = "Navbar Navbar-умолчанию Navbar -fixed-топ" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <Ul класс = "нав Navbar-нав" > <Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li> <Li> HREF = "#"> SVN < / а> </ li> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Фиксированный к началу

Установленный в концевой части

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

примеров

<Nav класс = "Navbar Navbar-умолчанию Navbar -fixed-дно" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <Ul класс = "нав Navbar-нав" > <Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li> <Li> HREF = "#"> SVN < / а> </ li> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Установленный в концевой части

Статический верх

Для того, чтобы быть в состоянии создать вместе с навигационной панели прокрутки страницы, добавьте.navbar-статическому высший класс.Этот класс не требует <тело> добавить отступы (дополнение).

примеров

<Nav класс = "Navbar Navbar-умолчанию Navbar -static-топ" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <Ul класс = "нав Navbar-нав" > <Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li> <Li> HREF = "#"> SVN < / а> </ li> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Переверните панель навигации

Чтобы создать панель навигации перевернутый черный фон с белым текстом, и просто добавить к.navbar-обратный класс .navbar класс,как показано в следующем примере:

Для того, чтобы предотвратить верхнюю панель навигации и тело содержимого страницы с другой в шахматном порядке, пожалуйста, добавьте тег, по крайней мере 50 пикселей дополнения к <тело> (обивка), значение дополнения могут быть установлены в соответствии с вашими потребностями.

примеров

<Nav класс = "Navbar Navbar-обратное" Роль = "навигация"> <Div класс = "контейнер-жидкость"> <Div класс = "Navbar-заголовок"> класс = "Navbar-бренд" HREF = "#"> учебник </ а> </ Div> <Div> <Ul класс = "нав Navbar-нав" > <Li класс = "активный"> <а HREF = "#"> Иос < / а> </ li> <Li> HREF = "#"> SVN < / а> </ li> <Li класс = "раскрывающимся"> HREF = "#" класс = "выпадающий-тумблер" данных тумблер = "раскрывающимся"> Java <б класс = "каретка"> </ B> </ A> <Ul класс = "выпадающий меню"> <Li> HREF = "#"> JMeter < / а> </ li> <Li> HREF = "#"> EJB < / а> </ li> <Li> HREF = "#"> Джаспер Отчет </ а> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> изолированных ссылка </ A> </ li> <Li класс = "разделитель"> </ li> <Li> HREF = "#"> другой изолированный ссылка </ A> </ li> </ UL> </ Li> </ UL> </ Div> </ Div> </ Nav>

Попробуйте »

Результаты следующие:

Переверните панель навигации