y toda la jerarquía de encabezados. Honestamente, estas son cosas de "Desarrollo Web 101" que probablemente ya conozcas, así que no perderé tu tiempo explicando cómo diseñar. Son cosas bastante elementales.

Es importante tener en cuenta que Bootstrap tiene en cuenta las etiquetas antiguas y ahora en desuso, por lo que no debe preocuparse si está usando un CMS que las usa, o por un cliente que no conoce ninguna alternativa..

Citando

Donde Bootstrap necesita un poco más de explicación es cuando vienes a usar el

etiqueta. Puede usar la etiqueta por sí sola para mostrar la cita con sangría, con un borde gris grueso a la izquierda. Sin embargo, se puede mejorar al anidar otras etiquetas en el interior para atribuir la cita. Cuando se trata de agregar un atributo, simplemente envuelva el texto de la cita en un

etiqueta, y la fuente en una tag y Bootstrap automáticamente le darán estilo y pondrán un guión delante de la fuente.

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
 Connor Turnbull, 30 de agosto 

Obtendrá un resultado similar a la imagen de abajo, según el contenido que coloque entre el párrafo y las etiquetas pequeñas..

Liza

Las listas son otra parte del espectro de tipografía que se cubre en Bootstrap y vienen con cuatro conjuntos diferentes de estilos: listas con viñetas, listas con viñetas anidadas, listas ordenadas y glosarios. Nuevamente, estos no son tan difíciles de usar, ya que no se desvían de lo que es estándar en HTML. Debido a que las listas se pueden construir de diferentes maneras, aquí hay un resumen rápido de cómo usarlas con los estilos Bootstrap.

El código a continuación es una lista básica no ordenada, con viñetas que producirá algo similar al primer ejemplo en la imagen a continuación. Intercambiar el ul por un ol para producir una lista ordenada, como la del segundo ejemplo.

 
Lorem ipsum dolor sit amet
 
Consectetur adipiscing elit
? 

Si agrega el sin estilo de la lista a la lista no ordenada, los elementos de la lista no anidados no serán viñetados ni ordenados. Simplemente aparecerán como líneas regulares, mientras que los elementos anidados tendrán una viñeta a la izquierda.

 
Lorem ipsum dolor sit amet
 
Consectetur adipiscing elit
? 

La adición de una lista de descripción se realiza de la misma manera que se esperaría fuera de Bootstrap, y da como resultado una muestra como la última en la imagen de arriba.

 
Lorem ipsum
 
Lorem ipsum dolor sit amet
 
Consectetur
 
Consectetur adipiscing elit
? 

---

Mesas

Bootstrap es un conjunto de herramientas que está dirigido en parte a nuevos diseñadores web, por lo que no hace falta decir necesariamente que estas cosas no están diseñadas para diseños. En su lugar, las tablas están diseñadas para datos tabulares, y Bootstrap hace un buen trabajo para embellecer sus datos tabulares con sus estilos, sin necesidad de ninguna clase o atributo adicional. Por ejemplo, podemos echar un vistazo a un fragmento regular de HTML que generaría una tabla.

 
 
 
#
 
Nombre de pila
 
Apellido
 
Idioma
 
 
 
 
 
1
 
Algunos
 
Uno
 
Inglés
 
 
 
2
 
Joe
 
Paquete de seis
 
Inglés
 
 
 
3
 
Stu
 
Abolladura
 
Código
 
 
 

El código anterior crea la tabla en la imagen a continuación, como se usa en el ejemplo oficial de Twitter. Tiene tres filas de contenido y un encabezado en cuatro columnas, y es bastante estándar. Con poca manipulación (no tiene nada que ver con la manipulación) de la creación estándar de una tabla, Bootstrap aplica automáticamente sus estilos.

En este caso, lo más importante que debe recordar es anidar correctamente sus etiquetas. Los estilos no se aplican si no ajusta su fila de encabezado en un etiqueta, por ejemplo.

De forma predeterminada, la tabla no tiene rayas de cebra, donde los colores alternativos podrían llenar el fondo de cada fila. Esto es fácil de habilitar, sin embargo, simplemente agregando el rayas de cebra clase a la

Etiqueta sin ninguna manipulación de las filas o partes individuales..

?

Finalmente, con la adición de una pequeña parte de jQuery, pero sin cambios en el HTML, aparte de agregar sortTableExample como el ID de la

#

etiqueta, puede agregar la funcionalidad de clasificación cuando se hace clic en el encabezado de una columna. Esta funcionalidad requiere el complemento jQuery de Tablesorter 2.0, que se puede descargar de forma gratuita. Como probablemente ya hayas adivinado, también necesitarás llamar a jQuery para que esto funcione.

