Në këtë artikull, ne do të shohim procesin e krijimit të një elementi të tillë të ndërfaqes në internet si një bllok navigimi për faqe. Në bootstrap 3 dhe 4, ky element UI implementohet duke përdorur komponentin Pagination.

Çfarë është faqosja?

Pagination është një faqe e të dhënave. Ata. ky është përfundimi kur të dhënat dalin jo të gjitha menjëherë, por pjesë të vogla (faqe).

Për të lundruar nëpër këto pjesë (faqe), përdoret blloku i navigimit.

Komponenti i Pagination i kornizës Bootstrap ka për qëllim vetëm krijimin e këtij elementi të ndërfaqes, d.m.th. bllok navigimi.

Krijimi i një blloku navigimi për faqe

Në Bootstrap 3, kutia e navigimit ka strukturën e mëposhtme:

Elementi nav në këtë fragment vepron si një enë mbështjellëse. Thisshtë e nevojshme në këtë strukturë vetëm për teknologjitë ndihmëse e perceptoi këtë pjesë të kodit HTML si navigacion.

Përveç kësaj, është e këshillueshme që teknologjitë ndihmëse të shpjegojnë gjithashtu se çfarë lloj blloku navigimi është. Ky veprim kryhet përmes atributit të etiketës aria.

Markimi i bllokut nav për pagëzimin në Bootstrap bëhet me listë me plumba... Çdo lidhje nav në këtë bllok është një e mbështjellë në një li dhe e vendosur në një ul.

Dizajni vizual i kutisë nav në Bootstrap bëhet duke përdorur klasën e faqëzimit, e cila duhet të shtohet në ul.

Struktura e bllokut të navigimit në Bootstrap 4:

Vini re se në Bootstrap 4, ju duhet të shtoni klasa në li dhe një elemente. Li është klasa e artikullit të faqes dhe një është lidhja e faqes. Këto klasa vendosin stilet e CSS për elementet dhe janë të nevojshme për shfaqjen e saktë të bllokut të navigimit.

Përdorimi i ikonave ose ikonave në vend të etiketave të tekstit

Një shembull i një shiriti navigimi në faqosje që përdor ikonat si përmbajtje për disa lidhje:

Ndryshimi i gjendjes së një lidhjeje navigimi

Ndryshimi i gjendjes së lidhjeve në navbar bëhet duke përdorur klasat me aftësi të kufizuara dhe aktive. Klasa e parë (me aftësi të kufizuara) përdoret për të krijuar një lidhje joaktive (pa klikim). Klasa e dytë (aktive) është e nevojshme për të theksuar (treguar) faqja aktuale... Ju duhet të shtoni klasat aktive dhe me aftësi të kufizuara jo në vetë lidhjen, por në elementin li.

Klasa me aftësi të kufizuara përcakton treguesit-ngjarje të deklarimit të lidhjeve CSS: asnjë. Ky njoftim ka për qëllim të çaktivizojë funksionalitetin e lidhjes. Por nuk e çaktivizon lundrimin në tastierë. Prandaj, nëse doni të çaktivizoni plotësisht funksionalitetin e lidhjeve të tilla në projektin tuaj, atëherë duke përdorur JavaScript ju duhet gjithashtu t'i gjurmoni ato dhe t'u shtoni atyre atributin tabindex \u003d "- 1".

Një mënyrë tjetër për të çaktivizuar funksionalitetin e lidhjes është mos përdorni elementin a.

Ndryshimi i madhësisë së kutisë së navigimit

Në Bootstrap 3 dhe 4, ju mund të ndryshoni madhësinë e kutisë së navigimit duke përdorur klasat pagination-lg dhe pagination-sm. Kjo arrihet duke shtuar një nga këto klasa në klasën e faqëzimit.

Klasa e parë (pagination-lg) përdoret kur është e nevojshme të rritet madhësia e navigimit, dhe e dyta (pagination-sm) kur është e nevojshme ta zvogëloni atë.

Rreshtimi i kutisë së navigimit

Në Bootstrap 3, rreshtimi i navbar-it për faqosjen bëhet me klasat për rreshtimin e tekstit.

Në Bootstrap 4, rreshtimi i navbar-it për faqosjen bëhet duke përdorur klasat flex.

Komponenti i Pager-it (Bootstrap 3)

Pager është një komponent Bootstrap 3 që është krijuar për të krijuar lundrim të thjeshtë nëpër faqe ose përmbajtje tjetër të faqes. Ky komponent përbëhet nga 2 butona (lidhje).

Një nga përdorimet më të zakonshme për këtë navigacion është ta bësh atë në mënyrë që butoni i parë drejtohet në një hyrje më të re në sit, dhe i dyti në një të vjetër.

