Bu yazıda, sayfalandırma için gezinme bloğu olarak böyle bir web arayüzü öğesi oluşturma sürecine bakacağız. Bootstrap 3 ve 4'te bu UI öğesi, Pagination bileşeni kullanılarak uygulanır.

Sayfalandırma nedir?

Sayfalandırma, verilerin sayfalandırılmasıdır. Şunlar. sonuç bu veri çıktığında aynı anda değil, ama küçük parçalar (sayfalar).

Bu bölümlerde (sayfalar) gezinmek için gezinme bloğu kullanılır.

Bootstrap çerçevesinin Sayfalandırma bileşeni yalnızca bu arayüz öğesini, yani gezinme bloğu.

Sayfalandırma için gezinme bloğu oluşturma

Bootstrap 3'te gezinme kutusu aşağıdaki yapıya sahiptir:

Bu kod parçacığındaki nav öğesi bir sarmalama kapsayıcı görevi görür. Bu yapıda sadece yardımcı teknolojiler için gereklidir bu HTML kodunu gezinme olarak algıladı.

Ek olarak, yardımcı teknolojilerin ne tür bir gezinme bloğu olduğunu da açıklığa kavuşturması arzu edilir. Bu eylem, aria-label özniteliği aracılığıyla gerçekleştirilir.

Bootstrap'ta sayfalandırma için nav bloğu işaretlemesi şu şekilde yapılır: maddeli liste... Bu bloktaki her nav bağlantısı bir li'ye sarılmış ve bir ul'ye yerleştirilmiş.

Bootstrap'teki nav kutusunun görsel tasarımı, ul 'ye eklenmesi gereken sayfalama sınıfı kullanılarak yapılır.

Bootstrap 4'teki gezinti bloğu yapısı:

Bootstrap 4'te, li ve a öğelerine sınıflar eklemeniz gerektiğini unutmayın. Li, sayfa öğesi sınıfıdır ve a, sayfa bağlantısıdır. Bu sınıflar tanımlar CSS stilleri Navigasyon bloğunun doğru görüntülenmesi için gerekli ve gereklidir.

Metin etiketleri yerine simge veya simge kullanma

Bazı bağlantıların içeriği olarak simgeleri kullanan sayfalandırma gezinme çubuğuna bir örnek:

Bir gezinme bağlantısının durumunu değiştirme

Gezinme çubuğundaki bağlantıların durumunun değiştirilmesi, engelli ve etkin sınıflar kullanılarak yapılır. Birinci sınıf (devre dışı), etkin olmayan (tıklanamayan) bir bağlantı oluşturmak için kullanılır. İkinci sınıf (aktif) vurgulamak (belirtmek) için gereklidir geçerli sayfa... Etkin ve devre dışı sınıfları bağlantının kendisine değil, li öğesine eklemeniz gerekir.

Devre dışı bırakılan sınıf, CSS bağları bildirim işaretçisi olaylarını ayarlar: yok. Bu duyuru, bağlantının işlevselliğini devre dışı bırakmayı amaçlamaktadır. Ancak klavyeyle gezinmeyi devre dışı bırakmaz. Bu nedenle, projenizdeki bu tür bağlantıların işlevselliğini tamamen devre dışı bırakmak istiyorsanız, ardından JavaScript kullanarak, bunları ek olarak izlemeli ve bunlara tabindex \u003d "- 1" özelliğini eklemelisiniz.

Bağlantı işlevini devre dışı bırakmanın başka bir yolu da a öğesini kullanma.

Gezinme kutusunu yeniden boyutlandırma

Bootstrap 3 ve 4'te, pagination-lg ve pagination-sm sınıflarını kullanarak gezinme kutusunu yeniden boyutlandırabilirsiniz. Bu, bu sınıflardan birini sayfalama sınıfına ekleyerek gerçekleştirilir.

Birinci sınıf (pagination-lg), navigasyonun boyutunu arttırmak gerektiğinde, ikincisi (pagination-sm) ise küçültmek gerektiğinde kullanılır.

Gezinme kutusunu hizalama

Bootstrap 3'te, sayfalandırma için navbar hizalaması şu şekilde yapılır: metin hizalama sınıfları.

Bootstrap 4'te, sayfalandırma için navbar hizalaması flex sınıfları kullanılarak yapılır.

Çağrı Cihazı Bileşeni (Bootstrap 3)

Pager, sayfalar veya diğer site içeriği arasında basit gezinme oluşturmak için tasarlanmış bir Bootstrap 3 bileşenidir. Bu bileşen 2 düğmeden (bağlantılar) oluşur.

Bu navigasyonun en yaygın kullanımlarından biri bunu yapmaktır ilk düğme sitedeki daha yeni bir girişe, ikincisi daha eski bir girişe gitti.

Çağrı cihazı bileşeni sözdizimi:

Düğme düzenini değiştirme

Varsayılan olarak, çağrı cihazı düğmeleri ortaya hizalanmış... Ancak bu seçeneğin yanı sıra, Bootstrap 3 aynı zamanda farklı kenarlara hizalanmalarına da izin verir. Bu, sınıfı birinci düğmenin önüne ve ikincinin yanına ekleyerek yapılır. Önceki sınıf, bağlantıyı sola ve sağın yanına hizalar.

Düğme işlevini devre dışı bırakın

Bir düğmeyi devre dışı bırakmak, devre dışı bırakılmış sınıfı buna ekleyerek yapılır.

Özgür HTML ve CSS sayfalama kod örnekleri: duyarlı, basit, materyal tasarım, gezinme noktaları, vb. Haziran 2018 koleksiyonunun güncellemesi. 5 yeni ürün.

İlgili Makaleler

Kod hakkında

HTML ve CSS'de duyarlı sayfalama / sayfalayıcı. İlginç bir etki göstermek için tarayıcınızı yeniden boyutlandırın.

Duyarlı: evet

Bağımlılıklar: bootstrap.css

Kod hakkında

Satır takip sayfalama

CSS satırı sayfalandırmayı takip eder.

Duyarlı: evet

Bağımlılıklar: -

Kod hakkında

Sayfalandırma düğmeleri

Saf CSS sayfalama düğmeleri.

Uyumlu tarayıcılar: Chrome, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

Kod hakkında

Hover ile Satır Sayfalandırma

Fareyle üzerine gelme efektli saf CSS satır sayfalama.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

Kod hakkında

Pacman sayfalandırma

HTML, CSS ve JS ile sayfalandırma animasyonu.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: -

Kod hakkında

Basit CSS.

Kod hakkında

Saf CSS Pac-Man sayfalama üzerine gelindiğinde animasyon ile.

Kod hakkında

Basit duyarlı sayfalandırma.

Kod hakkında

HTML ve CSS sayfalama.

Kod hakkında

Farklı sayfalar arasında gezinmenizi sağlayan sayfalandırma örneği. Bu örneğin, sayfalama gerektiren gerçek bir uygulamayla çalışabilmesi için href özniteliklerine sahip olması gerekir.

Kod hakkında

CSS özel özellikleriyle sayfalandırma.

Sayfalandırma seçenekleri ve tasarımları.
MojoM tarafından yapılmıştır
25 Mayıs 2017

Demo GIF: SVG Sayfa Hopper

HTML, CSS ve SVG sayfa haznesi.
Chris Gannon tarafından yapılmıştır
14 Mayıs 2017

Demo GIF: Sonsuz Sayfalandırma

HTML ve CSS'de sonsuz sayfalama.
Mariusz Dabrowski tarafından yapılmıştır
27 Nisan 2017

Kod hakkında

CSS Bileşenleri :.

HTML ve CSS ile web sitesi sayfalama için 12 fikir.
Rosa tarafından yapılmıştır
Kasım 3, 2016

Demo GIF: Sayfalandırma

HTML / CSS / JavaScript ile sayfalandırma.
JP Nothard tarafından yapılmıştır
Ekim 9, 2016

Demo GIF: Sayfalandırma Vurgulu Animasyonu

HTML ve CSS sayfalama vurgulu animasyon.
Elena Nazarova tarafından yapılmıştır
Eylül 12, 2016

Fareyle üzerine gelme efektli sayfalandırma.
Andre Wichert tarafından yapılmıştır
Ağustos 27, 2016

HTML, CSS ve JavaScript ile sayfalama göstergeleri.
Moses Holmström tarafından yapılmıştır
Ağustos 19, 2016

Brendan Mullins tarafından yapılmıştır
Ağustos 16, 2016

Duyarlı Magic Line Sayfalandırma

Sayfalandırmanız için sihirli bir çizgi oluşturun. Mükemmel görünüyor.
Ryan Yu tarafından yapılmıştır
Şubat 18, 2015

Duyarlı, erişilebilir, alternatif sayfalama denemesi.
Simon Goellner tarafından yapılmıştır
Kasım 11, 2014

Demo GIF: Sayfalandırma Okları

Sayfalandırma okları esniyor.
Hakim El Hattab tarafından yapılmıştır
Ekim 18, 2013

Siteler genellikle birkaç sayfa içerir. Örneğin bir açılış sayfasında 3-5 sayfa veya belki daha fazlasını içerebilirler.