?

---

Formas y botones

La mayoría de las cosas que ya hemos cubierto es bastante simple, donde Bootstrap aplicará estilos a su código con poco o ningún cambio de lo normal. Al sacar eso del camino, ahora podemos pasar a algunas cosas que requieren un poco más de explicación y un poco más de tutoría..

Formas

Para formularios, hay muchos estilos diferentes que puedes usar, así que vamos a ver cada uno individualmente. Luego, puede usarlos en combinación y manipularlos con el conocimiento preexistente de los formularios HTML antiguos habituales..

En primer lugar, debe tenerse en cuenta que todo su formulario debe estar envuelto en un

Etiqueta, pero probablemente ya lo sepas. Bootstrap también recomienda que envuelvas tus elementos en

etiquetas, con un adicional

etiqueta.

 
 
Lorem ipsum dolor sit amet
 (tus campos van aquí) 
 

En general, la configuración de su formulario no debe diferir del código anterior. La única otra opción que proporciona Bootstrap es optar por formularios apilados, donde las etiquetas residen en la parte superior de un campo, en lugar de a la izquierda. Eso se puede lograr añadiendo el forma apilada clase a la

etiqueta.

Entrada de texto

Para iniciar nuestra cobertura de campos de formulario, veremos un campo de entrada regular con una etiqueta. El siguiente fragmento de código es esencialmente un y un etiqueta, envuelto en un

etiqueta con el clearfix Clase para asegurar el espaciado correcto. Además, el campo real está envuelto en otro

con el entrada clase, de nuevo, para asegurar el espaciado correcto.

 Lorem ipsum 
  
 

Por el bien de este tutorial, voy a ignorar algunas prácticas que deberían emplearse en su código. Por ejemplo, cada entrada debe tener una ID, que está vinculada a la etiqueta a través del atributo "para", y generalmente querrá nombrar sus campos de entrada para capturarlos cuando se trata de procesar sus datos. Estamos analizando específicamente cómo usar los estilos de Bootstrap aquí, por lo que esos tipos de atributos no se han incluido en mis ejemplos para tratar de mantener las cosas lo más simples posible. Sin embargo, aunque se estén utilizando junto con Bootstrap, esas tareas no deben olvidarse.

Añadiendo el xlarge clase a la , el campo de formulario se ensancha.

Podemos deshabilitar una entrada de manera regular, agregando los atributos apropiados, como se muestra en el siguiente ejemplo. Los estilos de Bootstrap se añaden en el discapacitado clase, que se debe agregar para mostrar visualmente que un usuario no puede interactuar con ese campo al desactivarlo.

 Lorem ipsum 
  
 

Mientras que el enfoque en gris de un campo deshabilitado se logra usando un etiqueta, uno no editable no lo es. En su lugar, Bootstrap utiliza un simple que se puede utilizar junto con una entrada oculta. Estos campos se utilizan para obtener información que el usuario no debe editar, como una fecha de recopilación automática o una dirección IP.

 Lorem ipsum 
 Lorem ipsum dolor sit amet  
 

Nuestro último vistazo a las entradas de texto de estilo es mostrar ayuda contextual cuando se produce un error. Se hace agregando un error clase a la

que forma el clearfix, y al etiqueta en sí. Añadiendo un etiqueta con el ayuda en línea La clase debajo agrega el mensaje de ayuda en el lado derecho..

 Lorem ipsum 
  Dolor sentarse amet 
 

Seleccionar desplegable

Un menú desplegable está estructurado de manera similar, con el código regular que se está empleando, como se muestra a continuación.

 Lorem Ipsum 
  Lorem Ipsum Dolor Sentar Amet  
 

los xlarge clase a un campo de texto es el opuesto de la medio clase a etiqueta. Agregar tal clase al menú desplegable de opciones hará que el campo sea más estrecho.

Casillas de verificación

Las casillas de verificación no están realmente diseñadas en Bootstrap. El kit de herramientas simplemente los organiza para que se sienten en línea con los otros campos, y lo hace creando una lista con cada elemento de casilla de verificación. El código es bastante autoexplicativo, solo asegúrese de incluir tanto el texto de la etiqueta como la casilla de verificación en el etiqueta de modo que (a) la casilla de verificación esté flotando a la izquierda y (b) la casilla de verificación se pueda seleccionar haciendo clic en la etiqueta.

 Lorem ipsum 
 
 
  

Lorem ipsum dolor sit amet

