In diesem Artikel werden wir uns mit dem Erstellen eines solchen Webinterface-Elements als Navigationsblock für die Paginierung befassen. In Bootstrap 3 und 4 wird dieses UI-Element mithilfe der Paginierungskomponente implementiert.

Was ist Paginierung?

Paginierung ist eine Paginierung von Daten. Jene. Das ist die Schlussfolgerung wenn Daten ausgegeben werden nicht alle auf einmal, aber kleinteile (Seiten).

Um durch diese Teile (Seiten) zu navigieren, wird der Navigationsblock verwendet.

Die Paginierungskomponente des Bootstrap-Frameworks soll nur dieses Schnittstellenelement erstellen, d. H. navigationsblock.

Erstellen eines Navigationsblocks für die Paginierung

In Bootstrap 3 hat das Navigationsfeld die folgende Struktur:

Das nav-Element in diesem Snippet fungiert als Wrapping-Container. Es ist in dieser Struktur nur für unterstützende Technologien erforderlich nahm diesen HTML-Code als Navigation wahr.

Darüber hinaus ist es für unterstützende Technologien wünschenswert, auch zu klären, um welche Art von Navigationsblock es sich handelt. Diese Aktion wird über das Attribut aria-label ausgeführt.

Das Navigationsblock-Markup für die Paginierung in Bootstrap ist fertig mit liste mit Aufzählungszeichen... Jeder Navigationslink in diesem Block ist ein Element, das in ein li eingewickelt und in einem ul platziert ist.

Das visuelle Design der Navigationsbox in Bootstrap erfolgt mithilfe der Paginierungsklasse, die der ul hinzugefügt werden muss.

Navigationsblockstruktur in Bootstrap 4:

Beachten Sie, dass Sie in Bootstrap 4 den Elementen li und a Klassen hinzufügen müssen. Li ist die Seitenelementklasse und a ist der Seitenlink. Diese Klassen legen CSS-Stile für die Elemente fest und sind für die korrekte Anzeige des Navigationsblocks erforderlich.

Verwenden von Symbolen oder Symbolen anstelle von Textbeschriftungen

Ein Beispiel für eine Paginierungsnavigationsleiste, die Symbole als Inhalt für einige Links verwendet:

Ändern des Status eines Navigationslinks

Das Ändern des Status von Links in der Navigationsleiste erfolgt mithilfe der deaktivierten und aktiven Klassen. Die erste Klasse (deaktiviert) wird verwendet, um einen inaktiven (nicht anklickbaren) Link zu erstellen. Die zweite Klasse (aktiv) wird benötigt, um hervorzuheben (anzuzeigen) aktuelle Seite... Sie müssen die aktiven und deaktivierten Klassen nicht zum Link selbst, sondern zum li-Element hinzufügen.

Die deaktivierte Klasse legt die Zeigerereignisse für die Deklaration von CSS-Links fest: keine. Diese Ankündigung soll die Funktionalität des Links deaktivieren. Die Tastaturnavigation wird jedoch nicht deaktiviert. Wenn Sie daher die Funktionalität solcher Links in Ihrem Projekt vollständig deaktivieren möchten, müssen Sie sie mithilfe von JavaScript zusätzlich verfolgen und ihnen das Attribut tabindex \u003d "- 1" hinzufügen.

Eine andere Möglichkeit, die Link-Funktionalität zu deaktivieren, ist verwenden Sie nicht Element a.

Ändern der Größe des Navigationsfelds

In Bootstrap 3 und 4 können Sie die Größe des Navigationsfelds mithilfe der Klassen pagination-lg und pagination-sm ändern. Dies wird erreicht, indem eine dieser Klassen zur Paginierungsklasse hinzugefügt wird.

Die erste Klasse (pagination-lg) wird verwendet, wenn die Navigation vergrößert werden muss, und die zweite (pagination-sm), wenn sie reduziert werden muss.

Navigationsfeld ausrichten

In Bootstrap 3 erfolgt die Navbar-Ausrichtung für die Paginierung mit klassen für die Textausrichtung.

In Bootstrap 4 erfolgt die Navbar-Ausrichtung für die Paginierung mithilfe von Flex-Klassen.

Pager-Komponente (Bootstrap 3)

Pager ist eine Bootstrap 3-Komponente, mit der eine einfache Navigation durch Seiten oder andere Website-Inhalte erstellt werden kann. Diese Komponente besteht aus 2 Schaltflächen (Links).

Eine der häufigsten Anwendungen für diese Navigation besteht darin, dies so zu tun die erste Schaltfläche navigierte zu einem neueren Eintrag auf der Site und die zweite zu einem älteren.

