{"id":2292,"date":"2019-08-07T19:40:55","date_gmt":"2019-08-08T00:40:55","guid":{"rendered":"http:\/\/linuxitos.com\/main\/?p=2292"},"modified":"2019-08-07T20:31:18","modified_gmt":"2019-08-08T01:31:18","slug":"personalizar-pagination-bootstrap-4-3-1","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/personalizar-pagination-bootstrap-4-3-1\/","title":{"rendered":"Personalizar pagination bootstrap 4.3.1"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"470\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/pagination.png\" alt=\"\" class=\"wp-image-2293\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/pagination.png 800w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/pagination-300x176.png 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/pagination-768x451.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption>Imagen 1<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">En \u00e9ste sitio web, utilizo el framework <a href=\"https:\/\/getbootstrap.com\">bootstrap 4.3.1<\/a> para los estilos, columnas, etc. Y algunas secciones pues es necesario adaptarlas y personalizarlas, tal es el caso de la paginaci\u00f3n del mismo, el cual es utilizando ajax.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si alguno quiere utilizarlo, aqu\u00ed les dejo los estilos. Pueden modificarlos a su entera disposici\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"665\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/Peek-2019-08-07-19-01-1024x665.gif\" alt=\"\" class=\"wp-image-2294\" srcset=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/Peek-2019-08-07-19-01-1024x665.gif 1024w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/Peek-2019-08-07-19-01-300x195.gif 300w, https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2019\/08\/Peek-2019-08-07-19-01-768x499.gif 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed el css, lo a\u00f1aden en sus archivos de estilos que utilicen en su sitio a desarrollar<\/p>\n\n\n\n<pre style=\"background: rgb(54, 63, 72); border-radius: 6px; border: 0px; box-sizing: border-box; color: white; font-family: menlo, monaco, monospace; font-style: inherit; font-weight: inherit; line-height: 15.68px; margin-bottom: 1.1em; max-width: 100%; outline: 0px; overflow: auto; padding: 13.125px 16.4062px; vertical-align: baseline; white-space: pre-wrap; word-wrap: break-word;\">.pagination {\n\tmargin-top: 30px;\n\tborder-top: 3px solid #ddd;\n\ttext-align: center;\n\tposition: relative;\n\tcolor: #777;\n\tlist-style: none;\n\tborder-radius: 0rem;\n}\n\n.page-link {\n\tdisplay: inline-block;\n\tborder: 0px;\n\tborder-top: 0px solid #ddd;\n\tpadding: 15px 15px 15px;\n\tfont-size: 1.25rem;\n\tfont-weight: 900;\n\ttext-transform: uppercase;\n\tletter-spacing: 1px;\n\tcolor: #777;\n\tbackground-color: #fff;\n}\n\n.page-link:hover {\n\tmargin-top: -3px;\n\tborder-top: 3px solid;\n\tborder-top-color: #0093C2; \n\tcolor: #0093C2;\n}\n\n.page-link:focus {\n\tmargin-top: -3px;\n\tz-index: 2;\n\toutline: 0;\n\tcolor: #444;\n\tborder-top-color: #444; \n}\n\n.page-item:first-child .page-link {\n\tmargin-left: 0;\n\tborder-top-left-radius: 0rem;\n\tborder-bottom-left-radius: 0rem\n\tcolor: #444;\n\tmargin-top: -3px;\n\tborder-top: 3px solid #ddd;\n}\n\n.page-item:last-child .page-link {\n\tborder-top-right-radius: 0rem;\n\tborder-bottom-right-radius: 0rem;\n\tcolor: #444;\n\tborder-top-color: #444;\n\tborder-top: 3px solid #ddd;\n\tpadding: 15px 10px 10px;\n\tmargin-top: -3px;\n}\n\n.page-item.active .page-link {\n\tz-index: 1;\n\tbackground-color: #fff;\n\tmargin-top: -3px;\n\tborder-top: 3px solid #444;\n\tcolor: #444;\n\tborder-top-color: #444; \n}\n\n.page-item.disabled .page-link {\n\tcolor: #6c757d;\n\tpointer-events: none;\n\tcursor: auto;\n\tbackground-color: #fff;\n\tborder-color: #dee2e6\n\tdisplay: inline-block;\n\tmargin-top: -2px; \n}\n\n.pagination-lg .page-link {\n\tpadding: .75rem 1.5rem;\n\tfont-size: 1.25rem;\n\tline-height: 1.5\n}\n\n.pagination-lg .page-item:first-child .page-link {\n\tborder-top-left-radius: .3rem;\n\tborder-bottom-left-radius: .3rem\n}\n\n.pagination-lg .page-item:last-child .page-link {\n\tborder-top-right-radius: .3rem;\n\tborder-bottom-right-radius: .3rem\n}\n\n.pagination-sm .page-link {\n\tpadding: .25rem .5rem;\n\tfont-size: .875rem;\n\tline-height: 1.5\n}\n\n.pagination-sm .page-item:first-child .page-link {\n\tborder-top-left-radius: .2rem;\n\tborder-bottom-left-radius: .2rem\n}\n\n.pagination-sm .page-item:last-child .page-link {\n\tborder-top-right-radius: .2rem;\n\tborder-bottom-right-radius: .2rem\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Y eso ser\u00eda todo, gracias por visitar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En \u00e9ste sitio web, utilizo el framework bootstrap 4.3.1 para los estilos, columnas, etc. Y algunas secciones pues es necesario adaptarlas y personalizarlas, tal es el caso de la paginaci\u00f3n del mismo, el cual es utilizando ajax. Si alguno quiere utilizarlo, aqu\u00ed les dejo los estilos. Pueden modificarlos a su entera disposici\u00f3n. Aqu\u00ed el css, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1540],"tags":[1634,1633,1631,1632],"class_list":["post-2292","post","type-post","status-publish","format-standard","hentry","category-develepmet","tag-bootstrap","tag-codeigniter","tag-css3","tag-html5"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/2292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/comments?post=2292"}],"version-history":[{"count":2,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/2292\/revisions"}],"predecessor-version":[{"id":2297,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/2292\/revisions\/2297"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=2292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=2292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=2292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}