{"id":2991,"date":"2021-01-23T11:51:31","date_gmt":"2021-01-23T17:51:31","guid":{"rendered":"http:\/\/linuxitos.com\/main\/?p=2991"},"modified":"2021-01-23T12:05:12","modified_gmt":"2021-01-23T18:05:12","slug":"desglose-con-chevron-y-bootstrap-5","status":"publish","type":"post","link":"https:\/\/linuxitos.com\/main\/desglose-con-chevron-y-bootstrap-5\/","title":{"rendered":"Desglose con chevron y bootstrap 5"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/01\/Peek-2021-01-22-21-28.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"984\" height=\"604\" src=\"https:\/\/linuxitos.com\/main\/wp-content\/uploads\/2021\/01\/Peek-2021-01-22-21-28.gif\" alt=\"\" class=\"wp-image-2992\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Introducci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9sta funcionalidad es muy utilizada al mostrar una flechita que gira al realizar desglose o collapse de un div, o contenido de algo. Tal como se ve en el gif de arriba. \u00c9ste efecto es simplemente animaci\u00f3n, que hace que el sitio web se vea m\u00e1s trabajado, no es necesario hacerlo, eso es un hecho, sin embargo, indica si el contenido est\u00e1  desglosado o contra\u00eddo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para lograr \u00e9ste efecto, en ocasiones se usa con css puro, y en otras con funcionalidad de jquery.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En \u00e9sta implementaci\u00f3n lo haremos simplemente con css, y previamente incluido bootstrap 5, dar\u00e9 por hecho, de que ya usan bootstrap, espec\u00edficamente la versi\u00f3n 5. Puede funcionar tambi\u00e9n para bootstrap 4, la \u00fanica diferencia, ser\u00eda que se cambie data-bs-toogle, por data-toggle que fueron las actualizaciones de bs4 a bs5.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Requerimientos<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Bootstrap 5<\/li><li>CSS<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En los css se utilizaron botones para realizar el desglose, sin es necesario, lo pueden cambiar para otra etiqueta, a, p o la que requieran, lo que no debe cambiar, son las propiedades en s\u00ed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">\/*.bd-links .btn, .bd-links .btn:hover, .bd-links .btn:focus, .bd-links .btn:active{\n     outline: none !important;\n     border: 0px solid none !important;\n     box-shadow: none !important;\n     border-color: none !important;\n }*\/\n .bd-links .btn::before {\n     width: 1.25em;\n     line-height: 0;\n     content: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'\/%3e%3c\/svg%3e\");\n     transition: transform 0.35s ease;\n     transform-origin: 0.5em 50%;\n }\n .bd-links .btn[aria-expanded=\"true\"] {\n     color: rgba(0, 0, 0, 0.85);\n }\n .bd-links .btn[aria-expanded=\"true\"]::before {\n     transform: rotate(90deg);\n }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">HTML<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\"><code>&lt;nav class=\"bd-links\" id=\"bd-docs-nav\" aria-label=\"Docs navigation\"><\/code>\n      <code>&lt;ul class=\"list-unstyled mb-0 py-3 pt-md-1\"><\/code>\n             <code>&lt;li class=\"mb-1 active\"><\/code>\n                 <code>&lt;button class=\"btn d-inline-flex align-items-center rounded collapsed\" data-bs-toggle=\"collapse\" data-bs-target=\"#getting-started-collapse\" aria-expanded=\"false\" aria-current=\"true\">Getting started&lt;\/button><\/code>\n                 <code>&lt;div class=\"collapse\" id=\"getting-started-collapse\"><\/code>\n                      <code>&lt;ul class=\"list-unstyled fw-normal pb-1 small mx-5\"><\/code>\n                          <code>&lt;li>Hola&lt;\/li><\/code>\n                          <code>&lt;li>Hola&lt;\/li><\/code>\n                          <code>&lt;li>Hola&lt;\/li><\/code>\n                          <code>&lt;li>Hola&lt;\/li><\/code>\n                          <code>&lt;li>Hola&lt;\/li><\/code>\n                          <code>&lt;li>Hola&lt;\/li><\/code>\n                      <code>&lt;\/ul><\/code>\n                  <code>&lt;\/div><\/code>\n             <code>&lt;\/li><\/code>\n             <code>&lt;li class=\"mb-1\"><\/code>\n                 <code>&lt;button class=\"btn d-inline-flex align-items-center rounded collapsed\" data-bs-toggle=\"collapse\" data-bs-target=\"#customize-collapse\" aria-expanded=\"false\">Customize&lt;\/button><\/code>\n                 <code>&lt;div class=\"collapse\" id=\"customize-collapse\"><\/code>\n                     <code>&lt;ul class=\"list-unstyled fw-normal pb-1 small mx-5\"><\/code>\n                         <code>&lt;li>Hola&lt;\/li><\/code>\n                         <code>&lt;li>Hola&lt;\/li><\/code>\n                         <code>&lt;li>Hola&lt;\/li><\/code>\n                         <code>&lt;li>Hola&lt;\/li><\/code>\n                         <code>&lt;li>Hola&lt;\/li><\/code>\n                         <code>&lt;li>Hola&lt;\/li><\/code>\n                      <code>&lt;\/ul><\/code>\n                   <code>&lt;\/div><\/code>\n            <code>&lt;\/li><\/code>\n      <code>&lt;\/ul><\/code>\n<code>&lt;\/nav><\/code><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introducci\u00f3n \u00c9sta funcionalidad es muy utilizada al mostrar una flechita que gira al realizar desglose o collapse de un div, o contenido de algo. Tal como se ve en el gif de arriba. \u00c9ste efecto es simplemente animaci\u00f3n, que hace que el sitio web se vea m\u00e1s trabajado, no es necesario hacerlo, eso es un [&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,1722,1724,1721,1723,1587],"class_list":["post-2991","post","type-post","status-publish","format-standard","hentry","category-develepmet","tag-bootstrap","tag-chevron","tag-collapse","tag-csss","tag-desglose","tag-xampp"],"_links":{"self":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/2991","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=2991"}],"version-history":[{"count":10,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/2991\/revisions"}],"predecessor-version":[{"id":3007,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/posts\/2991\/revisions\/3007"}],"wp:attachment":[{"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/media?parent=2991"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/categories?post=2991"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxitos.com\/main\/wp-json\/wp\/v2\/tags?post=2991"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}