Add ES translation of bootstrap waypoints. Thanks to @vtamara for the revision
justinian336
parent
547f337654
commit
9a6fba7a9c
|
|
@ -84,8 +84,16 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Usa diseño adaptativo con los contenedores fluidos de Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora vamos de vuelta a nuestra aplicación de fotos de gatos. Esta vez, vamos a darle estilo utilizando la infraestructura CSS del popular Bootstrap.",
|
||||
"Bootstrap determina qué tan ancha es la pantalla y adapta correspondientemente el tamaño de tus elementos HTML - por eso es que se llama <code>Diseño adaptativo</code> (responsive design).",
|
||||
"Con diseño adaptativo, no hay necesidad de diseñar una versión móvil para tu sitio web. Se verá bien en dispositivos con pantallas de cualquier tamaño.",
|
||||
"Puedes agregar Bootstrap a cualquier aplicación simplemente incluyéndolo agregando el siguiente código al inicio de tu HTML:",
|
||||
"<code><link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/></code>",
|
||||
"En este caso, lo hemos agregado a esta página por ti.",
|
||||
"Para iniciar, debemos anidar todo nuestro HTML en un elemento <code>div</code> con la clase <code>container-fluid</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -170,8 +178,12 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Haz que las imágenes sean adaptativas en dispositivos móviles",
|
||||
"descriptionEs": [
|
||||
"Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo <code>src</code> sea <code>http://bit.ly/fcc-running-cats</code>.",
|
||||
"Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.",
|
||||
"Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase <code>img-responsive</code> a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -254,8 +266,12 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Centra el texto con Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora que estamos usando Bootstrap, podemos centrar nuestro elemento de encabezado para hacerlo verse mejor. Todo lo que necesitamos hacer es agregar la clase <code>text-center</code> a nuestro elemento <code>h2</code>.",
|
||||
"Recuerda que puedes agregar varias clases a un mismo elemento separando cada una de ellas con un espacio, de esta forma:",
|
||||
"<code><h2 class=\"red-text text-center\">your text</h2></code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -339,8 +355,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea un botón con Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Bootstrap tiene sus propios estilos para elementos <code>button</code>, los cuales se ven mejor que los estilos simples de HTML.",
|
||||
"Crea un nuevo elemento <code>button</code> debajo de tu foto grande del gatito. Dale la clase <code>btn</code> y el texto \"Like\"."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -427,8 +446,14 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea un elemento botón de bloque con Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Normalmente, tus elementos <code>button</code> son sólo tan anchos como el texto que contienen. Al convertir un botón en elemento a nivel de bloque, este se estirará para llenar todo el espacio horizontal y cualquier elemento que lo siga se desplazará a una \"nueva línea\" debajo del bloque.",
|
||||
"Esta imagen es un ejemplo de la diferencia entre elementos en línea (<code>inline</code>) y elementos a nivel de bloque (<code>block-level</code>):",
|
||||
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira hasta llenar todo el espacio horizontal.'></a>",
|
||||
"Ten en cuenta que estos botones todavía necesitan la clase <code>btn</code>.",
|
||||
"Agrega la clase de Bootstrap <code>btn-block</code> a tu botón Bootstrap."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -513,8 +538,12 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Prueba el arcoíris de colores para botones que te ofrece Bootstrap",
|
||||
"descriptionEs": [
|
||||
"La clase <code>btn-primary</code> es el color principal que utilizarás en tu aplicación. Es útil resaltar las acciones que quieres que tu usuario ejecute.",
|
||||
"Agrega la clase <code>btn-primary</code> de Bootstrap a tu botón.",
|
||||
"Ten en mente que este botón todavía necesita las clases <code>btn</code> y <code>btn-block</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -600,8 +629,12 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Señala acciones opcionales con botones informativos",
|
||||
"descriptionEs": [
|
||||
"Bootstrap incluye varios colores pre-definidos para botones. La clase <code>btn-info</code> se utiliza para llamar la atención a acciones opcionales que el usuario puede tomar.",
|
||||
"Crea un nuevo botón a nivel de bloque de Bootstrap debajo de tu botón de \"Like\" con el texto \"Info\", y agrégale las clases de Bootstrap <code>btn-info</code> y <code>btn-block</code>.",
|
||||
"Ten en mente que estos botones todavía necesitan las clases <code>btn</code> y <code>btn-block</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -688,8 +721,12 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Advierte a tus usuarios sobre acciones peligrosas",
|
||||
"descriptionEs": [
|
||||
"Bootstrap incluye varios colores pre-definidos para botones. La clase <code>btn-danger</code> es el color de botón que usarías para notificar a los usuarios que el botón ejecuta una acción destructiva, como por ejemplo eliminar la foto de un gato.",
|
||||
"Crea un botón con el texto \"Delete\" y dale la clase <code>btn-danger</code>.",
|
||||
"Recuerda que estos botones todavía requieren las clases <code>btn</codez> y <code>btn-block</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -781,8 +818,16 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Usa la cuadrícula de Bootstrap para poner elementos lado a lado",
|
||||
"descriptionEs": [
|
||||
"Bootstrap utiliza un sistema de cuadrícula adaptativa que facilita el poner elementos en fila y especificar la anchura relativa de cada elemento. La mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento <code>div</code>.",
|
||||
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
|
||||
"En esta ilustración se está utilizando la clase <code>col-md-*</code>. Aquí, <code>md</code> significa mediano, y <code>*</code> es un número que especifica la cantidad de columnas debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como una laptop.",
|
||||
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
|
||||
"Pon los botones de <code>Like</code>, <code>Info</code> y <code>Delete</code> lado a lado. Esto se hace anidando los tres botones dentro de un elemento <code><div class=\"row\"></code>, y luego cada uno de ellos dentro de un elemento <code><div class=\"col-xs-4\"></code>.",
|
||||
"La clase <code>row</code> se aplica al elemento <code>div</code>, dentro del cual van anidados los botones."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -881,8 +926,14 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Reemplaza el CSS personalizado por Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Podemos limpiar nuestro código y hacer que nuestra aplicación de fotos de gatos se vea más convencional, usando los estilos pre-construidos de Bootstrap, en lugar de los estilos personalizados que creamos antes.",
|
||||
"No te preocupes, luego habrá más tiempo para personalizar nuestro CSS.",
|
||||
"Elimina las declaraciones CSS <code>.red-text</code>, <code>p</code>, y <code>.smaller-image</code> de tu elemento <code>style</code>, de forma que las únicas declaraciones que queden en tu elemento <code>style</code> sean <code>h2</code> y <code>thick-green-border</code>.",
|
||||
"Luego elimina el elemento <code>p</code> que contiene un enlace nulo. Después, elimina la clase <code>red-text</code> de tu elemento <code>h2</code> y reemplázalo con la clase <code>text-primary</code> de Bootstrap.",
|
||||
"Por último, elimina la clase \"smaller-image\" de tu primer elemento <code>img</code> y reemplázalo con la clase <code>img-responsive</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -969,8 +1020,16 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Usa span para elementos en línea",
|
||||
"descriptionEs": [
|
||||
"Puedes utilizar span para crear elementos en línea. ¿Recuerdas cuando usamos la clase <code>btn-block</code> para hacer que el botón llenara toda la línea?",
|
||||
"Esta imagen ilustra la diferencia entre elementos en línea (<code>inline</code>) y elementos a nivel de bloque (<code>block-level</code>):",
|
||||
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira para llenar todo el espacio horizontal.'></a>",
|
||||
"Al usar el elemento <code>span</code>, puedes poner varios elementos juntos, e incluso darle diferentes estilos a partes diferentes del mismo elemento.",
|
||||
"Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento <code>span</code>. Luego, asigna a ese elemento <code>span</code> la clase <code>text-danger</code> para hacer que el texto sea rojo.",
|
||||
"Así es como lo harías con el elemento \"Top 3 things cats hate\":",
|
||||
"<code><p>Top 3 things cats <span class = \"text-danger\">hate</span></p></code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1057,8 +1116,17 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea un encabezado personalizado",
|
||||
"descriptionEs": [
|
||||
"Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniéndolos en la misma línea.",
|
||||
"Recuerda, Bootstrap usa un sistema de cuadrícula adaptativo, el cual facilita poner elementos en filas y especificar el ancho relativo de cada elemento. La mayoría de las clases de Bootstrap pueden aplicarse a un elemento <code>div</code>.",
|
||||
"Aquí hay un diagrama del funcionamiento de la cuadrícula de 12 columnas Bootstrap:",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Pulsa para agrandar\" alt=\"una imagen que muestra el sistema de cuadrícula de Bootstrap\"></a>",
|
||||
"En esta ilustración se está utilizando la clase <code>col-md-*</code>. Aquí, <code>md</code> significa mediano, y <code>*</code> es un número que especifica el número de columnas que debe tomar el ancho del elemento. En este caso, se especifica el ancho de columna de un elemento en una pantalla de tamaño mediano, como un computador portátil.",
|
||||
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
|
||||
"Anida tu primera imagen y tu elemento <code>h2</code> dentro de un solo elemento <code><div class=\"row\"></code>. Anida tu texto <code>h2</code> dentro de un <code><div class=\"col-xs-8\"></code> y tu imagen en un <code><div class=\"col-xs-4\"></code> de tal forma que estén en la misma línea.",
|
||||
"¿Te diste cuenta de que la imagen es ahora justamente del tamaño apropiado para el texto?"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1141,8 +1209,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Agrega iconos de Font Awesome a los botones",
|
||||
"descriptionEs": [
|
||||
"Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato <code>.svg</code>, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.",
|
||||
"Usa Font Awesome para agregar un icono de \"pulgar arriba\" <code>thumbs-up</code> a tu botón de like dándole un elemento <code>i</code> con las clases <code>fa</code> y <code>fa-thumbs-up</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1225,8 +1296,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Agrega Font Awesome a todos los botones",
|
||||
"descriptionEs": [
|
||||
"Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato <code>.svg</code>, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.",
|
||||
"Utiliza Font Awesome para agregar un icono <code>info-circle</code> a tu botón informativo y un icono <code>trash</code> a tu botón de eliminar."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1309,8 +1383,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea botones de opción con estilo adaptativo",
|
||||
"descriptionEs": [
|
||||
"¡Puedes utilizar las clases <code>col-xs-*</code> de Bootstrap en elementos <code>form</code> también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.",
|
||||
"Anida todos los botones de opción dentro de un elemento <code><div class=\"row\"></code>. Luego, anida cada uno de ellos dentro de un elemento <code><div class=\"col-xs-6\"></code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1400,8 +1477,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea casillas de selección con estilo adaptativo",
|
||||
"descriptionEs": [
|
||||
"¡Puedes utilizar las clases <code>col-xs-*</code> de Bootstrap en elementos <code>form</code> también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.",
|
||||
"Anida todas las casillas de selección en un elemento <code><div class=\"row\"></code>. Luego, anida cada una de ellas en un elemento <code><div class=\"col-xs-4\"></code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1500,8 +1580,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Estiliza cajas de texto como controles de formulario",
|
||||
"descriptionEs": [
|
||||
"Puedes agregar el icono <code>fa-paper-plane</code> de Font Awesome incluyendo <code><i class=\"fa fa-paper-plane\"></i></code> dentro de tu elemento <code>button</code> de envío.",
|
||||
"Dale a la entrada de texto de tu formulario la clase <code>form-control</code>. Dale al botón de envío de tu formulario las clases <code>btn btn-primary</code>. También, incluye en ese botón el icono <code>fa-paper-plane</code> de Font Awesome."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1601,8 +1684,12 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Alínea elementos de formulario de forma adaptativa con Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora vamos a poner el elemento <code>input</code> y el elemento <code>button</code> que dice submit de tu formulario en la misma línea. Lo haremos de la misma forma que lo hicimos anteriormente: usando un elemento <code>div</code> con la clase <code>row</code>, y otros elementos <code>div</code> dentro de ese, usando la clase <code>col-xs-*</code>.",
|
||||
"Anida ambos, el elemento <code>input</code> y el elemento <code>button</code> que dice submit de tu formulario dentro de un <code>div</code> con la clase <code>row</code>. Anida el elemento <code>input</code> de tu formulario dentro de un div con cla clase <code>col-xs-7</code>. Anida el elemento <code>button</code> que dice submit de tu formulario en un elemento <code>div</code> con la clase <code>col-xs-5</code>.",
|
||||
"¡Este es el último desafío que haremos con nuestra aplicación de fotos de gato por ahora. Esperamos que hayas disfrutado aprender acerca de Font Awesome, Bootstrap y diseño adaptativo!"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1635,8 +1722,13 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea un encabezado con Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora vamos a comenzar un proyecto desde cero para practicar nuestras habilidades con HTML, CSS y Bootstrap.",
|
||||
"Crearemos un área de juego con jQuery, el cual utilizaremos en nuestros desafíos con jQuery.",
|
||||
"Para empezar, crea un elemento <code>h3</code>, con el texto <code>jQuery Playground</code>.",
|
||||
"Ponle color a tu elemento <code>h3</code> con la clase <code>text-primary</code> de Bootstrap, y céntrala con la clase <code>text-center</code> de Bootstrap."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1664,8 +1756,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Aloja la página dentro de un elemento Div contenedor fluido de Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora asegurémonos de que todo el contenido en nuestra página pueda adaptarse a dispositivos móviles.",
|
||||
"Anida tu elemento <code>h3</code> dentro de un elemento <code>div</code> con la clase <code>container-fluid</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1697,8 +1792,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea una fila en Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora crearemos una fila de Bootstrap con nuestros elementos en línea.",
|
||||
"Crea un elemento <code>div</code> debajo de la etiqueta <code>h3</code>, con la clase <code>row</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1730,8 +1828,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Parte tu fila en Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora que tenemos una fila en Bootstrap, vamos a partirla en dos columnas para alojar nuestros elementos.",
|
||||
"Crea dos elementos <code>div</code> dentro de tu fila, ambos con la clase <code>col-xs-6</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1768,8 +1869,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea pozos en Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Bootstrap tiene una clase llamada <code>well</code> que crea una sensación visual de profundidad para tus columnas.",
|
||||
"Anida un elemento <code>div</code> con la clase <code>well</code> dentro de cada uno de tus elementos <code>div</code> que tienen la clase <code>col-xs-6</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1814,8 +1918,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Agrega elementos dentro de los pozos de Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Ahora estamos a una profundidad de varios elementos <code>div</code> dentro de cada columna de nuestra fila. No iremos más profundo que esto. Ahora podemos agregar nuestros elementos <code>button</code>.",
|
||||
"Anida tres elementos <code>button</code> dentro de cada uno de tus elementos <code>div</code> que tienen la clase <code>well</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1859,8 +1966,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Aplica el estilo de botón predeterminado de Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Bootstrap tiene otra clase de botón llamada <code>btn-default</code>.",
|
||||
"Aplica las clases <code>btn</code> y <code>btn-default</code> a cada uno de tus elementos <code>button</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1903,8 +2013,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Crea una clase para usar con selectores de jQuery",
|
||||
"descriptionEs": [
|
||||
"No todas las clases necesitan tener un código CSS correspondiente. A veces creamos clases sólo con el propósito de seleccionar esos elementos más fácilmente usando jQuery.",
|
||||
"Dale a cada uno de tus elementos <code>button</code> la clase <code>target</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -1952,8 +2065,15 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Asígnales atributos de identificación (id) a tus elementos de Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Recuerda que, además de los atributos de clase, también puedes darle a cada uno de tus elementos un atributo <code>id</code>.",
|
||||
"Cada id debe ser único para un elemento específico y ser usado solamente una vez por página.",
|
||||
"Vamos a darle un id único a cada uno de nuestros elementos <code>div</code> que tienen la clase <code>well</code>.",
|
||||
"Recuerda que puedes darle a un elemento un id como el siguiente:",
|
||||
"<code><div class=\"well\" id=\"center-well\"></code>",
|
||||
"Dale al pozo de la izquireda el id <code>left-well</code>. Al pozo de la derecha, dale un <code>id</code> de <code>right-well</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -2002,8 +2122,12 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Etiqueta tus pozos de Bootstrap",
|
||||
"descriptionEs": [
|
||||
"Para que todo esté más claro, vamos a ponerle a todos nuestros pozos una etiqueta que sea igual a su id.",
|
||||
"Sobre tu pozo de la izquierda, dentro de su elemento <code>div</code> que tiene la clase <code>col-xs-6</code>, agrega un elemento <code>h4</code> con el texto <code>#left-well</code>.",
|
||||
"Ahora, sobre tu pozo de la derecha, dentro de su elemento <code>div</code> que tiene la clase <code>col-xs-6</code>, agrega un elemento <code>h4</code> con el texto <code>#right-well</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -2053,8 +2177,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Dale a cada elemento un ID único",
|
||||
"descriptionEs": [
|
||||
"También quisiéramos referirnos a cada botón por su id utilizando jQuery.",
|
||||
"Dale a cada uno de tus botones un id único, comenzando con <code>target1</code> y terminando con <code>target6</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -2104,8 +2231,11 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Etiqueta los botones con Bootstrap",
|
||||
"descriptionEs": [
|
||||
"De la misma forma en que etiquetamos nuestros pozos, ahora vamos a etiquetar nuestros botones.",
|
||||
"Dale a cada uno de tus elementos <code>button</code> un texto que corresponda con su <code>id</code>."
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
},
|
||||
|
|
@ -2154,8 +2284,13 @@
|
|||
"descriptionFr": [],
|
||||
"nameRu": "",
|
||||
"descriptionRu": [],
|
||||
"nameEs": "",
|
||||
"descriptionEs": [],
|
||||
"nameEs": "Usa elementos para explicar tu código",
|
||||
"descriptionEs": [
|
||||
"Cuando comencemos a usar jQuery, modificarmemos los elementos HTML sin necesidad de hacer cambios reales en el código HTML.",
|
||||
"Vamos a asegurarnos de que cualquier persona sepa que no deben modificar nada en este código directamente.",
|
||||
"Recuerda que puedes iniciar un comentario usando <code><!--</code> y terminarlo usando <code>--></code>",
|
||||
"Agrega un comentario al inicio de tu código HTML que diga <code>No hacer cambios en el código debajo de esta línea.</code>"
|
||||
],
|
||||
"namePt": "",
|
||||
"descriptionPt": []
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue