[mp_row]
[mp_span col=»12″]
[mp_text]
Boostrap es el famoso framework CSS y JS de twitter que te permite crear páginas web Responsive y nos facilita y agiliza el trabajo a la hora de crear la parte visual de nuestros sitios webs. Alguna de sus ventajas es que ya viene preparado para los navegadores más utilizados, y como hemos comentado es adaptativo para los diferentes dispositivos.
En este post vamos a iniciarnos un poco en su uso, Bootstrap tiene una documentación muy amplia en su página en inglés, y vamos a ver algunos trucos o facilidades que nos ofrece el framework.
La descarga del framework se puede hacer desde su pagina Get Bootstrap. Hay tres tipos de descarga:
1. Paquete básico donde se incluyen las fuentes en los diferentes formatos para los navegadores, los css y los javascript compilados y necesarios.
2. Descargar el código fuente completo con Less, se necesita un compilador de less y alguna configuración.
3. Código fuente con Sass, es el mismo paquete que el anterior pero incluye Sass en lugar de less.
Te recomiendo el primer paquete si tus conocimientos de CSS y HTML5 son muy básicos y si no conoces Less o Sass.
Una vez descargada tu versión, empezamos a trabajar sobre una plantilla básica que puedes encontrar en la página de bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!—Aquí van nuestros propios estilos css--> <!—<link href="css/custom.css" rel="stylesheet>--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Dentro de nuestra etiqueta body añadiremos las etiquetas HTML5 para una generar nuestra estructura:
<body>
<header></header>
<section>
<article></article>
</section>
<footer></footer>
…
</body>
Como vemos en esta plantilla no nos aparece ningún menú de navegación, vamos añadirlo:
– Toggle menú.
Este menú se vera como un elemento de navegación normal en pantallas de PC por ejemplo, y se modificara para dispositivos que tienen un ancho inferior de 768px, para poder activarlo hay que añadir estas líneas de código en la parte del body:
<header>
<nav class="navbar navbar-default" role="navigation">
<!-- El logotipo y el icono que despliega el menú se agrupan
para mostrarlos mejor en los dispositivos móviles -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logotipo</a>
</div>
<!-- Agrupar los enlaces de navegación, los formularios y cualquier
otro elemento que se pueda ocultar al minimizar la barra -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Enlace #1</a></li>
<li><a href="#">Enlace #2</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menú #1 <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">Acción #1</a></li>
<li class="divider"></li>
<li><a href="#">Acción #2</a></li>
<li><a href="#">Acción #3</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
¡Perfecto!
Ahora vamos a hacer el menú Sticky, es decir, que el menú se quede fijo en la parte superior aunque se haga scroll. Este menú es muy interesante si tienes una landing page muy larga o tu sitio web es OnePage y funciona con mucho scroll.
Lo primero que vamos a hacer es crear nuestro propio archivo CSS para poder modificar los estilos a nuestro gusto, en este caso lo llamaremos custom.css e irá dentro del directorio CSS que viene con Bootstrap, lo enlazaremos a nuestra página añadiendo la siguiente línea en él:
<link href="css/custom.css" rel="stylesheet">
En nuestro custom. css añadiremos las siguientes líneas:
.goToTop {
position: fixed;
top: 0;
height: auto;
z-index: 1;
width: 100%
}
Y en la parte posterior del body antes de la etiqueta de cierre hay que añadir:
…
<script type="text/javascript">
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = 300; /* puedes personalizar cuando quieres que aparezca tu sticky menú*/
($(window).scrollTop() > navHeight) ? $('nav').addClass('goToTop') : $('nav').removeClass('goToTop');
});
});
</script>
</body>
Como puedes ver en la línea “var navHeight = 300;” puedes personalizar la aparición del menú.
Para poder comprobar que todo funciona añadiremos texto de relleno y así poder hacer scroll.
Hasta aquí hemos creado una página principal con menú adaptativo para móviles y que se queda fijo en la parte de arriba de nuestra página.
En la siguiente entrada del blog veremos como crear diferentes tipos de columnas, incluso columnas que no vienen ya definidas por Bootstrap como las de 5 y 7.
Fuentes:
– Librosweb.es
– http://getbootstrap.com/
– http://www.jqueryscript.net/menu/Sticky-Navigation-Bar-with-jQuery-Bootstrap.html
[/mp_text]
[/mp_span]
[/mp_row]
Esto es ¡increíble! No he leído algo como esto en mucho tiempo . Maravilloso hallar a alguien con algunas ideas originales sobre este tema. Este sitio web es algo que se necesita en la blogoesfera , alguien con un poco de originalidad. Un trabajo útil para traer algo nuevo a Internet. Gracias de todos lo que te leemos.