Latest web development tutorials
×

Foundation курс

Foundation курс Foundation Начало работы Foundation текст Foundation таблица Foundation кнопка Foundation Группа кнопок Foundation иконка Foundation этикетка Foundation Напоминание окно Foundation Шкала прогресса Foundation панель Foundation изображение Foundation Выпадающее меню Foundation Складной Список Foundation список Foundation таб Foundation пейджинг Foundation Прайс-лист Foundation Верхней панели навигации Foundation Боковая панель Foundation Авто-навигация(Off-Canvas) Foundation Magellan Foundation форма Foundation Размер входного кадра Foundation переключатель Foundation ползунок Foundation воздушный шар Foundation режимное окно Foundation Joyride Foundation балансир

Foundation меш

Foundation Grid System Foundation меш - Горизонтально сложены Foundation меш - Малое оборудование Foundation меш - Среднего размера оборудование Foundation меш - Большое оборудование Foundation Блок сетки Foundation Сетка Примеры

Foundation справочное руководство

Foundation Значок Справочное руководство Foundation CSS справочное руководство Foundation CSS видимость

вкладка Foundation

Если у вас есть много страниц контента, вам нужно использовать функцию подкачки.

Для того, чтобы создать базовую функцию подкачки требуется <ul> на элемент плюс .pagination категорий:

примеров

<Ul класс = "нумерацией страниц">
<Li> <a HREF = "#"> 1 </ а> </ li>
<Li> <a HREF = "#"> 2 </ а> </ li>
<Li> <a HREF = "#"> 3 </ а> </ li>
<Li> <a HREF = "#"> 4 </ а> </ li>
<Li> <a HREF = "#"> 5 </ а> </ li>
</ UL>

Попробуйте »

Текущая страница

Вы можете <li> добавлен .current класс , чтобы отметить текущую страницу:

примеров

<Ul класс = "нумерацией страниц">
<Li класс = "текущий"> <a HREF = "#"> 1 </ а> </ li>
<Li> <a HREF = "#"> 2 </ а> </ li>
<Li> <a HREF = "#"> 3 </ а> </ li>
<Li> <a HREF = "#"> 4 </ а> </ li>
<Li> <a HREF = "#"> 5 </ а> </ li>
</ UL>

Попробуйте »

вкладка Отключить

Если вам необходимо создать вкладку , которую вы не кликабельна нужны .unavailable категории:

примеров

<Ul класс = "нумерацией страниц">
<Li> <a HREF = "#"> 1 </ а> </ li>
<Li> <a HREF = "#"> 2 </ а> </ li>
<Li класс = "недоступен"> <a HREF = "#"> 3 </ а> </ li>
<Li> <a HREF = "#"> 4 </ а> </ li>
<Li> <a HREF = "#"> 5 </ а> </ li>
</ UL>

Попробуйте »

направление поискового вызова

В первом и последнем коде> <li> Добавьте элемент .arrow класс вставки HTML сущности Символ &laquo; и &raquo; чтобы создать символ направления поискового вызова:

примеров

<Ul класс = "нумерацией страниц">
<Li класс = "стрелка"> <a HREF = "#"> & LAQUO; </ а> </ li>
<Li> <a HREF = "#"> 1 </ а> </ li>
<Li> <a HREF = "#"> 2 </ а> </ li>
<Li> <a HREF = "#"> 3 </ а> </ li>
<Li> <a HREF = "#"> 4 </ а> </ li>
<Li> <a HREF = "#"> 5 </ а> </ li>
<Li класс = "стрелка"> <a HREF = "#"> & RAQUO; </ а> </ li>
</ UL>
Попробуйте »

пейджинг по центру

Мы можем добавить <уль> внешняя <div> элемент и <div> Добавить на .pagination-centered классов для реализации пейджинга центрированную:

примеров

<Div класс = "разбиение на страницы в центре ">
<Ul класс = "нумерацией страниц">
<Li класс = "стрелка"> <a HREF = "#"> & LAQUO; </ а> </ li>
<Li класс = "текущий"> <a HREF = "#"> 1 </ а> </ li>
<Li> <a HREF = "#"> 2 </ а> </ li>
<Li> <a HREF = "#"> 3 </ а> </ li>
<Li> <a HREF = "#"> 4 </ а> </ li>
<Li> <a HREF = "#"> 5 </ а> </ li>
<Li класс = "стрелка"> <a HREF = "#"> & RAQUO; </ а> </ li>
</ UL>
</ Div>

Попробуйте »

панировочные сухари

Breadcrumbs структура навигации используется для отображения текущей страницы.

В <ul> на элемент добавлен .breadcrumbs класс для реализации хлебных крошек. Вы можете добавить <li> на .current или .unavailable класса установить текущую страницу и не интерактивными эффект:

примеров

<UL класс = "хлебных крошек">
<Li> <a HREF = "#"> Главная </ а> </ li>
<Li> <a HREF = "#"> Private </ A> </ li>
<Li класс = "недоступен"> <a HREF = "#"> Фотографии </ а> </ li>
<Li класс = "текущий"> отпуск </ li>
</ UL>

Попробуйте »

Sub навигации

Переключение на странице, суб-навигации очень полезно.

В <dl> элемент добавляется .sub-nav класс для создания Поднавигация. В <dt> на элементе , чтобы добавить название для выбранной опции <dd> Добавить .active категории:

примеров

<Ul класс = "суб-нав ">
<Dt> Фильтр: </ DT >
<Dd класс = "активный"> <a HREF = "#"> Все </ а> </ дд>
<Dd> <a HREF = "#"> Активный </ а> </ дд>
<Dd> <a HREF = "#"> В ожидании </ а> </ дд>
<Dd> <a HREF = "#"> Приостановлено </ а> </ дд>
</ UL>

Попробуйте »