Ese código generará una única casilla de verificación con una etiqueta a la derecha. Para crear uno adicional, simplemente repita el elemento de la lista y su contenido, luego voilemos, tiene una lista de casillas de verificación.

Para deshabilitar una casilla de verificación, simplemente agregue discapacitado atribuir a la etiqueta, y la discapacitado clase a la etiqueta.

   Lorem ipsum dolor sit amet  

Además, hay dos tipos adicionales de casillas de verificación que se emparejan con los campos de texto: casillas de verificación antepuestas y anexas. De nuevo, esto se explica por sí mismo y es muy similar a un campo de texto regular. Sin embargo, esta vez necesita envolver la casilla de verificación en un etiqueta (con el Añadir clase), y ya sea el input-prepend o la añadir entrada clase para padres

. Luego, todo lo que queda es asegurarse de colocar la etiqueta y el campo de la manera correcta, dependiendo de si desea que se incluya o no..

 Lorem ipsum 
   
 

El código anterior es para una casilla de verificación adjunta, pero, si desea una anterior, hay poco que cambiar.

 Lorem ipsum 
   
 

Entradas de archivo

Las entradas de archivo son muy parecidas a los campos de texto y el código a continuación se explica por sí mismo. Crear una entrada de archivo regular con el fichero de entrada clase.

 Lorem ipsum 
  
 

Areas de texto

El estilo final de Bootstrap para formularios es el área de texto. El área de texto se crea de la misma manera que el campo de texto de una sola línea. Al igual que la ampliación de un campo de texto, el área de texto también tiene su propia clase para ampliarla., xxlarge.

 Lorem ipsum 
  
 