Syntax der Pager-Komponente:

Ändern des Schaltflächenlayouts

Standardmäßig Pager-Schaltflächen mitte ausgerichtet... Neben dieser Option können sie mit Bootstrap 3 auch an verschiedenen Kanten ausgerichtet werden. Dies erfolgt durch Hinzufügen der Klasse vor der ersten Schaltfläche und neben der zweiten. Die vorherige Klasse richtet den Link links und rechts aus.

Deaktivieren Sie die Tastenfunktion

Das Deaktivieren einer Schaltfläche erfolgt durch Hinzufügen der deaktivierten Klasse.

Sammlung von frei HTML- und CSS-Paginierung Codebeispiele: reaktionsschnell, einfach, Materialdesign, Navigationspunkte, etc. Update der Kollektion Juni 2018. 5 neue Artikel.

In Verbindung stehende Artikel

Über den Code

Responsive Paginierung / Pager in HTML und CSS. Ändern Sie die Größe Ihres Browsers, um interessante Effekte zu erzielen.

Antwort: ja

Abhängigkeiten: bootstrap.css

Über den Code

Linie folgen Paginierung

CSS-Linie folgt Paginierung.

Antwort: ja

Abhängigkeiten: -

Über den Code

Paginierungsknöpfe

Reine CSS-Paginierungsschaltflächen.

Kompatible Browser: Chrome, Firefox, Opera, Safari

Antwort: ja

Abhängigkeiten: -

Über den Code

Linienpaginierung mit Hover

Reine CSS-Linienpaginierung mit Hover-Effekt.

Kompatible Browser: Chrome, Edge, Firefox, Opera, Safari

Antwort: ja

Abhängigkeiten: -

Über den Code

Pacman-Paginierung

Paginierungsanimation mit HTML, CSS und JS.

Kompatible Browser: Chrome, Edge, Firefox, Opera, Safari

Antwort: ja

Abhängigkeiten: -

Über den Code

Einfaches CSS.

Über den Code

Rein CSS Pac-Man-Paginierung mit Animation auf Schwebeflug.

Über den Code

Einfache reaktionsschnelle Paginierung.

Über den Code

HTML- und CSS-Paginierung.

Über den Code

Paginierungsbeispiel, mit dem Sie zwischen verschiedenen Seiten navigieren können. Dieses Beispiel müsste href-Attribute haben, um mit einer tatsächlichen Anwendung zu arbeiten, die eine Paginierung erfordert.

Über den Code

Paginierung mit benutzerdefinierten CSS-Eigenschaften.

Paginierungsoptionen und -designs.
Hergestellt von MojoM
25. Mai 2017

Demo GIF: SVG Page Hopper

HTML-, CSS- und SVG-Seitentrichter.
Hergestellt von Chris Gannon
14. Mai 2017

Demo GIF: Unendliche Paginierung

Unendliche Paginierung in HTML und CSS.
Hergestellt von Mariusz Dabrowski
27. April 2017

Über den Code

CSS-Komponenten:.

12 Ideen für die Website-Paginierung mit HTML und CSS.
Hergestellt von Rosa
3. November 2016

Demo GIF: Paginierung

Paginierung mit HTML / CSS / JavaScript.
Hergestellt von JP Nothard
9. Oktober 2016

Demo GIF: Paginierungs-Hover-Animation

Hover-Animation für HTML- und CSS-Paginierung.
Hergestellt von Elena Nazarova
12. September 2016

Paginierung mit Hover-Effekt.
Hergestellt von Andre Wichert
27. August 2016

Paginierungsindikatoren mit HTML, CSS und JavaScript.
Hergestellt von Moses Holmström
19. August 2016

Hergestellt von Brendan Mullins
16. August 2016

Responsive Magic Line Paginierung

Erstellen Sie eine magische Linie für Ihre Paginierung. Es schaut toll aus.
Hergestellt von Ryan Yu
18. Februar 2015

Reaktionsschnelles, zugängliches, alternatives Paginierungsexperiment.
Hergestellt von Simon Goellner
11. November 2014

Demo GIF: Paginierungspfeile

Paginierungspfeile biegen.
Hergestellt von Hakim El Hattab
18. Oktober 2013

Websites enthalten normalerweise mehrere Seiten. Sie können bis zu 3-5 Seiten enthalten, z. B. auf einer Zielseite oder mehr, viel mehr.

Jede gute Site sollte eine Navigation enthalten, mit der der Benutzer zwischen den Seiten der Site navigieren und korrekt navigieren kann. Sie können eine solche Paginierung mit JavaScript erstellen. In diesem Artikel wird erläutert, wie Sie eine solche Navigation erstellen.

