Η σελιδοποίηση, και αν η poptrosta - σελιδοποίηση, είναι ένα σημαντικό στοιχείο οποιουδήποτε περισσότερο ή λιγότερο γεμάτο ιστότοπου. Διάφορα συστήματαΗ διαχείριση ιστοτόπων, ως επί το πλείστον, έχει ενσωματωμένα εργαλεία για την υλοποίηση σελιδοποίησης. Υπάρχουν επίσης πολλά ξεχωριστά πρόσθετα γραμμένα για αυτό το χρήσιμο πράγμα, στις περισσότερες περιπτώσεις κατασκευάζονται χρησιμοποιώντας το . Όλα αυτά τα πρόσθετα, διαφορετικά τόσο σε στυλ εκτέλεσης όσο και σε λειτουργικότητα, αλλά το πιο σημαντικό, όλα αυτά, αυτή είναι μια εξαιρετική εναλλακτική στην εφαρμογή σελιδοποίησης του μαζικού περιεχομένου των τοποθεσιών από την πλευρά του διακομιστή.
Προτείνω προς εξέταση, κατά τη γνώμη μου, ένα από τα πιο εύκολα Πρόσθετα jQuery, για να δημιουργήσετε σελιδοποίηση που σας βοηθά να οργανώσετε, ελκυστική και γρήγορη σελιδοποίηση.
Πολύ ελαφρύ, από κάθε άποψη, και σε βάρος, και ό,τι σχετίζεται με τη σύνδεση, τις ρυθμίσεις, το ζοφερό για τη δημιουργία σελιδοποίησης, εξοπλισμένο με τρία στυλ σχεδίασης και φορτωμένο με υποστήριξη.
Παρεμπιπτόντως, εάν δεν είστε ικανοποιημένοι με τα τυπικά στυλ, μπορείτε να χρησιμοποιήσετε το , το οποίο δεν θα είναι δύσκολο να βιδώσετε .cssσυνδέω.
Τώρα, ας ρίξουμε μια πιο προσεκτική ματιά στο πώς να συνδέσετε σωστά την ίδια την προσθήκη και το αρχείο στυλ στο έγγραφο, δηλαδή να το ενσωματώσετε απευθείας στις σελίδες του ιστότοπου και να περάσετε από τις διαθέσιμες ρυθμίσεις προσθήκης.
Για αρχή, φυσικά, πρέπει να έχετε ένα πρόσθετο, δηλαδή με τον πηγαίο κώδικα, στον οποίο το jquery javascriptκαι αρχείο στυλ css.
Ας ρίξουμε μια ματιά στον τρόπο χρήσης της προσθήκης βήμα προς βήμα:
Βήμα 1 Συμπεριλαμβανομένου του jQuery
Στο σώμα της σελίδας στην ενότητα
...πρέπει να συνδέσετε το πλαίσιο jQuery, κατά προτίμηση την έκδοση 1.7.2 ή πιο πρόσφατη, μπορείτε να το κάνετε χρησιμοποιώντας ένα ειδικό αποθετήριο Google:Εάν έχετε ήδη ενεργοποιημένο το jQuery στον ιστότοπό σας και λειτουργεί με δυναμικό και κύριο, μπορείτε να παραλείψετε με ασφάλεια όλες τις χειρονομίες που περιγράφονται παραπάνω, το κύριο πράγμα είναι να βεβαιωθείτε ότι η έκδοση jQuery δεν είναι πολύ πυκνή. Στο WordPress, παρεμπιπτόντως, όλα είναι εντάξει.
Στη συνέχεια, συνδέουμε το άλογο εργασίας μας - το πρόσθετο jquery.simplePagination.js:
Δεν μπορείτε να περιφράξετε τον κήπο, αλλά απλώς επιλέξτε το στυλ που χρειάζεστε, ανοιχτό, σκούρο ή συμπαγές και εισάγετε το σύνολο κανόνων στο αρχείο .css του προτύπου σας. Γράψτε τα δικά σας στυλ ή χρησιμοποιήστε Bootstrap, επίσης μια επιλογή, όσον αφορά την πρωτοτυπία και την ανάπτυξη δεξιοτήτων κατασκευής τοποθεσιών, ακόμη πιο προτιμότερη.
Βήμα 3 HTML
Για να εμφανίσετε τη γραμμή σελιδοποίησης στις σελίδες του ιστότοπου, όπου σκοπεύετε να την τοποθετήσετε, είναι πιο λογικό και τις περισσότερες φορές, αυτό βρίσκεται στο κάτω μέρος του κύριου περιεχομένου, θα πρέπει να γράψετε τα εξής:
Για ανοιχτόχρωμο φόντο:
Συμπαγές θέμα:
$(function() ( $(#light-pagination).pagination(( στοιχεία: 100, itemsOnPage: 10, cssStyle: "light-theme" )); ));
Στο παράδειγμα, χρησιμοποίησα την αρχικοποίηση #light-pagination για σελιδοποίηση ανοιχτού θέματος, αλλά μπορείτε να αλλάξετε τον επιλογέα σε άλλο, για compact είναι #compact-pagination ή για σκοτεινό στυλ #dark-pagination . Σε αυτήν την περίπτωση, μην ξεχάσετε να αλλάξετε την κλάση στη συνάρτηση στυλ css.
Όπως έγραψα ήδη παραπάνω, το πρόσθετο είναι πολύ ευέλικτο στις ρυθμίσεις, οι ακόλουθες επιλογές είναι διαθέσιμες για αλλαγή:
- είδη- Ο συνολικός αριθμός των στοιχείων που θα χρησιμοποιηθούν για τον υπολογισμό των σελίδων. Προκαθορισμένο: 1 .
- αντικείμενα Στη Σελίδα- Ο αριθμός των στοιχείων που εμφανίζονται σε κάθε σελίδα. Προκαθορισμένο: 1 .
- σελίδες- Προαιρετικός. Εάν έχει καθοριστεί μια τιμή, τα στοιχεία και οι επιλογές itemsOnPage αγνοούνται. Ορίζει τον αριθμό των σελίδων στη λίστα.
- εμφανιζόμενες σελίδες- Πόσοι αριθμοί σελίδων πρέπει να είναι ορατοί κατά την πλοήγηση. Ελάχιστο επιτρεπόμενη τιμή: 3 , Προκαθορισμένο: 5 .
- άκρα— Πόσοι αριθμοί σελίδων είναι ορατοί στην αρχή και στο τέλος της αρίθμησης. Προεπιλεγμένη τιμή: 2 .
- τρέχουσα σελίδα- Ποια σελίδα θα επιλεγεί αμέσως μετά την εκκίνηση. Λογικά, η προεπιλεγμένη τιμή είναι: 1 .
- hrefTextPrefix- Η συμβολοσειρά που χρησιμοποιείται στο χαρακτηριστικό HREF προστίθεται πριν από τον αριθμό της σελίδας. Προκαθορισμένο: "#σελίδα".
- hrefTextSupfix- Η συμβολοσειρά που χρησιμοποιείται στο χαρακτηριστικό HREF εισάγεται μετά τον αριθμό σελίδας. Η προεπιλογή είναι μια κενή συμβολοσειρά.
- prevText— Κείμενο κουμπιού στην προηγούμενη σελίδα. Προκαθορισμένο: "προηγούμενο".
- επόμενο κείμενο— Κείμενο κουμπιού για την επόμενη σελίδα. Προκαθορισμένο: Επόμενο
- στυλ css- Καθορίσει στυλ css. Προκαθορισμένο: "ελαφρύ θέμα"
- επιλέξτεOnClick- Επιλογή σελίδας μετά από κλικ, από προεπιλογή - ενεργοποιημένη ( αληθής), δεν κατάλαβα γιατί να το απενεργοποιήσω, αλλά υπάρχει μια τέτοια ευκαιρία, η τιμή είναι "ψευδής".
Καλύψαμε τις πιο βασικές ρυθμίσεις. Ο Επιπρόσθετα χαρακτηριστικάκαι διαθέσιμες μεθόδουςΜπορείτε να μάθετε πώς να χρησιμοποιήσετε αυτό το πρόσθετο διαβάζοντας την τεκμηρίωση απευθείας στη σελίδα του προγραμματιστή.
Απομένει μόνο να σας ευχηθώ καλή τύχη και επιτυχία στην εργασία στα νέα σας έργα.
Η σελιδοποίηση, συμπεριλαμβανομένης της πλοήγησης στη σελίδα, είναι ένα αρκετά απλό πράγμα, αλλά οι αρχάριοι συχνά δυσκολεύονται να το δημιουργήσουν και το πιο σημαντικό, να κατανοήσουν πώς λειτουργεί...
Μία από τις εργασίες της σελιδοποίησης είναι η ταυτόχρονη εμφάνιση όχι όλων των στοιχείων, αλλά ο περιορισμένος αριθμός τους, ας πούμε, όχι περισσότερο από στοιχεία $pp, και ποια ομάδα στοιχείων εμφανίζεται εξαρτάται από παράμετρος εισόδουΟι $pn είναι οι αριθμοί αυτής της ομάδας. Αυτός ο αριθμός είναι στην πραγματικότητα ο αριθμός σελίδας. Εδώ είναι ένα αίτημα σαν αυτό:
ΕΠΙΛΟΓΗ * ΑΠΟ ΟΡΙΟ `πίνακας` (($pn-1)*$pp),($pp)
Η τιμή του $pn μειώνεται κατά 1, έτσι ώστε, για παράδειγμα, για την πρώτη σελίδα μιας λίστας με τιμή $pp ίση με 10, να επιλέγονται στοιχεία από 0 έως 9 και όχι από 10 σε 19. Φυσικά, Εάν οι σελίδες είναι αριθμημένες από το μηδέν, μειώστε την τιμή του $ pn δεν χρειάζεται στο αίτημα.
Για να λύσετε το επόμενο πρόβλημα, δηλαδή τη δημιουργία μιας πλοήγησης σελίδας, πρώτα απ 'όλα, πρέπει να γνωρίζετε τον συνολικό αριθμό σελίδων στη λίστα. Για να το κάνετε αυτό, μπορείτε πρώτα να ρωτήσετε τον συνολικό αριθμό στοιχείων. Ή, απευθείας στο ερώτημα, υπολογίστε τον συνολικό αριθμό σελίδων με βάση τον συνολικό αριθμό στοιχείων:
SELECT FLOOR((COUNT(*)+($pp-1))/($pp)) FROM `table`
Για να λάβετε τον συνολικό αριθμό σελίδων $pc, χρησιμοποιείται εδώ ο γνωστός τύπος $pc=(count+per_page-1) div per_page, αλλά προσαρμόστηκε για τη χρήση της συνάρτησης FLOOR αντί της διαίρεσης ακεραίων (div). Μπορείτε επίσης να χρησιμοποιήσετε τον τελεστή DIV, ο οποίος υποστηρίζεται στη MySQL εδώ και πολύ καιρό.
Εάν χρειάζεται να εμφανίσετε μόνο ένα στοιχείο ανά σελίδα, τα παραπάνω ερωτήματα μπορούν να απλοποιηθούν.
Αφού ληφθεί ο συνολικός αριθμός σελίδων $pc, μπορείτε να εμφανίσετε αμέσως συνδέσμους προς όλες τις σελίδες της λίστας κάνοντας βρόχο με έναν μετρητή στην περιοχή από 1 έως $pc μόνο σε σελίδες με αριθμούς σε περιορισμένο αριθμό που εξαρτάται τρέχουσα σελίδαεύρος. Για παράδειγμα, εδώ είναι οι τύποι για τη λήψη των τιμών περιορισμού εύρους $first και $last για τη λεγόμενη πλοήγηση τράπεζας:
$first=$pn-1-($pn-2)%$εύρος; $last=$first+$εύρος<$pc?$first+$range:$pc;
Στο $range, πρέπει να βάλετε μια τιμή 1 μικρότερη από το απαιτούμενο εύρος εύρους, για παράδειγμα, για να εμφανίσετε όχι περισσότερους από επτά κανονικούς συνδέσμους σε σελίδες, πρέπει να βάλετε την τιμή 6 στο $range. Εάν συνδυάσετε όλα όσα γράφτηκαν παραπάνω, θα μοιάζει με αυτό:
$pp=10; if ($result=mysqli_query($link,"SELECT FLOOR((COUNT(*)+".($pp-1).")/".$pp.") FROM `table`")) ( λίστα($ pc)=mysqli_fetch_row($result); mysqli_free_result($result); // τοποθετήστε το rotator για τους αριθμούς σελίδων 0 και 1 εδώ εάν ($pn==0||$pn>$pc) error(404); elseif ($result =mysqli_query($link,"SELECT * FROM `table` LIMIT ".(($pn-1)*$pp).",".$pp)) ( $range=6; $first=$pn-1- ($pn-2)%$range; $last=$first+$range<$pc?$first+$range:$pc; } else error(503); } else error(503);
Απομένει μόνο να εμφανιστεί η γραμμή πλοήγησης:
Στην υλοποίηση που φαίνεται, ο πρώτος κανονικός σύνδεσμος (αν δεν είναι σύνδεσμος προς την πρώτη σελίδα) σας επιτρέπει να μεταβείτε στην προηγούμενη τράπεζα σελίδων. Εάν θέλετε ο τελευταίος κανονικός σύνδεσμος να σας επιτρέπει επίσης να μεταβείτε στην επόμενη ομάδα σελίδων (δηλαδή, λειτουργεί παρόμοια με τον σύνδεσμο "Περισσότερα" και μπορεί να τον αντικαταστήσει), μπορείτε να καθορίσετε την έκφραση ($range-1) αντί της μεταβλητής $range στον πρώτο τύπο ως διαιρέτης.
Η λειτουργία σύνδεσης σελίδας είναι υπεύθυνη για τη δημιουργία του τμήματος του συνδέσμου που καθορίζει τον αριθμό σελίδας. Όταν χρησιμοποιείτε τον περιστροφέα αριθμού σελίδας 0 και 1, αυτή η λειτουργία τοποθετείται καλύτερα δίπλα στον περιστροφέα, επειδή θα πρέπει να αντισταθμίζει το αποτέλεσμα του rotator, επιτρέποντάς σας να λάβετε τη διεύθυνση / αντί για /?p=1 στον σύνδεσμο για να ταιριάζει με τη μηδενική τιμή της παραμέτρου εισόδου $pn:
Συνάρτηση pagelink($p) ( return $p>1?"?p=".$p:"; ) εάν ($pn==0) $pn++; elseif ($pn==1) $pn--;
συλλογή δωρεάν Σελιδοποίηση HTML και CSSπαραδείγματα κωδικών: απόκριση, απλή, σχεδιασμός υλικού, κουκκίδες πλοήγησης, και τα λοιπά. Ενημέρωση συλλογής Ιουνίου 2018. 5 νέα είδη.
Σχετικά Άρθρα
Σχετικά με τον κωδικό
Αποκριτική σελιδοποίηση/σελιδοποίηση σε HTML και CSS. Αλλάξτε το μέγεθος του προγράμματος περιήγησής σας για να εμφανίσετε ενδιαφέρον εφέ.
Ανταπόκριση: ναι
Εξαρτήσεις: bootstrap.css
Σχετικά με τον κωδικό
Σελιδοποίηση ακολουθίας γραμμής
Η γραμμή CSS ακολουθεί τη σελιδοποίηση.
Ανταπόκριση: ναι
Εξαρτήσεις: -
Σχετικά με τον κωδικό
Κουμπιά σελιδοποίησης
Καθαρά κουμπιά σελιδοποίησης CSS.
Συμβατά προγράμματα περιήγησης: Chrome, Firefox, Opera, Safari
Ανταπόκριση: ναι
Εξαρτήσεις: -
Σχετικά με τον κωδικό
Σελιδοποίηση γραμμής με Hover
Καθαρή σελιδοποίηση γραμμής CSS με εφέ hover.
Συμβατά προγράμματα περιήγησης: Chrome, Edge, Firefox, Opera, Safari
Ανταπόκριση: ναι
Εξαρτήσεις: -
Σχετικά με τον κωδικό
Pacman Pagination
Κινούμενη εικόνα σελιδοποίησης με HTML, CSS και JS.
Συμβατά προγράμματα περιήγησης: Chrome, Edge, Firefox, Opera, Safari
Ανταπόκριση: ναι
Εξαρτήσεις: -
Σχετικά με τον κωδικό
απλό css.
Σχετικά με τον κωδικό
ΚΑΘΑΡΟΣ Σελιδοποίηση CSS Pac-Manμε κινούμενα σχέδια στο hover.
Σχετικά με τον κωδικό
Απλή αποκριτική σελιδοποίηση.
Σχετικά με τον κωδικό
Σελιδοποίηση HTML και CSS.
Σχετικά με τον κωδικό
Παράδειγμα σελιδοποίησης που σας επιτρέπει να πλοηγηθείτε μεταξύ διαφορετικών σελίδων. Αυτό το παράδειγμα θα πρέπει να έχει χαρακτηριστικά href για να λειτουργεί με μια πραγματική εφαρμογή που απαιτεί σελιδοποίηση.
Σχετικά με τον κωδικό
Σελιδοποίηση με προσαρμοσμένες ιδιότητες CSS.
Επιλογές και σχέδια σελιδοποίησης.
Κατασκευάστηκε από την MojoM
25 Μαΐου 2017
Επίδειξη GIF: SVG Page Hopper
Χοάνη σελίδας HTML, CSS και SVG.
Δημιουργήθηκε από τον Chris Gannon
14 Μαΐου 2017
Επίδειξη GIF: Άπειρη Σελιδοποίηση
Άπειρη σελιδοποίηση σε HTML και CSS.
Δημιουργήθηκε από τον Mariusz Dabrowski
27 Απριλίου 2017
Σχετικά με τον κωδικό
Στοιχεία CSS: .
12 ιδέες για σελιδοποίηση ιστότοπου με HTML και CSS.
Κατασκευάστηκε από τη Rosa
3 Νοεμβρίου 2016
Επίδειξη GIF: Σελιδοποίηση
Σελιδοποίηση με HTML/CSS/JavaScript.
Κατασκευάστηκε από τον JP Nothard
9 Οκτωβρίου 2016
Επίδειξη GIF: Pagination Hover Animation
HTML και CSS σελιδοποίηση αιωρούνται κινούμενα σχέδια.
Φτιαγμένο από την Έλενα Ναζάροβα
12 Σεπτεμβρίου 2016
Σελιδοποίηση με εφέ hover.
Φτιαγμένο από τον Andre Wichert
27 Αυγούστου 2016
Ενδείξεις σελιδοποίησης με HTML, CSS και JavaScript.
Δημιουργήθηκε από τον Moses Holmström
19 Αυγούστου 2016
Δημιουργήθηκε από τον Brendan Mullins
16 Αυγούστου 2016
Responsive Magic Line Pagination
Δημιουργήστε μια μαγική γραμμή για τη σελιδοποίηση σας. Φαίνεται φοβερό.
Δημιουργήθηκε από τον Ryan Yu
18 Φεβρουαρίου 2015
Πείραμα ανταποκρινόμενο, προσβάσιμο, εναλλακτικό πείραμα σελιδοποίησης.
Δημιουργήθηκε από τον Simon Goellner
11 Νοεμβρίου 2014
Επίδειξη GIF: Βέλη σελιδοποίησης
Λαμπτικά βέλη σελιδοποίησης.
Κατασκευάστηκε από τον Hakim El Hattab
18 Οκτωβρίου 2013
Σε αυτό το άρθρο, θα εξετάσουμε τη διαδικασία δημιουργίας ενός τέτοιου στοιχείου διεπαφής ιστού ως μπλοκ πλοήγησης για σελιδοποίηση. Στο Bootstrap 3 και 4, αυτό το στοιχείο διεπαφής χρήστη υλοποιείται χρησιμοποιώντας το στοιχείο Σελιδοποίηση.
Τι είναι η σελιδοποίηση;
Η σελιδοποίηση είναι μια σελιδοποίηση δεδομένων. Εκείνοι. αυτό είναι το συμπέρασμα όταν εξάγονται δεδομέναόχι όλα ταυτόχρονα, αλλά μικρά μέρη (σελίδες).
Για την πλοήγηση σε αυτά τα μέρη (σελίδες), χρησιμοποιείται ένα μπλοκ πλοήγησης.
Το στοιχείο σελιδοποίησης του πλαισίου Bootstrap έχει σχεδιαστεί απλώς για τη δημιουργία αυτού του στοιχείου διεπαφής, δηλ. μπλοκ πλοήγησης.
Δημιουργία μπλοκ πλοήγησης για σελιδοποίηση
Στο Bootstrap 3, το μπλοκ πλοήγησης έχει την ακόλουθη δομή:
Το στοιχείο nav σε αυτό το κομμάτι παίζει το ρόλο ενός περιέκτη περιτυλίγματος. Χρειάζεται σε αυτή τη δομή μόνο έτσι ώστε οι υποστηρικτικές τεχνολογίες αντιλήφθηκε αυτό το κομμάτι κώδικα HTML ως πλοήγηση.
Επιπλέον, είναι επιθυμητό οι υποστηρικτικές τεχνολογίες να εξηγούν τι είδους μπλοκ πλοήγησης είναι. Αυτή η ενέργεια εκτελείται μέσω του χαρακτηριστικού aria-label.
Η σήμανση του μπλοκ πλοήγησης για σελιδοποίηση στο Bootstrap γίνεται χρησιμοποιώντας λίστα με κουκκίδες. Κάθε σύνδεσμος πλοήγησης σε αυτό το μπλοκ είναι ένα στοιχείο τυλιγμένο σε ένα li και τοποθετημένο σε ένα ul .
Η οπτική σχεδίαση του πλαισίου πλοήγησης στο Bootstrap γίνεται χρησιμοποιώντας την κλάση σελιδοποίησης, η οποία πρέπει να προστεθεί στο ul .
Δομή μπλοκ πλοήγησης στο Bootstrap 4:
Σημειώστε ότι στο Bootstrap 4, τα στοιχεία li και a πρέπει να έχουν το . Το li είναι στοιχείο σελίδας και το a είναι σύνδεσμος σελίδας. Αυτές οι κλάσεις ορίζουν στυλ CSS για τα στοιχεία και απαιτούνται για τη σωστή εμφάνιση του μπλοκ πλοήγησης.
Χρησιμοποιήστε εικονίδια ή εικονίδια αντί για ετικέτες κειμένου
Ένα παράδειγμα γραμμής πλοήγησης για σελιδοποίηση που χρησιμοποιεί εικονίδια ως περιεχόμενο για ορισμένους από τους συνδέσμους:
Αλλαγή της κατάστασης ενός συνδέσμου πλοήγησης
Η αλλαγή της κατάστασης των συνδέσμων στη γραμμή πλοήγησης γίνεται με χρήση των απενεργοποιημένων και ενεργών κλάσεων. Η πρώτη κλάση ( απενεργοποιημένη ) χρησιμοποιείται για τη δημιουργία ενός ανενεργού (χωρίς κλικ) συνδέσμου. Η δεύτερη κλάση ( ενεργή ) χρειάζεται για να επισημάνετε (υποδείξει) τρέχουσα σελίδα. Πρέπει να προσθέσετε τις ενεργές και τις απενεργοποιημένες κλάσεις όχι στον ίδιο τον σύνδεσμο, αλλά στο στοιχείο li.
Η κλάση απενεργοποιημένη ορίζει τα συμβάντα-δείκτες δήλωσης συνδέσμων CSS: κανένα . Αυτή η δήλωση έχει σκοπό να απενεργοποιήσει τη λειτουργικότητα του συνδέσμου. Αλλά δεν απενεργοποιεί τη μετάβαση σε αυτό χρησιμοποιώντας το πληκτρολόγιο. Επομένως, εάν θέλετε να απενεργοποιήσετε εντελώς τη λειτουργικότητα τέτοιων συνδέσμων στο έργο σας, τότε θα πρέπει να τους παρακολουθήσετε επιπλέον χρησιμοποιώντας JavaScript και να προσθέσετε το χαρακτηριστικό tabindex="-1" σε αυτούς.
Ένας άλλος τρόπος για να απενεργοποιήσετε τη λειτουργία συνδέσμων είναι να Μην χρησιμοποιείτε το στοιχείο α.
Αλλαγή μεγέθους του μπλοκ πλοήγησης
Στο Bootstrap 3 και 4, μπορείτε να αλλάξετε το μέγεθος του πλαισίου πλοήγησης χρησιμοποιώντας τις κλάσεις pagination-lg και pagination-sm. Αυτό γίνεται προσθέτοντας μία από αυτές τις κλάσεις στην κλάση σελιδοποίησης.
Η πρώτη κατηγορία (pagination-lg) χρησιμοποιείται όταν χρειάζεται να αυξηθεί το μέγεθος της πλοήγησης και η δεύτερη (pagination-sm) χρησιμοποιείται όταν το μέγεθος της πλοήγησης πρέπει να μειωθεί.
Ευθυγράμμιση μπλοκ πλοήγησης
Στο Bootstrap 3, η ευθυγράμμιση της γραμμής πλοήγησης για σελιδοποίηση γίνεται με τάξεις ευθυγράμμισης κειμένου.
Στο Bootstrap 4, η ευθυγράμμιση της γραμμής πλοήγησης για σελιδοποίηση γίνεται χρησιμοποιώντας τις κλάσεις flex.
Στοιχείο τηλεειδοποίησης (Bootstrap 3)
Το Pager είναι ένα στοιχείο Bootstrap 3 που έχει σχεδιαστεί για να δημιουργεί απλή πλοήγηση μέσω σελίδων ή άλλου περιεχομένου ιστότοπου. Αυτό το στοιχείο αποτελείται από 2 κουμπιά (συνδέσμους).
Μία από τις πιο κοινές χρήσεις αυτής της πλοήγησης είναι να την κάνετε έτσι το πρώτο κουμπί πλοηγήθηκε σε μια νεότερη καταχώρηση στον ιστότοπο και το δεύτερο - σε μια παλαιότερη.
Σύνταξη στοιχείου τηλεειδοποίησης:
Αλλαγή διάταξης κουμπιών
Από προεπιλογή, κουμπιά στοιχείων τηλεειδοποίησης ευθυγραμμισμένο στο κέντρο. Αλλά εκτός από αυτήν την επιλογή, το Bootstrap 3 τους επιτρέπει να ευθυγραμμίζονται σε διαφορετικές άκρες. Αυτό γίνεται προσθέτοντας την κλάση πριν από το πρώτο κουμπί και δίπλα στο δεύτερο. Η προηγούμενη κλάση ευθυγραμμίζει τη σύνδεση προς τα αριστερά και δίπλα στα δεξιά.
Απενεργοποίηση λειτουργίας κουμπιού
Η εναλλαγή ενός κουμπιού σε κατάσταση απενεργοποίησης γίνεται με την προσθήκη της κλάσης απενεργοποιημένης σε αυτό.
Οι ιστότοποι συνήθως περιέχουν πολλές σελίδες. Μπορούν να βρίσκονται σε 3-5 σελίδες, για παράδειγμα, στη σελίδα προορισμού, και ίσως περισσότερες, πολύ περισσότερες.
Κάθε καλός ιστότοπος πρέπει να περιέχει πλοήγηση που θα επιτρέπει στον χρήστη να πλοηγείται σωστά και να μετακινείται μεταξύ των σελίδων του ιστότοπου. Μπορείτε να δημιουργήσετε μια τέτοια σελιδοποίηση χρησιμοποιώντας JavaScript. Σε αυτό το άρθρο, θα μιλήσουμε για το πώς να δημιουργήσετε μια τέτοια πλοήγηση.
Ένα άλλο σημείο, εκτός από την κανονική JavaScript, το παράδειγμα χρησιμοποιεί το Bootstrap 4. Το στοιχείο σελιδοποίησης του bootstrap συνδυάζεται με τη βιβλιοθήκη JQuery, δηλαδή το ειδικό πρόσθετο Buzina Pagination. Σας επιτρέπει να σπάσετε όλες τις πληροφορίες σε πολλές σελίδες με τη δημιουργία πλοήγησης μεταξύ τους.
Σύνδεση των απαραίτητων πλαισίων
Για να εργαστείτε με το Bootstrap και το JQuery, πρέπει να τα συμπεριλάβετε. Αυτό μπορεί να γίνει στο έγγραφό σας HTML χρησιμοποιώντας ετικέτες