Her iyi site, kullanıcının sitenin sayfaları arasında doğru bir şekilde gezinmesine ve gezinmesine olanak tanıyan gezinme içermelidir. JavaScript kullanarak böyle bir sayfalandırma oluşturabilirsiniz. Bu yazıda böyle bir navigasyonun nasıl oluşturulacağından bahsedeceğiz.

Normal JavaScript dışında bir şey daha, örnek Bootstrap 4'ü kullanıyor. Önyükleme sayfalama bileşeni JQuery kitaplığı, yani özel Buzina Pagination eklentisi ile birleştirilmiştir. Aralarında gezinme oluşturarak tüm bilgileri birkaç sayfaya bölmenize olanak tanır.

Gerekli çerçeveleri bağlama

Bootstrap ve JQuery ile çalışmak için onları bağlamanız gerekir. Bu senin içinde yapılabilir HTML belgesietiketleri kullanmak

Sitenizde jQuery'yi zaten etkinleştirdiyseniz ve kudret ve ana ile çalışıyorsanız, yukarıda açıklanan tüm hareketleri güvenle atlayabilirsiniz, asıl önemli olan jQuery sürümünün çok yoğun olmadığından emin olmaktır. Bu arada, WordPress'te bu sorun değil.
Daha sonra, beygir eklentimizi bağlarız jquery.simplePagination.js:

Bahçede çit yapmanız gerekmez, ancak istediğiniz stili, açık, koyu veya kompakt seçin ve kural kümesini şablonunuzun stil sayfası .css dosyasına yapıştırın. Kendi stillerinizi yazın veya kullanın Önyüklemeözgünlük ve site kurma becerilerinin geliştirilmesi açısından da bir seçenek daha da tercih edilir.

3. Adım HTML

Sayfalandırma çubuğunu yerleştirmeyi planladığınız sitenin sayfalarında görüntülemek için daha mantıklıdır ve çoğu zaman ana içeriğin altında yazmalısınız:
Hafif bir arka plan için:

Kompakt tema:

$ (function () ($ (# light-pagination) .pagination ((öğeler: 100, itemsOnPage: 10, cssStyle: "açık tema"));));

Açık temayı # açık sayfalandırmak için ilklendirmeyi kullandığım örnekte, seçiciyi başka bir şeye değiştirebilirsiniz, kompakt bir sayfa için # kompakt sayfalandırma veya karanlık bir stil için # karanlık sayfalama. Bu durumda fonksiyondaki sınıfı da değiştirmeyi unutmayınız. cssStyle.
Yukarıda zaten yazdığım Kai, eklenti ayarlarda çok esnektir, aşağıdaki seçenekler değiştirilebilir:

• öğeler - Sayfaları hesaplamak için kullanılacak toplam öğe sayısı. Varsayılan: 1 .
• itemsOnPage - Her sayfada görüntülenen öğe sayısı. Varsayılan: 1 .
• sayfaları - İsteğe bağlı. Belirtilirse, öğeler ve itemsOnPage seçenekleri göz ardı edilir. Listedeki sayfa sayısını ayarlar.
• displayPages - Gezinme sırasında kaç sayfa numarasının görünmesi gerektiği. İzin verilen minimum değer: 3 , varsayılan: 5 .
• kenarlar - Numaralandırmanın başında ve sonunda kaç sayfa numarasının göründüğü. Varsayılan değer: 2 .
• geçerli sayfa - Başladıktan hemen sonra hangi sayfanın seçileceği. Mantıksal olarak varsayılan şudur: 1 .
• hrefTextPrefix - HREF özniteliğinde kullanılan dize, sayfa numarasından önce eklenir. Varsayılan: "# sayfa-".
• hrefTextSuffix - HREF özniteliğinde kullanılan dize, sayfa numarasından sonra eklenir. Varsayılan olarak boş dize.
• prevText - Önceki sayfaya düğme metni. Varsayılan: "Önceki".
• nextText - Sonraki sayfa için düğme metni. Varsayılan: "Sonraki"
• cssStyle - CSS stilini belirleyin. Varsayılan: "Açık tema"
• selectOnClick - Tıkladıktan sonra bir sayfa seçme, varsayılan olarak - etkindir ( doğru), neden devre dışı bırakacağımı anlamadım, ama böyle bir olasılık var, değer: "yanlış".

En temel ayarları ele aldık. Belgeleri doğrudan geliştiricinin sayfasında inceleyerek bu eklentiyi kullanmanın ek işlevleri ve mevcut yöntemleri hakkında bilgi edinebilirsiniz.

Tek yapabileceğim, yeni projelerinizde çalışırken size iyi şanslar ve başarılar dilemek.