Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
El diseño web es una profesión en evolución. Si bien siempre será importante tener buen ojo para el color, la tipografía y el diseño, estas habilidades están siendo superadas por la necesidad de comprender las motivaciones del usuario. No basta con construir un sitio y esperar a que el tráfico fluya. Los sitios deben ayudar a los usuarios a lograr sus objetivos, con un mínimo de fricción cognitiva. Bootstrap puede ayudar a los profesionales de la web a definir estos objetivos y también a crear una experiencia increíble.
No estamos haciendo páginas, estamos haciendo películas.
Me gusta decir que no estamos haciendo páginas, estamos haciendo películas. Los usuarios esperan que los sitios se carguen rápidamente, brinden contenido atractivo e interactividad inteligente. Al igual que las películas dependen de los cortes rápidos, la iluminación y el estado de ánimo para atraer a los usuarios, los sitios web dependen de las transiciones, la interactividad y el tiempo. Estos detalles a menudo se pierden durante la fase de diseño o, lo que es peor, nunca se tienen en cuenta. Si bien una transición que toma 0.5 segundos cuando debería durar 0.25 segundos generalmente no hundirá una aplicación, es este nivel de detalle lo que separa lo bueno de lo genial.
Le mostraré cómo Bootstrap puede reemplazar los wireframes estáticos y traer estos detalles a la vanguardia antes y con menos esfuerzo.
Paso 1: Proyecto de instalación
El primer paso es descargar las últimas versiones estables de Bootstrap y jQuery.
Aunque jQuery está alojado en varios CDN, prefiero incluir todos los archivos localmente para que pueda trabajar con o sin acceso a la web. Continúe y configure una estructura de directorios como la que se muestra a continuación, y copie los archivos Bootstrap CSS, Bootstrap Responsive CSS y Javascript que no están minificados. Modifique los nombres y las ubicaciones según sea necesario, pero el uso de esta estructura significa que también puede aprovechar mi plantilla HTML en el siguiente paso.
Ahora sería un buen momento para crear una tercera hoja de estilo, a la que llamaré user.css. Este archivo se utilizará para anular los estilos de Bootstrap según sea necesario.
Paso 2: crear index.html y verificar rutas
Esta es la única otra configuración necesaria para comenzar a construir un alámbrico interactivo. Cree un archivo en la raíz del directorio de su proyecto y asígnele el nombre index.html. Después de haber creado el archivo, copie este código y guárdelo.
1 |
<!DOCTYPE> |
2 |
<html lang="en"> |
3 |
<head>
|
4 |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
5 |
|
6 |
<title>Interactive Bootstrap Wireframes</title> |
7 |
|
8 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
9 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
10 |
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="master" charset="utf-8"> |
11 |
</head>
|
12 |
|
13 |
<body>
|
14 |
<div class="container"> |
15 |
Your layout will go here. |
16 |
</div>
|
17 |
|
18 |
<script src="js/vendor/jquery-1.8.2.min.js" type="text/javascript"></script> |
19 |
<script src="js/bootstrap/bootstrap.js" type="text/javascript"></script> |
20 |
</body>
|
21 |
</html>
|
Abra un navegador web y arrastre el archivo index.html guardado en él. Si todos los incluidos están correctamente cargados, debería ver algo similar a la captura de pantalla a continuación. Si no ve el cuadro de alerta, abra la consola o el inspector web y vea si no se ha podido cargar un archivo. Después de la solución de problemas, elimine o comente la línea de alerta en la función $(document).ready en la parte inferior de la página y prepárese para construir los esquemas de conexiones de Bootstrap.
Paso 3: Áspero en tus bloques de contenido
Con todos los archivos necesarios en su lugar, podemos comenzar a desglosar los principales bloques de contenido. La mayoría de los sitios (aplicaciones) contendrán un encabezado, navegación principal, pozo de contenido principal, barra lateral y pie de página. Estoy manteniendo deliberadamente el diseño simple, para ilustrar rápidamente el poder del sistema de rejilla de Bootstrap.
El único marcado estructural en la página hasta ahora es nuestro div con clase "contenedor".
Nota: Este div es un bloque de contención requerido para Bootstrap; Construiremos toda nuestra aplicación de alambre dentro de ella.
Bootstrap también requiere el nuevo tipo de documento HTML y genera sus reglas de estilo con clases, en lugar de nombres de etiquetas. Estas decisiones significan que podemos usar algunos elementos HTML5 nuevos: encabezado, navegación, sección, artículo, apartado y pie de página. Vale la pena mencionar si planea probar su diseño en Internet Explorer, deberá descargar e incluir Modernizr o HTML5 Shim. Las versiones modernas de Firefox, Chrome y Safari admiten de forma nativa el estándar HTML5.
Bootstrap está construido sobre una cuadrícula de 12 columnas. Utiliza dos clases, row y span para crear contenedores a nivel de bloque. Al aplicar la clase de fila a un contenedor como un div o encabezado, se extiende automáticamente a lo largo de todo el ancho de 940px. Al agregar contenedores con la clase spanN (N es un marcador de posición para el número de columnas), puede crear fácilmente pozos de contenido, barras laterales y otros bloques de diseño sin tener que administrar flotantes u otras peculiaridades.
Para comenzar a trabajar rápidamente, construiré un encabezado básico, una barra de navegación, un pozo principal, un lado y un pie de página. Reemplace "Su diseño irá aquí" con el siguiente código.
1 |
<header class="row"> |
2 |
<h1 id="banner">My Awesome App</h1> |
3 |
</header>
|
4 |
|
5 |
<nav id="primary-navigation" class="row"> |
6 |
<div class="span12"> |
7 |
<ul>
|
8 |
<li class="selected"><a href="#">Home</a></li> |
9 |
<li><a href="#">Features</a></li> |
10 |
<li><a href="#">About</a></li> |
11 |
<li><a href="#">Contact Us</a></li> |
12 |
</ul>
|
13 |
</div>
|
14 |
</nav>
|
15 |
|
16 |
<section class="row"> |
17 |
<article class="span9"> |
18 |
<h2>This is the main content well</h2> |
19 |
<p>This is a short paragraph to highlight where the general content will go.</p> |
20 |
</article>
|
21 |
|
22 |
<aside class="span3"> |
23 |
<h3>This is the sidebar</h3> |
24 |
<p>Good content items include blogrolls, featured news, Twitter updates, etc.</p> |
25 |
</aside>
|
26 |
</section>
|
27 |
|
28 |
<footer class="row"> |
29 |
<div class="span12"> |
30 |
<h4>This is the footer</h4> |
31 |
</div>
|
32 |
</footer>
|
También agregué algunas reglas básicas a user.css, para que los bloques de contenido sean más fáciles de identificar. Si todo ha ido bien, debería ver una serie de bloques grises con texto descriptivo negro en su interior.
1 |
/* Basic style rule to outline and space block-level elements */
|
2 |
[class*="span"] { |
3 |
background: #eee; |
4 |
margin-bottom: 10px; |
5 |
}
|
Paso 4: Fijo, fluido, sensible!
Diseños fijos y fluidos han existido durante mucho tiempo. Los diseños receptivos son relativamente nuevos y combinan las mejores partes de ambos. Brinda a los diseñadores herramientas para optimizar sus diseños para múltiples tamaños de dispositivos (teléfonos inteligentes, tabletas, pantallas estrechas y de pantalla ancha) sin tener que mantener una base de código separada para cada uno. Cambie el tamaño de la ventana del navegador para ver la hoja de estilos receptiva de Bootstrap en acción, y sienta la asombrosa capacidad de escribir una vez y probar los esquemas de conexión en varios entornos.
Los navegadores utilizan los puntos de interrupción de CSS para decidir cómo representar una página, en función de las medidas de ancho mínimo y máximo. Los puntos de ruptura en relación con el ancho del navegador siempre comienzan con @media (width argument) y son muy fáciles de leer. También pueden contener un segundo argumento en otro conjunto de paréntesis, lo que permite una gran flexibilidad para múltiples dispositivos.
En el ejemplo de código que aparece a continuación, he creado varias reglas que definen los colores de fondo para cuatro puntos de ruptura receptivos comunes de Bootstrap, modificados ligeramente para mostrar una transición suave de un color al siguiente.
1 |
/* Basic background colors for responsive break points */
|
2 |
/* Max-width 480px landscape phone and down */
|
3 |
@media (max-width: 480px) { |
4 |
.container { |
5 |
background: #f1ea81; |
6 |
}
|
7 |
|
8 |
.container:after { |
9 |
content: "Max-width 480px landscape phone and down"; |
10 |
}
|
11 |
}
|
12 |
|
13 |
/* Min-width 481px and max-width 767px landscape phone to portrait tablet */
|
14 |
@media (min-width: 481px) and (max-width: 767px) { |
15 |
.container { |
16 |
background: #a7f7e5; |
17 |
}
|
18 |
|
19 |
.container:after { |
20 |
content: "Min-width 481px and max-width 767px landscape phone to portrait tablet"; |
21 |
}
|
22 |
}
|
23 |
|
24 |
/* Min-width 768px and max-width 979px portrait tablet to landscape */
|
25 |
@media (min-width: 768px) and (max-width: 979px) { |
26 |
.container { |
27 |
background: #c4deff; |
28 |
}
|
29 |
|
30 |
.container:after { |
31 |
content: "Min-width 768px and max-width 979px, portrait tablet to landscape"; |
32 |
}
|
33 |
}
|
34 |
|
35 |
/* Min-width 980px widescreen display */
|
36 |
@media (min-width: 980px) and (max-width: 1199px) { |
37 |
.container { |
38 |
background: #fde3ff; |
39 |
}
|
40 |
|
41 |
.container:after { |
42 |
content: "Min-width 980px, max-width 1199px, desktop format"; |
43 |
}
|
44 |
}
|
45 |
|
46 |
/* Min-width 1200px widescreen display */
|
47 |
@media (min-width: 1200px) { |
48 |
.container { |
49 |
background: #ffc4c4; |
50 |
}
|
51 |
|
52 |
.container:after { |
53 |
content: "Min-width 1200px, widescreen format"; |
54 |
}
|
55 |
}
|
Hemos construido un diseño totalmente sensible, pero aún nos faltan las cosas buenas. El resto de este tutorial le mostrará cómo agregar interés visual a través del contenido y la interactividad.
Paso 5: ¡Apaga el sonido!
Ahora que el andamiaje está en su lugar, podemos comenzar a agregar contenido. Estoy manteniendo deliberadamente estas vistas genéricas: las cajas grises con estilos mínimos alientan a los usuarios beta a enfocarse de lleno en la interacción, y no quedar demasiado obsesionados con el estilo visual.
La Unidad del Héroe está diseñada para crear una llamada a la acción frontal y central. Las descargas de códigos, las nuevas aplicaciones o las noticias de última hora son buenos candidatos. Para nuestros propósitos, lo usaré para anunciar una importante actualización de software. Reemplaza las etiquetas h2 y p existentes en el contenido principal y el código a continuación y actualiza tu navegador para ver al héroe en acción.
1 |
<div class="hero-unit"> |
2 |
<hgroup>
|
3 |
<h1>Version 2.0 Is Here!</h1> |
4 |
<h2>All new features, lots of improvements</h2> |
5 |
</hgroup>
|
6 |
|
7 |
<h4>A more perfect package you’re not likely to find</h4> |
8 |
<p>Our team has been busy this past year, completely revamping the inner workings of our
|
9 |
application. Faster page loads, better search, and mobile integration.</p>
|
10 |
<p><a href="#" class="btn btn-primary btn-large">Download Now</a></p> |
11 |
</div>
|
La unidad de héroe es un buen comienzo, pero la gente quiere ver a dónde irán su tiempo y su dinero. Una galería de imágenes es un seguimiento sólido y es fácil de implementar. Las imágenes se distribuyen utilizando la misma cuadrícula spanN que define los bloques de diseño, y se pueden ampliar fácilmente para incluir titulares, etiquetas, títulos o microdatos. Por ahora, usaremos Placehold.it para generar tres cajas grises debajo de nuestra unidad de héroe.
Soy un gran creyente en el marcado semántico, así que usaremos las etiquetas figure y figcaption de HTML5 para un mayor contexto. Incluso si ninguno de sus usuarios está navegando con un lector de pantalla u otro dispositivo de asistencia, el marcado descriptivo es la mejor práctica para UX y el desarrollo de aplicaciones para usuario.
Agregue una lista desordenada y algunas imágenes dentro del contenido principal, debajo de su elemento héroe así:
1 |
<ul class="thumbnails"> |
2 |
<li class="span3"> |
3 |
<figure>
|
4 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
5 |
<figcaption>
|
6 |
<h5>Image 1 title</h5> |
7 |
<p>This is a short caption.</p> |
8 |
</figcaption>
|
9 |
</figure>
|
10 |
</li>
|
11 |
|
12 |
<li class="span3"> |
13 |
<figure>
|
14 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
15 |
<figcaption>
|
16 |
<h5>Image 2 title</h5> |
17 |
<p>This is a short caption.</p> |
18 |
</figcaption>
|
19 |
</figure>
|
20 |
</li>
|
21 |
|
22 |
<li class="span3"> |
23 |
<figure>
|
24 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
25 |
<figcaption>
|
26 |
<h5>Image 3 title</h5> |
27 |
<p>This is a short caption.</p> |
28 |
</figcaption>
|
29 |
</figure>
|
30 |
</li>
|
31 |
</ul>
|
Otra actualización del navegador debe producir un diseño similar a este, cuando se ve en pantalla panorámica.
Paso 6: Navegación por pestañas
La unidad de héroe y las imágenes agregan un gran interés visual, pero destacan nuestro próximo desafío: los enlaces de puntos de bala que representan un elemento de navegación adecuado.
Bootstrap tiene varios estilos de navegación incorporados, por lo que se recomienda la experimentación. Voy a resaltar la navegación tabulada aquí. Nuestra primera tarea es reemplazar la lista de navegación básica:
1 |
<nav id="primary-navigation" class="row"> |
2 |
<div class="span12 tabbable"> |
3 |
<ul class="nav nav-tabs"> |
4 |
<li class="active"><a href="#tab1" data-toggle="tab">Home</a></li> |
5 |
<li><a href="#tab2" data-toggle="tab">Features</a></li> |
6 |
<li><a href="#tab3" data-toggle="tab">About</a></li> |
7 |
<li><a href="#tab4" data-toggle="tab">Contact Us</a></li> |
8 |
</ul>
|
9 |
</div>
|
10 |
</nav>
|
A continuación, eliminemos el fondo gris de nuestros elementos header y nav. Agregue las siguientes cuatro líneas al final de su archivo user.css.
1 |
header [class*="span"], |
2 |
nav [class*="span"] { |
3 |
background: #fff; |
4 |
}
|
También necesitamos actualizar bien el contenido principal. Agregué una clase de tab-content al elemento section, y envolví el héroe y las imágenes en un div con class="tab-pane active" y id="tab1".. A continuación, agregué tres elementos div adicionales, con ID coincidentes con las etiquetas de enlace de navegación. Estos tres bloques son talones que deben completarse más adelante, pero serán útiles para la prueba. Actualice el marcado de section y actualice el navegador. Si todo va bien, debería poder alternar entre las pestañas y ver el contenido del contenido.
Paso 7: Tooltips y Popovers
Las pestañas son geniales, pero también son solo un comienzo. Si bien Internet se está segmentando rápidamente y se parece a una aplicación, todavía está impulsado por enlaces de un recurso a otro. Los enlaces se utilizan para enlazar páginas, proporcionar un contexto adicional y, a veces, para alojar funciones secundarias. La información sobre herramientas y los elementos emergentes son buenos ejemplos de funciones secundarias; Se implementan fácilmente con atributos de datos personalizados.
¿Qué son los atributos de datos? Por John Resig, quien escribió sobre estos dispositivos en 2008:
Simplemente, la especificación para los atributos de datos personalizados establece que cualquier atributo que comience con "datos-" se tratará como un área de almacenamiento para datos privados (privado en el sentido de que el usuario final no puede verlo, no afecta el diseño o presentación).
Esto significa que podemos agregar datos personalizados a nuestras etiquetas de enlace, y Bootstrap lo manejará en consecuencia.
Supongamos que nuestra galería de imágenes está formada por información técnica. Las descripciones pueden incluir terminología que no está clara para el usuario promedio. Active la información sobre herramientas al reemplazar el HTML de la galería de imágenes, comenzando con la lista desordenada y agregando una función $(document).ready y la función de información sobre herramientas de Bootstrap en la parte inferior de la página.
1 |
<ul class="thumbnails"> |
2 |
<li class="span3"> |
3 |
<figure>
|
4 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
5 |
<figcaption>
|
6 |
<h5>Image 3 title</h5> |
7 |
<p>This is a short caption. It contains some technical language like
|
8 |
domain-specific terms like <a href="#" |
9 |
class="tooltips" |
10 |
data-placement="top" |
11 |
data-trigger="hover" |
12 |
data-title="HTML: Hyper Text Markup Language" |
13 |
>HTML</a></p> |
14 |
</figcaption>
|
15 |
</figure>
|
16 |
</li>
|
17 |
|
18 |
<li class="span3"> |
19 |
<figure>
|
20 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
21 |
<figcaption>
|
22 |
<h5>Image 3 title</h5> |
23 |
<p>This is a short caption. It contains some technical language like
|
24 |
domain-specific terms like <a href="#" |
25 |
class="tooltips" |
26 |
data-placement="top" |
27 |
data-trigger="hover" |
28 |
data-title="CSS: Cascading Style Sheets" |
29 |
>CSS</a></p> |
30 |
</figcaption>
|
31 |
</figure>
|
32 |
</li>
|
33 |
|
34 |
<li class="span3"> |
35 |
<figure>
|
36 |
<img src="http://placehold.it/300x200" alt="3 column placeholder" /> |
37 |
<figcaption>
|
38 |
<h5>Image 3 title</h5> |
39 |
<p>This is a short caption. It contains some technical language like
|
40 |
domain-specific terms like <a href="#" |
41 |
class="tooltips" |
42 |
data-placement="top" |
43 |
data-trigger="hover" |
44 |
data-title="JS: Javascript—The fresh language" |
45 |
>JS</a></p> |
46 |
</figcaption>
|
47 |
</figure>
|
48 |
</li>
|
49 |
</ul>
|
1 |
// Add just above the closing body tag
|
2 |
// Activate the tooltips
|
3 |
<script type="text/javascript" charset="utf-8"> |
4 |
var tooltips = $('a.tooltips'); |
5 |
|
6 |
$(tooltips).tooltip(); |
7 |
</script> |
Con el HTML y Javascript en su lugar, actualice el navegador y pase los enlaces de la galería para revelar sus sugerencias.
Ahora vamos a agregar compartir a nuestra galería de imágenes (al menos de forma aleatoria) con popovers. Los popovers se activan al incluir atributos de datos en su marca, y otro fragmento de JavaScript.
Primero, agreguemos un botón de compartir a cada una de nuestras leyendas de imagen. Agregue el bloque de código justo debajo de la etiqueta de párrafo de cierre en cada figcaption.
1 |
<p>
|
2 |
<a href="#" |
3 |
id="test" |
4 |
class="btn btn-primary popover-link" |
5 |
data-placement="right" |
6 |
data-html="true" |
7 |
data-content=" |
8 |
<a href='#'>Facebook</a><br/>
|
9 |
<a href='#'>Twitter</a><br/>
|
10 |
<a href='#'>Tumblr</a><br/>
|
11 |
<a href='#'>Flickr</a><br/>
|
12 |
"
|
13 |
data-title="Share this image" |
14 |
>Share</a> |
15 |
</p>
|
Puede parecer extraño poner cada elemento en su propia línea, pero he descubierto que Bootstrap es bastante delicado con respecto al marcado bien formado, y es más fácil detectar errores una línea a la vez. Necesitamos escribir algunas líneas de JavaScript y las ventanas emergentes estarán listas.
1 |
// Prevent default links actions and page jumping
|
2 |
var links = $('a'); |
3 |
links.on('click', function (e){ |
4 |
e.preventDefault(); |
5 |
});
|
6 |
|
7 |
// Activate the popovers
|
8 |
var popovers = $('a.popover-link'); |
9 |
|
10 |
popovers.popover(); |
Esta vez, hemos agregado una función general de enlaces para evitar que nuestra pantalla salte cuando los usuarios hagan clic en el botón Compartir. Sin profundizar demasiado en detalles, cada acción en una página web registra un evento, que estamos capturando aquí como el argumento de función 'e'. Al interceptar este evento y reemplazarlo con nuestro JavaScript personalizado, la página se queda donde debería y nuestra ventana emergente aparece como se esperaba.
Paso 8: Creando Windows Modal
Uf. Después de todo eso, las ventanas modales se convertirán en un juego de niños. Bootstrap hace que las ventanas modales estén disponibles agregando un bloque de HTML a la parte superior de su contenedor, y un botón o enlace con un href que coincida con el ID de la ventana modal. Primero, el HTML modal.
1 |
<!-- Add this directly below div class="container"> -->
|
2 |
<!-- Modal -->
|
3 |
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" |
4 |
aria-labelledby="myModalLabel" aria-hidden="true"> |
5 |
<div class="modal-header"> |
6 |
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
7 |
<h3 id="myModalLabel">Catchy modal header here</h3> |
8 |
</div>
|
9 |
<div class="modal-body"> |
10 |
<p><label for="username">Username</label><input type="text" name="username" value="" |
11 |
placeholder="Enter username" id="username"> |
12 |
</p>
|
13 |
<p><label for="password">Password</label><input type="password" name="password" |
14 |
value="" placeholder="Enter password" id="password"> |
15 |
</p>
|
16 |
</div>
|
17 |
<div class="modal-footer"> |
18 |
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> |
19 |
<button class="btn btn-primary">Save changes</button> |
20 |
</div>
|
21 |
</div>
|
Lo único que hay que hacer es añadir nuestro disparador. Como se trata de una aplicación, tendríamos razón al suponer que habrá una secuencia de inicio de sesión. He modificado el header para acortar el área del banner y agregar nuestro botón Iniciar sesión junto al cuadro de búsqueda. Cambie el siguiente HTML y agregue el CSS al final de su archivo user.css.
1 |
<header class="row"> |
2 |
<div class="span7"> |
3 |
<h1 id="banner">My Awesome App</h1> |
4 |
</div>
|
5 |
|
6 |
<div class="span5"> |
7 |
<input type="search" placeholder="Enter search term" data-provide="typeahead" |
8 |
id="search"/> |
9 |
<a href="#myModal" role="button" class="btn" data-toggle="modal">Login</a> |
10 |
</div>
|
11 |
</header>
|
1 |
/* Search box */
|
2 |
header input { |
3 |
margin-top: 20px; |
4 |
width: 70%; |
5 |
float: left; |
6 |
}
|
7 |
|
8 |
/* Login button */
|
9 |
header a { |
10 |
float: right; |
11 |
margin: 20px 0 0 20px; |
12 |
}
|
Actualiza y haz clic en el botón Iniciar sesión. Debería ser recompensado con una animación rápida, y la ventana modal que presenta el frente y el centro.
Paso 9: ¿Cómo encontraré algo?
Esta estructura metálica interactiva está saliendo muy bien. Tenemos una navegación que funciona, muchos bloques para agregar contenido, interactividad y un diseño receptivo. Lo que no tenemos es una forma de buscar cosas, incluso en un sentido de prueba del usuario. Una vez más, Bootstrap nos tiene cubiertos.
Los usuarios están acostumbrados a que el cuadro de búsqueda se muestre de manera prominente en la esquina superior derecha de las pantallas de escritorio, y justo debajo del título en pantallas más estrechas. Comenzaremos dividiendo el elemento header en dos bloques y agregando una sola entrada al más pequeño:
1 |
<header class="row"> |
2 |
<div class="span9"> |
3 |
<h1 id="banner">My Awesome App</h1> |
4 |
</div>
|
5 |
|
6 |
<div class="span3"> |
7 |
<input type="search" placeholder="Enter search term" data-provide="typeahead" |
8 |
id="search"/> |
9 |
</div>
|
10 |
</header>
|
También agregaremos algunas líneas de CSS al archivo user.css, para empujar el cuadro de búsqueda fuera de la parte superior de la página.
1 |
/* Search box */
|
2 |
header input { |
3 |
margin-top: 20px; |
4 |
width: 90%; |
5 |
}
|
También escribiremos una cantidad ligeramente mayor de JavaScript para hacer que el typeahead funcione correctamente. Lo mantendré al mínimo y explicaré lo que hace cada script.
Imagino que algunos de ustedes piensan: “Soy un diseñador web, no un desarrollador. Entendido, pero al menos tenemos que probar las aguas de JavaScript para desbloquear todo el poder de Bootstrap. Y además: los clientes se sorprenden cuando un cuadro de entrada comienza a devolver resultados desde la primera letra que escriben.
Agregue el siguiente fragmento de código JavaScript a su etiqueta de secuencia de comandos existente y presione Actualizar. Si funciona correctamente, debería ver un menú desplegable con resultados sugeridos después de haber escrito una o más letras en el cuadro de búsqueda.
1 |
var search = $('input#search'); |
2 |
|
3 |
$(search).typeahead({ |
4 |
source: [ |
5 |
'Dave Mustaine', |
6 |
'Tom Morello', |
7 |
'Jim Root', |
8 |
'Kirk Hammett', |
9 |
'Joe Perry', |
10 |
'Jimi Hendrix', |
11 |
'Eric Clapton', |
12 |
'Billy Duffy', |
13 |
'Johnny Hickman', |
14 |
'Eddie Van Halen', |
15 |
'Dimebag Darrell', |
16 |
'Noel Gallagher' |
17 |
],
|
18 |
items: 5 |
19 |
});
|
Bien, esto es lo que hace el código. La búsqueda var search = $('input#search') le dice a jQuery que almacene una referencia al cuadro de búsqueda en la search de variable nombrada. Luego invocamos, o invocamos, la función jQuery en nuestra variable de búsqueda, y también llamamos al método typeahead de Bootstrap. Dentro del paréntesis de typeahead, notará una apertura y cierre entre corchetes ondulados { }. Estos corchetes se utilizan para crear un objeto de JavaScript y almacenan cierta información sobre nuestro cuadro de búsqueda.
La primera pieza de información es la matriz source. En su forma más simple, una matriz es una lista ordenada de cosas. Aquí hay una lista de guitarristas. Cada guitarrista agregado a la matriz estará disponible como resultado en nuestra entrada de búsqueda. La segunda parte del objeto, items: 5 le dice al cuadro de búsqueda el número máximo de resultados que se mostrarán.Estas son solo dos de las varias opciones disponibles.
Le animo a que mire la documentación de arranque de Bootstrap y experimente con diferentes configuraciones. La pantalla final para este paso debe verse similar a esto:
Conclusión
Bootstrap se ha convertido en un elemento básico en mi flujo de trabajo de front-end. Me permite probar cuando las iteraciones son relativamente indoloras y probar varios enfoques diferentes al mismo tiempo. Estos descubrimientos ayudan a guiar las decisiones finales de diseño y ayudan a evitar cambios que consumen mucho tiempo durante todo el ciclo de desarrollo. Al tratar los wireframes como una parte crítica de la experiencia del usuario, puedo construir herramientas que se sienten más naturales y más gratificantes.
Acabo de rayar la superficie de Bootstrap, y lo que es posible utilizando su kit de piezas. Los wireframes son un excelente lugar para comenzar a aprender los entresijos, ya que están destinados a ser modelos de prueba temprana de aplicaciones completas. Los clientes y colegas pueden probar nuestras suposiciones y ayudarnos a refinar rápidamente, con un tiempo mínimo perdido.
Espero que te haya gustado este tutorial, gracias por leerlo!
By