Opcionalmente, puede agregar una pequeña línea de ayuda debajo del campo con la siguiente línea agregada inmediatamente después de </code> etiqueta.</p> <pre><span>Lorem ipsum dolor sit amet</span></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_13.png"> <h3>Botones</h3> <p>Ahora es el momento de procesar nuestro formulario, y normalmente lo hacemos haciendo clic en un botón. Afortunadamente, Bootstrap cubre botones y son súper simples de agregar.</p> <p>Los botones se pueden agregar a través de una <code><a></code> o un <code><button></code> etiqueta. Ambas comparten las mismas clases y se verán idénticas, pero debes probar y reservar botones para acciones y enlaces para, bueno, enlaces. Así, por ejemplo, un botón se escribiría así:</p> <pre><button>Lorem ipsum</button></pre> <p>Y un botón de identificación, pero creado como un enlace, se escribiría así:</p> <pre>Lorem ipsum</pre> <p>Por defecto, el botón aparecerá en un estilo gris claro. Sin embargo, esto se puede cambiar fácilmente a uno de los otros cuatro (azul claro, azul, verde y rojo) aplicando una clase adicional.</p> <ul> <li> <code>primario</code> para un botón azul que es la acción principal (por ejemplo, enviar un formulario)</li> <li> <code>info</code> para un botón azul más claro, generalmente usado para acceder a la información</li> <li> <code>éxito</code> Para un botón verde, usado para señalar el éxito.</li> <li> <code>peligro</code> para un botón rojo, generalmente se usa para acciones irreversibles o peligrosas, como eliminar</li> </ul> <pre><button>Primario</button> <button>Defecto</button> <button>Información</button> <button>Éxito</button> <button>Peligro</button></pre> <p>También podemos cambiar el tamaño de un botón por defecto. Para agrandarlo, simplemente añada el <code>grande</code> clase o reducirlo con el (sí, lo has adivinado) <code>pequeña</code> clase.</p> <p>Finalmente, para deshabilitar un botón, todo lo que tenemos que hacer es agregar el <code>discapacitado</code> clase y, en el caso de un botón de acción, establecer el atributo deshabilitado.</p> <pre><button disabled>Lorem ipsum</button></pre> <p>o</p> <pre><a>Lorem ipsum</pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_14.png"> <hr> <h2>Navegación</h2> <p>Bootstrap incluye una barra de navegación fija que se parece a la del sitio web de Twitter. La barra se compone esencialmente de tres secciones, el enlace del título, los elementos del menú en la barra de búsqueda, encerrados en un par de <code><div></code> Etiquetas que no valen la pena explicar.</p> <p>En el código de abajo, notarás una <code><h3></code> Etiqueta que contiene el título. Es bastante fácil modificar esto y agregar su propio enlace y texto.</p> <pre><h3>Lorem ipsum</h3></pre> <p>A continuación se encuentran los elementos del menú, que son solo elementos de la lista sin clasificar con enlaces. Es lo suficientemente sencillo como para duplicar estos elementos, ya que no requieren estilos específicos de Bootstrap, aparte de <code>activo</code> clase en el enlace actual.</p> <pre><ul> <li>Casa</li> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul></pre> <p>La última lista es para el menú desplegable. Cuenta con un solo elemento de lista, con otra lista anidada que aparece al pasar el mouse por encima. La tercera línea del código a continuación es el elemento de la lista que aparece constantemente en la barra de navegación, mientras que la lista que comienza en la línea 4 es los elementos de desplazamiento..</p> <pre><ul> <li> Lorem ipsum <ul> <li>Dolor sentarse</li> <li>Amet Consequeter</li> <li>Basta con el latín</li> </ul> </li> </ul></pre> <p>Como verás, agregando un elemento de lista vacía con la <code>divisor</code> clase agregará un divisor en el menú desplegable.</p> <p>En uso, la barra superior debe tener un aspecto similar a este, colocada justo en la parte superior de la página..</p> <pre><div> <div> <div> <h3>WebDesignTuts+</h3> <ul> <li>Casa</li> <li>Tutoriales</li> <li>Artículos</li> <li>Encuestas semanales</li> </ul> <form> <input type="text" placeholder="Search" /> </form> <ul> <li> Lorem ipsum <ul> <li>Dolor sentarse</li> <li>Amet Consequeter</li> <li>Basta con el latín</li> </ul> </li> </ul> </div> </div> </div></pre> <p>Tenga en cuenta que deseará compensar la altura de 40 píxeles de la barra en la parte superior de la página, de lo contrario se superpondrán los primeros elementos de su página..</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_15.png"> <hr> <h2>Pestañas y pastillas</h2> <p>Las pestañas y las píldoras son increíblemente fáciles de crear, ya que son solo listas antiguas comunes. Por supuesto, no funcionan. Bootstrap tiene que ver con los estilos. Simplemente construya su lista con el <code>pestañas</code> clase para la interfaz de pestañas, o la <code>pastillas</code> clase para las pastillas de la píldora. Al igual que en la barra de navegación en la sección anterior, agregando el <code>activo</code> clase a un elemento de la lista lo resaltará.</p> <p>Para el selector de pestañas, use algo similar a esto:</p> <pre><ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Sentar</li> <li>Amet</li> </ul></pre> <p>Para usar píldoras en su lugar, cambie la línea superior por la siguiente.</p> <pre><ul></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_16.png"> <hr> <h2>Paginación</h2> <p>Ahora pasamos a la paginación, que no tiene función (como las pestañas y las píldoras), pero aún tiene un estilo en Bootstrap. Bootstrap maneja los botones de paginación en las mismas pestañas, en una lista que esta vez está envuelta en un <code><div></code> con el <code>paginación</code> clase. Cada elemento de la lista puede tener un número vinculado en él (o puntos suspensivos), además del primer y último elemento reservados para los enlaces anterior / siguiente. Estos tienen la <code>prev</code> y <code>siguiente</code> clases, respectivamente.</p> <p>Además, cualquier botón se puede deshabilitar agregando el <code>discapacitado</code> clase, y el enlace activo se resalta con la <code>activo</code> clase. Al igual que:</p> <pre><div> <ul> <li>Prev</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>Siguiente</li> </ul> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_17.png"> <hr> <h2>Alertas y mensajes de error</h2> <p>Las barras de alerta son visualmente muy similares a los botones, aunque se construyen de manera diferente. Cada mensaje de error es un <code><div></code> etiqueta con el <code>mensaje de alerta</code> clase. Hay cuatro tipos diferentes de mensajes, cada uno con una clase correspondiente que también debe agregarse:</p> <ul> <li> <code>advertencia</code> para una barra amarilla</li> <li> <code>error</code> para una barra roja</li> <li> <code>éxito</code> para una barra verde</li> <li> <code>info</code> para una barra azul</li> </ul> <p>Los mensajes de alerta se escriben de la siguiente manera, seleccionando solo una clase de <code>advertencia / error / éxito / información</code>.</p> <pre><div> ? <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p> </div></pre> <p>Solo para su información, la segunda línea del código anterior agrega el "?" a la derecha del mensaje de alteración, que podría estar vinculado a una acción que elimina el mensaje.</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_18.png"> <p>Las alertas tampoco tienen que ser un asunto de una sola línea. Si su mensaje se extiende más allá de una sola línea, simplemente agregue <code>mensaje de bloqueo</code> clase al código que usarías para una sola línea, mientras sigues usando las diferentes clases de tipos.</p> <pre><div> × <p><strong>Lorem ipsum</strong> Fusce interdum euismod tempor? </p> </div></pre> <p>Estos mensajes también pueden contener botones, útiles si la alerta debe resolverse con una opción. Si regresa a nuestra sección de botones, sabrá cómo agregarlos. Solo asegúrese de usar las versiones pequeñas, agregando el <code>pequeña</code> clase al botón en sí, y envuélvalo en un <code><div></code> etiqueta con el <code>acciones de alerta</code> clase.</p> <pre><div> × <p><strong>Lorem ipsum dolor sit amet!</strong> Fusce interdum euismod tempor? </p> <div> Lorem ipsum dolor sit amet </div> </div></pre> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_19.png"> <hr> <h2>Modales</h2> <p>Los modos pueden ser útiles para mostrar información en ciertos escenarios, comúnmente utilizados para ingresar datos, como información de usuario o publicaciones. El modal de Bootstrap es bastante simple y está dividido en tres secciones; El encabezado, el cuerpo y el pie de página. Primero, comenzamos por abrir el modal de <code><div></code> etiqueta, y posicionándolo con algunos estilos en línea que Bootstrap requiere.</p> <pre><div></pre> <p>Dentro de esa etiqueta, colocamos las tres secciones, la primera es el encabezado. El encabezado tiene una clase de <code>encabezado modal</code> e incluye solo dos lineas, una <code><h3></code> etiqueta para el título, y el (opcional) vinculado "?" que se puede personalizar para cerrar el popover.</p> <pre><div> <h3>Lorem ipsum</h3> × </div></pre> <p>A continuación, tenemos el contenido principal. Es muy simple, siendo solo un <code><div></code> con el <code>cuerpo modal</code> clase, y su contenido dentro. Como tal:</p> <pre><div> <p>Lorem ipsum dolor sit amet</p> </div></pre> <p>Finalmente, tenemos el pie de página modal (otro <code><div></code>, esta vez con el <code>modal-footer</code> clase) que generalmente consiste en botones para actuar. Estos se generan exactamente de la misma manera que todos los otros botones que hemos creado con Bootstrap, por lo que no necesitan una explicación adicional..</p> <pre><div> Lorem ipsum dolor Sit Amet </div></pre> <p>Está bien, mentí. Ese no fue el paso final. Todavía tenemos que cerrar el original. <code><div></code>.</p> <pre></div></pre> <p>Pon todas estas partes juntas como una, y obtendrás una ventana modal muy dulce. Desafortunadamente, como te sigo recordando, Bootstrap está manejando literalmente el estilo aquí; El modal no aparecerá en realidad como si hubiera aparecido. Sería increíble si Bootstrap se expandiera para tener alguna funcionalidad además del CSS, pero por el momento tendrá que generar o obtener su propia fuente..</p> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_20.png"> <hr> <h2>Pensamientos finales</h2> <img src="//accentsconagua.com/img/images_26_1/stepping-out-with-bootstrap-from-twitter_21.png"> <p>La imagen de arriba muestra nuestro diseño final. Consiste en todos los elementos que hemos creado en este tutorial (hay una demostración separada de los elementos del formulario), completamente dentro del alcance de Bootstrap. Esperamos que este artículo le haya sido de utilidad, especialmente porque puede ser difícil para algunos descifrar la página de ejemplo incluida (que actúa como la única documentación incluida en la descarga).</p> <p>Me encanta Bootstrap. Si eres nuevo en el desarrollo web, proporciona una gran variedad de elementos para usar, aunque tu sitio puede terminar luciendo demasiado en Twitter a través de muchos elementos compartidos. No obstante, la simplicidad y la facilidad de uso son demasiado difíciles de ignorar si no desea / no puede escribir su propia cuenta. No puedo esperar a probar y usar algunas de estas cosas en un nuevo proyecto.</p> <hr> <h3>Recursos adicionales</h3> <p>Uso de Less CSS, BluePrint y WP para un Wptuts de flujo de trabajo más rápido+<br>Consejo rápido: Nunca escriba un prefijo de proveedor de nuevo Nettuts+<br>Bootstrap de Twitter es el nuevo sueño de un diseñador web, la aplicación web AppStorm<br>Plantillas Bootstrap en ThemeForest</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Diseño web</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/steps-to-becoming-a-quality-wordpress-theme-developer.html">Pasos para convertirse en un desarrollador de temas de WordPress de calidad</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/steps-to-becoming-a-quality-wordpress-theme-developer.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/photography/stepping-into-the-fashion-photography-industry.html">Entrar en la industria de la fotografía de moda</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_27_3/stepping-into-the-fashion-photography-industry_5.jpg');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">es.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Buscar..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>

#