Neben dem üblichen JavaScript wird im Beispiel Bootstrap 4 verwendet. Die Bootstrap-Paginierungskomponente wird mit der JQuery-Bibliothek kombiniert, nämlich dem speziellen Buzina-Paginierungs-Plugin. Sie können alle Informationen in mehrere Seiten aufteilen und eine Navigation zwischen ihnen erstellen.

Anschließen der erforderlichen Frameworks

Um mit Bootstrap und JQuery arbeiten zu können, müssen Sie sie verbinden. Dies kann in Ihrem HTML-Dokument mithilfe von Tags erfolgen

Wenn Sie jQuery bereits auf Ihrer Site aktiviert haben und mit may und main arbeiten, können Sie alle oben beschriebenen Gesten sicher überspringen. Hauptsache, Sie müssen sicherstellen, dass die jQuery-Version nicht zu dicht ist. In WordPress ist das übrigens in Ordnung.
Als nächstes verbinden wir unser Workhorse Plugin jquery.simplePagination.js:

Sie müssen den Garten nicht umzäunen, sondern einfach den gewünschten Stil auswählen, hell, dunkel oder kompakt, und die Regeln in die Stylesheet-CSS-Datei Ihrer Vorlage einfügen. Schreiben Sie Ihre eigenen Stile oder verwenden Sie BootstrapAuch eine Option in Bezug auf Originalität und Entwicklung der Fähigkeiten zum Aufbau von Websites ist noch vorzuziehen.

Schritt 3. HTML

Um die Paginierungsleiste auf den Seiten der Site anzuzeigen, auf denen Sie sie platzieren möchten, ist sie logischer und befindet sich meistens am Ende des Hauptinhalts. Schreiben Sie Folgendes:
Für einen hellen Hintergrund:

Kompaktes Thema:

$ (function () ($ (# light-pagination) .pagination ((items: 100, itemsOnPage: 10, cssStyle: "light-theme"));));

In dem Beispiel, in dem ich die Initialisierung verwendet habe, um das Lichtthema # Licht-Paginierung zu paginieren, können Sie den Selektor auf etwas anderes ändern, für eine kompakte # Kompakt-Paginierung oder für eine dunkle # Dunkel-Paginierung. Vergessen Sie in diesem Fall nicht, auch die Klasse in der Funktion zu ändern. cssStyle.
Kai Ich habe bereits oben geschrieben, das Plugin ist sehr flexibel in den Einstellungen, die folgenden Optionen stehen zum Ändern zur Verfügung:

• artikel - Die Gesamtzahl der Elemente, die zur Berechnung der Seiten verwendet werden sollen. Default: 1 .
• itemsOnPage - Die Anzahl der auf jeder Seite angezeigten Elemente. Default: 1 .
• seiten - Optional. Wenn angegeben, werden die Optionen items und itemsOnPage ignoriert. Legt die Anzahl der Seiten in der Liste fest.
• angezeigte Seiten - Wie viele Seitenzahlen sollten während der Navigation sichtbar sein? Zulässiger Mindestwert: 3 , Default: 5 .
• kanten - Wie viele Seitenzahlen sind am Anfang und Ende der Nummerierung sichtbar? Standardwert: 2 .
• aktuelle Seite - Welche Seite wird sofort nach dem Start ausgewählt. Die Standardeinstellung lautet logischerweise: 1 .
• hrefTextPrefix - Die im HREF-Attribut verwendete Zeichenfolge wird vor der Seitenzahl hinzugefügt. Default: "# Seite-".
• hrefTextSuffix - Die im HREF-Attribut verwendete Zeichenfolge wird nach der Seitenzahl eingefügt. Zeichenfolge standardmäßig leeren.
• prevText - Schaltflächentext zur vorherigen Seite. Default: "Zurück".
• nextText - Schaltflächentext für die nächste Seite. Default: "Nächster"
• cssStyle - Bestimmen Sie den CSS-Stil. Default: "Lichtthema"
• selectOnClick - Auswahl einer Seite nach dem Klicken, standardmäßig aktiviert ( wahr), warum ich nicht verstanden habe, warum ich es deaktivieren soll, aber es gibt eine solche Möglichkeit, Wert: "falsch".

Wir haben die grundlegendsten Einstellungen behandelt. Sie können sich über zusätzliche Funktionen und verfügbare Methoden zur Verwendung dieses Plugins informieren, indem Sie die Dokumentation direkt auf der Entwicklerseite lesen.

Ich kann Ihnen nur viel Glück und Erfolg bei der Arbeit an Ihren neuen Projekten wünschen.