Лучшее руководство по вкладка Foundation в 2024 году. В этом руководстве вы можете изучить
Текущая страница,вкладка Отключить,направление поискового вызова,пейджинг по центру,панировочные сухари,Sub навигации,
вкладка 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 сущности Символ « и » чтобы создать символ направления поискового вызова:
примеров
<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> Попробуйте »