Sintaksa e përbërësit pager:

Ndryshimi i faqosjes së butonit

Si parazgjedhje, butonat pager drejtuar në qendër... Por përveç këtij opsioni, Bootstrap 3 gjithashtu lejon që ata të rreshtohen në skaje të ndryshme. Kjo bëhet duke shtuar klasën e mëparshme te butoni i parë, dhe ngjitur me të dytin. Klasa e mëparshme vendos lidhjen në të majtë, dhe ngjitur me të djathtën.

Çaktivizo funksionalitetin e butonit

Bërja e një butoni me aftësi të kufizuara bëhet duke shtuar klasën me aftësi të kufizuara në të.

C zgjedhja e lirë Pagesa HTML dhe CSS shembuj të kodit: dizenjimi i përgjegjshëm, i thjeshtë, material, pikat e lundrimit, etj Azhurnimi i koleksionit qershor 2018. 5 artikuj të rinj.

Artikuj të ngjashëm

Rreth kodit

Paginimi / faqosja e përgjegjshme në HTML dhe CSS. Ndrysho madhësinë e shfletuesit tuaj për të treguar një efekt interesant.

Të përgjegjshëm: po

Varësitë: bootstrap.css

Rreth kodit

Ndiqni rreshtimin e faqeve

Linja CSS ndjek faqëzimin.

Të përgjegjshëm: po

Varësitë: -

Rreth kodit

Butonat e faqëzimit

Butonat e pastër të pagëzimit CSS.

Shfletuesit e pajtueshëm: Chrome, Firefox, Opera, Safari

Të përgjegjshëm: po

Varësitë: -

Rreth kodit

Pagination Line me Hover

Pagim i pastër i linjës CSS me efekt hover.

Shfletuesit e pajtueshëm: Chrome, Edge, Firefox, Opera, Safari

Të përgjegjshëm: po

Varësitë: -

Rreth kodit

Pagman i Pacman

Animacion i faqosjes me HTML, CSS dhe JS.

Shfletuesit e pajtueshëm: Chrome, Edge, Firefox, Opera, Safari

Të përgjegjshëm: po

Varësitë: -

Rreth kodit

CSS e thjeshtë.

Rreth kodit

I paster Pagesa e CSS Pac-Man me animacion në pezull.

Rreth kodit

Faqe e thjeshtë e përgjegjshme.

Rreth kodit

Pagesa HTML dhe CSS.

Rreth kodit

Shembull faqosjeje që ju lejon të lundroni midis faqeve të ndryshme. Ky shembull do të duhet të ketë atribute href në mënyrë që të punojë me një aplikacion aktual që kërkon faqe.

Rreth kodit

Pagination me vetitë e personalizuara të CSS.

Opsionet dhe modelet e faqëzimit.
Krijuar nga MojoM
25 maj 2017

Demografia GIF: Svg Faqja Hopper

Plesht faqesh HTML, CSS dhe SVG.
Bërë nga Chris Gannon
14 maj 2017

Demografia GIF: Pagination pafund

Faqe e pafund në HTML dhe CSS.
Bërë nga Mariusz Dabrowski
27 Prill 2017

Rreth kodit

Komponentët e CSS:.

12 ide për faqosjen e faqes në internet me HTML dhe CSS.
Bërë nga Rosa
3 nëntor 2016

Demografia GIF: Pagination

Pagination me HTML / CSS / JavaScript.
Bërë nga JP Nothard
9 tetor 2016

GIF Demo: Animacion Pagination Hover

Animacion hover page i HTML dhe CSS.
Bërë nga Elena Nazarova
12 shtator 2016

Pagination me një efekt rri pezull.
Bërë nga Andre Wichert
27 gusht 2016

Treguesit e faqëzimit me HTML, CSS dhe JavaScript.
Bërë nga Moisiu Holmström
19 gusht 2016

Krijuar nga Brendan Mullins
16 gusht 2016

Paginimi i Linjës Magjike të Përgjegjshme

Krijoni një vijë magjike për faqosjen tuaj. Duket e mrekullueshme.
Bërë nga Ryan Yu
18 Shkurt 2015

Eksperimenti i faqosjes së përgjegjshme, i arritshëm, alternativ.
Bërë nga Simon Goellner
11 nëntor 2014

GIF Demo: Shigjeta Pagination

Shigjeta të faqosjes përkulëse.
Bërë nga Hakim El Hattab
18 tetor 2013

Sitet zakonisht përmbajnë disa faqe. Ato mund të përmbajnë deri në 3-5 faqe, për shembull, në një faqe uljeje, ose ndoshta më shumë, shumë më tepër.

