Bootstrap Menu en STRATO


  • ¿Qué es un menú Bootstrap?
  • ¿Cómo nos ayuda con el diseño web?

¿Qué un Bootstrap?

Bootstrap es un framework frontend originalmente creado por Twitter. Este framework permite crear de manera sencilla interfaces web en HTML, CSS y Javascript que se adaptan al tamaño de las pantallas de un PC, una tablet o un smartphone. Esta técnica de diseño y desarrollo se conoce como diseño responsive o diseño adaptativo.

El diseño web responsive es una de las mejores prácticas de diseño web hoy en día. La usabilidad móvil mejora la experiencia de los usuarios y con ello, también el posicionamiento de una página en los rankings de los motores de búsqueda.

Ventajas de usar Bootstrap

Cómo hacer un menú Bootstrap – Un ejemplo

Bootstrap permite crear barras de navegación fácilmente por medio de las clases y componentes que trae por defecto este framework. Estas barras de menú responsive se adaptan a cualquier dispositivo con menús despegables, con cajas de búsqueda y otras funcionalidades.

Por ejemplo, si queremos crear una barra simple de navegación para una página web este sería el código:

<nav role="navigation" class="navbar navbar-default">

<div class="navbar-header">

<button type="button" data-target="#navbarCollapse" data-toggle="collapse" <="" p="">>

<class="navbar-toggle">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a href="#" class="navbar-brand">Logotipo>/a>

</div>

<div id="navbarCollapse" class="collapse navbar-collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Inicio</a></li>

<li><a href="#">Sobre nosotros</a></li>

<li><a href="#">Nuestro blog</a></li>

<li><a href="#">Datos de contacto</a></li>

</ul>

</div>

</nav>

Diferentes tipos de menús Bootstrap

Bootstrap dropdown menú

Bootstrap dropdown menú es un menú que se despliega para mostrar más elementos (Bootstrap dropdown menú). Para conseguirlo, solamente se tiene que agregar el elemento .dropdown y las clases básicas (ver ejemplo) de Bootstrap para dar la funcionalidad.

Barra de navegación fija en la parte superior con Bootstrap (Fixed Navbar)

Con Bootstrap también se puede crear una barra de navegación que permanezca fija en la parte superior de la ventana, y aunque el usuario haga scroll verticalmente, la barra siempre será visible.

Se hace añadiendo la clase .navbar-fixed-top en la etiqueta <nav> junto a las clases .navbar y .navbar-default

Barra de navegación inferior (Fixed Navbar) con Bootstrap

Para crear una barra de navegación que se quede fija en la parte inferior añadimos la clase .navbar-fixed-bottom.

Bootstrap Navbar con colores invertidos

Para cambiar la apariencia del menú Bootstrap, se agrega la clase .navbar-inverse para invertir los colores de la barra de navegación.

Bootstrap WordPress – Plugins

Easy Bootstrap Shortcode

Entre los WordPress Bootstrap plugins, uno de los más conocidos es Easy Bootstrap Shortcode, compatible con Bootstrap 3.2.0. Este plugin añade botones al editor de WordPress (tinyMCE Shortcode Buttons) con los que podrás añadir el “estilo Bootstrap” a tu web, haciendo clic en el icono del editor tinyMCE.

Bootstrap Shortcodes for WordPress

Bootstrap Shortcodes for WordPress proporciona una colección de shortcodes para que puedas usarlos con una plantilla que incluya Bootstrap 3. El plugin crea un botón en el editor (al lado de “add media”) que muestra los shortcodes y ejemplos prácticos como referencia.

WP Bootstrap Menu

Este plugin convierte tu menú de navegación de WordPress en un menú Bootstrap.

Descubre cómo crear una página web responsive integrando menús Bootstrap con el alojamiento web para WordPress de STRATO.