Barra de navegación de Bootstrap sin JavaScript

Bootstrap se distribuye con un archivo JavaScript llamado bootstrap.js que requiere jQuery. Este archivo permite, entre otras cosas, hacer funcionar la barra de navegación cuando hay menús desplegables, y desplegar y ocultar los enlaces de navegación, que se encuentran ocultos en pantallas con baja resolución.

El problema es que Bootstrap no ofrece la misma funcionalidad básica sin JavaScript. Es decir, si no tienes JavaScript activado, no puedes acceder a los menús desplegables ni ocultar y mostrar el menú de navegación en dispositivos móviles o con baja resolución. Sin embargo, es posible ofrecer esta funcionalidad sin JavaScript. En este artículo os muestro cómo hacerlo.

Continúa leyendo Barra de navegación de Bootstrap sin JavaScript

Estructura de árbol con CSS y HTML

A veces viene bien poder representar datos en una estructura de árbol como la que produce el programa tree. El programa tree produce una salida de un árbol de directorios como esta:


✔ /var/www/html/Repos/Freak-Spot/freak-theme [master|✔] $ tree
.
├── static
│   ├── css
│   │   └── style.css
│   ├── genericons
│   │   ├── COPYING.txt
│   │   ├── genericons.css
│   │   ├── Genericons.eot
│   │   ├── Genericons.svg
│   │   ├── Genericons.ttf
│   │   ├── Genericons.woff
│   │   ├── LICENSE.txt
│   │   └── README.md
│   ├── images
│   │   ├── creativecommons_public-domain_80x15.png
│   │   ├── gnu-head-mini.png
│   │   └── questioncopyright-favicon.png
│   └── js
│       ├── functions.js
│       └── jquery-3.1.1.js
└── templates
    ├── archives.html
    ├── article.html
    ├── article_info.html
    ├── author.html
    ├── authors.html
    ├── base.html
    ├── category.html
    ├── index.html
    ├── page.html
    ├── pagination.html
    ├── period_archives.html
    ├── tag.html
    ├── taglist.html
    └── tags.html

6 directories, 28 files

Para representar la instrucción tal como aparece en una terminal he utilizado las etiquetas HTML <samp> y <pre> (<pre><samp>salida de tree</samp></pre>). ¿Pero que pasa si quiero incluir un enlace o utilizar otros elementos de HTML, o CSS? Entonces tendremos que usar CSS para mostrar la apariencia de ramas.

Continúa leyendo Estructura de árbol con CSS y HTML

Recarga las páginas web automáticamente cuando las modificas

A la hora de desarrollar páginas web, muchas veces necesitamos probar los cambios que hemos realizado. Para ello tenemos que abrir la página web con el navegador y recargarla si ya estaba abierta. Pero esto es algo molesto si lo tenemos que hacer muchas veces.

Continúa leyendo Recarga las páginas web automáticamente cuando las modificas