Çdo sit i mirë duhet të përmbajë lundrim, i cili do të lejojë përdoruesin të lundrojë dhe të lundrojë drejt midis faqeve të sitit. Ju mund të krijoni një faqe të tillë duke përdorur JavaScript. Në këtë artikull, ne do të flasim për mënyrën e krijimit të një navigimi të tillë.

Edhe një gjë, përveç JavaScript-it të zakonshëm, shembulli përdor Bootstrap 4. Komponenti i saj i faqezimit bootstrap është i kombinuar me bibliotekën JQuery, përkatësisht shtojcën speciale Buzina Pagination. Ju lejon të ndani të gjithë informacionin në disa faqe me krijimin e navigimit midis tyre.

Lidhja e kornizave të kërkuara

Për të punuar me Bootstrap dhe JQuery, duhet t'i lidhni ato. Kjo mund të bëhet në dokumentin tuaj HTML duke përdorur etiketa

Nëse tashmë e keni të aktivizuar jQuery në faqen tuaj dhe po punon me mund dhe kryesor, mund të kaloni me siguri të gjitha gjestet e përshkruara më sipër, gjëja kryesore është të siguroheni që versioni jQuery të mos jetë shumë i dendur. Nga WordPress, nga rruga, kjo është mirë.
Tjetra, ne lidhim shtojcën tonë të kalit të punës jquery.simplePagination.js:

Ju nuk duhet të gardhoheni në kopsht, por thjesht zgjidhni stilin që dëshironi, të lehta, të errëta ose kompakt, dhe ngjisni grupin e rregullave në skedarin .css të shabllonit tuaj. Shkruani stilet tuaja ose përdorni Bootstrap, gjithashtu një mundësi, për sa i përket origjinalitetit dhe zhvillimit të aftësive për ndërtimin e sitit, është edhe më e preferueshme.

Hapi 3. HTML

Për të shfaqur shiritin e faqëzimit në faqet e faqes, ku keni ndërmend ta vendosni, është më logjike dhe më shpesh sesa jo, është në fund të përmbajtjes kryesore, duhet të shkruani sa vijon:
Për një sfond të lehtë:

Tema kompakte:

$ (funksioni () ($ (# dritë-faqe) .pagination ((artikuj: 100, artikujOnPage: 10, cssStyle: "dritë-temë"));));

Në shembullin që unë përdora inicializimin për të paginuar temën e dritës # dritë-faqe, ju mund ta ndryshoni përzgjedhësin në diçka tjetër, për një kompakt është # faqosje kompakte, ose për një stil të errët # errësim të faqeve. Në këtë rast, mos harroni të ndryshoni klasën edhe në funksion. cssStyle.
Kai kam shkruar tashmë më lart, shtojca është shumë fleksibël në cilësimet, opsionet e mëposhtme janë në dispozicion për të ndryshuar:

• sende - Numri i përgjithshëm i elementeve që do të përdoren për llogaritjen e faqeve. Default: 1 .
• artikuj në faqe - Numri i artikujve të shfaqur në secilën faqe. Default: 1 .
• faqet - Opsionale. Nëse specifikohet, artikujt dhe opsionetOnPage nuk merren parasysh. Vendos numrin e faqeve në listë.
• shfaqet Faqet - Sa numra faqe duhet të jenë të dukshëm gjatë lundrimit. Vlera minimale e lejuar: 3 , parazgjedhur: 5 .
• skajet - Sa numra faqe janë të dukshëm në fillim dhe në fund të numërimit. Vlera e paracaktuar: 2 .
• faqja aktuale - Cila faqe do të zgjidhet menjëherë pas lëshimit. Logjikisht, default është: 1 .
• hrefTextPrefix - Vargu i përdorur në atributin HREF shtohet para numrit të faqes. Default: "# faqe-".
• hrefTextSuffix - Vargu i përdorur në atributin HREF futet pas numrit të faqes. Zbraz vargun si parazgjedhje.
• prevTeksti - Teksti i butonit në faqen e mëparshme. Default: "Më parë".
• teksti tjetër - Teksti i butonit për faqen tjetër. Default: "Tjetra"
• cssStyle - Përcaktoni stilin CSS. Default: "Drita-temë"
• zgjidhniOnClick - Përzgjedhja e një faqe pasi të klikoni, si parazgjedhje - e aktivizuar ( e vertete), pse nuk e kuptova pse ta çaktivizoja, por ekziston një mundësi e tillë, vlera: "false".

Ne kemi mbuluar cilësimet më themelore. Ju mund të mësoni në lidhje me funksionet shtesë dhe metodat e disponueshme të përdorimit të kësaj shtojce duke studiuar dokumentacionin direkt në faqen e zhvilluesit.

E tëra çfarë mund të bëj është t'ju uroj fat dhe sukses në punën në projektet tuaja të reja.