chore(i18n,curriculum): update translations (#43375)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908855
|
||||
title: Dale a cada elemento un id único
|
||||
title: Dale un id único a cada elemento
|
||||
challengeType: 0
|
||||
forumTopicId: 18191
|
||||
dashedName: give-each-element-a-unique-id
|
||||
@ -8,11 +8,11 @@ dashedName: give-each-element-a-unique-id
|
||||
|
||||
# --description--
|
||||
|
||||
También vamos a querer poder usar jQuery para apuntar a cada botón por su identificación única.
|
||||
También vamos a querer poder usar jQuery para seleccionar cada botón por su id único.
|
||||
|
||||
Da a cada uno de tus botones un id único, empezando con `target1` y terminando con `target6`.
|
||||
Dale a cada uno de tus botones un id único, empezando con `target1` y finalizando con `target6`.
|
||||
|
||||
Asegúrate de que `target1` a `target3` estén en `#left-well`, y `target4` a `target6` están en `#right-well`.
|
||||
Asegúrate de que `target1` a `target3` se encuentren en `#left-well` y `target4` a `target6` se encuentren en `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908746
|
||||
title: Aloja nuestra página dentro de un container-fluid de Bootstrap div
|
||||
title: Aloja nuestra página dentro de un container-fluid div de Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18198
|
||||
dashedName: house-our-page-within-a-bootstrap-container-fluid-div
|
||||
@ -8,7 +8,7 @@ dashedName: house-our-page-within-a-bootstrap-container-fluid-div
|
||||
|
||||
# --description--
|
||||
|
||||
Ahora asegurémonos de que todo el contenido de tu página sea compatible con dispositivos móviles.
|
||||
Ahora vamos a asegurarnos que todo el contenido de tu página es mobile-responsive.
|
||||
|
||||
Anidemos tu elemento `h3` dentro de un elemento `div` con la clase `container-fluid`.
|
||||
|
||||
@ -20,7 +20,7 @@ Tu elemento `div` debe tener la clase `container-fluid`.
|
||||
assert($('div').hasClass('container-fluid'));
|
||||
```
|
||||
|
||||
Cada uno de tus elementos `div` deben tener etiquetas de cierre.
|
||||
Cada uno de tus elementos `div` debe tener etiquetas de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908856
|
||||
title: Etiquetas Buttons Bootstrap
|
||||
title: Etiqueta botones de Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18222
|
||||
dashedName: label-bootstrap-buttons
|
||||
@ -8,9 +8,9 @@ dashedName: label-bootstrap-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
Al igual que hemos etiquetado nuestros "wells", queremos etiquetar nuestros botones.
|
||||
Así como etiquetamos nuestros "wells", también queremos etiquetar nuestros botones.
|
||||
|
||||
Da a cada uno de tus elementos `button` el texto que corresponde a su id.
|
||||
Dale a cada uno de tus elementos `button`, texto que corresponde a su id.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908854
|
||||
title: Etiqueta Wells de Boostrap
|
||||
title: Etiqueta wells de Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18223
|
||||
dashedName: label-bootstrap-wells
|
||||
@ -8,15 +8,15 @@ dashedName: label-bootstrap-wells
|
||||
|
||||
# --description--
|
||||
|
||||
Para mayor claridad, etiquetemos ambos `well` con sus ids.
|
||||
Para mayor claridad, vamos a etiquetar nuestros dos wells con sus ids.
|
||||
|
||||
Sobre tu "left-well", dentro del elemento `col-xs-6` `div`, agrega el elemento `h4` con el texto `#left-well`.
|
||||
Sobre tu "left-well", dentro de su elemento `div` `col-xs-6`, agrega un elemento `h4` con el texto `#left-well`.
|
||||
|
||||
Sobre tu "right-well", dentro del elemento `col-xs-6` `div`, agrega el elemento `h4` con el texto `#right-well`.
|
||||
Sobre tu "right-well", dentro de su elemento `div` `col-xs-6` agrega un elemento `h4` con el texto `#right-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes añadir un elemento `h4` para cada uno de sus elementos `<div class="col-xs-6">`.
|
||||
Debes agregar un elemento `h4` a cada uno de tus elementos `<div class="col-xs-6">`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908845
|
||||
title: Alinee elementos de formulario de forma responsiva con Bootstrap
|
||||
title: Alinea elementos de formulario de manera responsiva con Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18225
|
||||
required:
|
||||
@ -13,15 +13,15 @@ dashedName: line-up-form-elements-responsively-with-bootstrap
|
||||
|
||||
# --description--
|
||||
|
||||
Ahora coloquemos tu formulario `input` y tu `button`de envío en la misma línea. Lo haremos de la misma forma que lo hemos hecho anteriormente: usando un elemento `div` con la clase `row`, y otros elementos `div` dentro de el usando la clase `col-xs-*`.
|
||||
Ahora coloquemos tus `input` de formulario y tu `button` de envío en la misma línea. Vamos a hacer esto de la misma forma que antes: Usando un elemento `div` con la clase `row`, y otros elementos `div` dentro de este usando la clase `col-xs-*`.
|
||||
|
||||
Anida tanto el campo de texto `input` del formulario como el botón de envío `button` dentro de un `div` con la clase `row`. Incrusta tu campo de texto `input` del formulario dentro de un div con la clase `col-xs-7`. Incrusta tu botón de envió `button` del formulario dentro de un `div`con la clase `col-xs-5`.
|
||||
Coloca juntos tu campo de texto `input` y tu `button` de envío dentro de un `div` con la clase `row`. Anida tu campo de texto `input` dentro de un div con la clase `col-xs-7`. Anida tu `button` de envío del formulario dentro de un `div` con la clase `col-xs-5`.
|
||||
|
||||
Este es el ultimo desafío que haremos para nuestra aplicación de fotos de gatos por ahora. ¡Esperamos que hayas disfrutado aprendiendo Font Awesome, Bootstrap y diseño responsivo!
|
||||
Este es el ultima desafio que vamos a hacer para nuestro 'Cat Photo App' por ahora. ¡Esperamos que hayas disfrutado aprendiendo Font Awesome, Bootstrap y diseño responsivo!
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu botón de envío del formulario y la entrada de texto deben anidarse en un div con la clase `row`.
|
||||
Tu botón de envío del formulario y el campo de texto deben anidarse en un div con la clase `row`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -30,7 +30,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Tu entrada de texto del formulario debe estar anidada en un div con la clase `col-xs-7`.
|
||||
Tu campo de texto debe estar anidado en un div con la clase `col-xs-7`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-7:has(input[type="text"])').length > 0);
|
||||
@ -42,7 +42,7 @@ Tu botón de envío del formulario debe estar anidado en un div con la clase `co
|
||||
assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
|
||||
```
|
||||
|
||||
Todos sus elementos `div` deben tener etiquetas de cierre.
|
||||
Todos tus elementos `div` deben tener etiquetas de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08812
|
||||
title: Hacer que las imágenes se adapten a dispositivos móviles
|
||||
title: Haz que las imágenes se adapten a dispositivos móviles
|
||||
challengeType: 0
|
||||
forumTopicId: 18232
|
||||
dashedName: make-images-mobile-responsive
|
||||
@ -8,39 +8,39 @@ dashedName: make-images-mobile-responsive
|
||||
|
||||
# --description--
|
||||
|
||||
Primero, agregue una nueva imagen debajo de la existente. Establezca su atributo `src` en `https://bit.ly/fcc-running-cats`.
|
||||
Primero, agrega una nueva imagen debajo de la existente. Establece su atributo `src` a `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
Sería genial si esta imagen pudiera tener exactamente el ancho de la pantalla de nuestro teléfono.
|
||||
|
||||
Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase `img-responsive` a tus imágenes. Haga esto y la imagen debe ajustarse perfectamente al ancho de su página.
|
||||
Afortunadamente, con Bootstrap, todo lo que necesitamos hacer es agregar la clase `img-responsive` a nuestra imagen. Hazlo, y la imagen debería caber perfectamente en el ancho de tu página.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debe tener un total de dos imágenes.
|
||||
Debes tener un total de dos imágenes.
|
||||
|
||||
```js
|
||||
assert($('img').length === 2);
|
||||
```
|
||||
|
||||
Tu nueva imagen debería estar debajo de la anterior y tener la clase `img-responsive`.
|
||||
Tu nueva imagen debe estar debajo de la anterior y tener la clase `img-responsive`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').hasClass('img-responsive'));
|
||||
```
|
||||
|
||||
Tu nueva imagen no debería tener la clase `smaller-image`.
|
||||
Tu nueva imagen no debe tener la clase `smaller-image`.
|
||||
|
||||
```js
|
||||
assert(!$('img:eq(1)').hasClass('smaller-image'));
|
||||
```
|
||||
|
||||
Tu nueva imagen debe tener el atributo `src` en `https://bit.ly/fcc-running-cats`.
|
||||
Tu nueva imagen debe tener el atributo `src` con el valor `https://bit.ly/fcc-running-cats`.
|
||||
|
||||
```js
|
||||
assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats');
|
||||
```
|
||||
|
||||
Tu nuevo elemento `img` debe tener una etiqueta de cierre.
|
||||
Tu nuevo elemento `img` debe tener etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -13,11 +13,11 @@ dashedName: responsively-style-checkboxes
|
||||
|
||||
# --description--
|
||||
|
||||
Dado que las clases `col-xs-*` de Bootstrap son aplicables a todos los elementos `form`, ¡también puedes usarlas en tus casillas de verificación! De esta manera, las casillas de verificación se distribuirán uniformemente por toda la página, independientemente de la amplitud de la resolución de la pantalla.
|
||||
Dado que las clases de Bootstrap `col-xs-*` son aplicables a todos los elementos `form`, ¡también puedes usarlas para tus casillas de verificación! De esta manera, las casillas de verificación se distribuirán uniformemente por toda la página, independientemente de la amplitud de la resolución de la pantalla.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Anida las tres casillas de verificación en un elemento `<div class="row">`. Luego incrusta cada uno de ellos en un elemento `<div class="col-xs-4">`.
|
||||
Anida las tres casillas de verificación en un elemento `<div class="row">`. Luego, anida cada uno de ellos en un elemento `<div class="col-xs-4">`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -27,13 +27,13 @@ Todas las casillas de verificación deben anidarse dentro de un `div` con la cla
|
||||
assert($('div.row:has(input[type="checkbox"])').length > 0);
|
||||
```
|
||||
|
||||
Cada casilla de verificación debe inscrustarse dentro de un `div` con la clase `row`.
|
||||
Cada casilla de verificación debe anidarse dentro de un `div` con la clase `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
|
||||
```
|
||||
|
||||
Todos los elementos `div` deben tener etiquetas de cierre.
|
||||
Todos tus elementos `div` deben tener etiquetas de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedb08845
|
||||
title: Botones radio con estilo responsivo
|
||||
title: Botones de radio con estilo responsivo
|
||||
challengeType: 0
|
||||
forumTopicId: 18270
|
||||
required:
|
||||
@ -13,27 +13,27 @@ dashedName: responsively-style-radio-buttons
|
||||
|
||||
# --description--
|
||||
|
||||
¡También puedes usar las clases `col-xs-*` de Bootstrap en los elementos `form`! De esta manera, nuestros botones de radio se distribuirán uniformemente por toda la página, independientemente del ancho de la resolución de la pantalla.
|
||||
¡Puedes utilizar también las clases `col-xs-*` de Bootstrap en elementos `form`! De esta forma nuestros botones de radio se distribuirán uniformemente a través de la página, sin importar el ancho de la resolución de pantalla.
|
||||
|
||||
Anida ambos botones de radio dentro de un elemento `<div class="row">`. Luego anida cada uno de ellos en un elemento `<div class="col-xs-6">`.
|
||||
Anida tus dos botones de radio dentro de un elemento `<div class="row">`. Luego, anida cada uno de ellos dentro de un elemento `<div class="col-xs-6">`.
|
||||
|
||||
**Nota:** Como recordatorio, los botones de radio son `entradas`, elementos de tipo `radio`.
|
||||
**Nota:** Como recordatorio, los botones de radio son elementos `input` con el valor de tipo `radio`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Todas las casillas de radio deben anidarse dentro de un `div` con la clase `row`.
|
||||
Todos tus botones de radio deben estar anidados dentro de un `div` con la clase `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(input[type="radio"])').length > 0);
|
||||
```
|
||||
|
||||
Cada uno de tus botones de radio debe inscrustarse dentro un `div` con la clase `col-xs-6`.
|
||||
Cada uno de tus botones de radio debe estar anidado dentro de su propio `div` con la clase `col-xs-6`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
|
||||
```
|
||||
|
||||
Todos sus elementos `div` deben tener etiquetas de cierre.
|
||||
Todos tus elementos `div` deben tener etiquetas de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: split-your-bootstrap-row
|
||||
|
||||
# --description--
|
||||
|
||||
Ahora que tenemos una fila de Bootstrap, vamos a dividirla en dos columnas para albergar nuestros elementos.
|
||||
Ahora que tenemos una fila de Bootstrap, vamos a dividirla en dos columnas para hospedar nuestros elementos.
|
||||
|
||||
Crea dos elementos `div` dentro de tu fila, ambos con la clase `col-xs-6`.
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908845
|
||||
title: Estilo de entradas de texto como controles de formulario
|
||||
title: Estiliza entradas de texto como controles de formulario
|
||||
challengeType: 0
|
||||
forumTopicId: 18312
|
||||
required:
|
||||
@ -13,27 +13,27 @@ dashedName: style-text-inputs-as-form-controls
|
||||
|
||||
# --description--
|
||||
|
||||
Puedes añadir el icono `fa-paper-plane` de Font Awesome, agregando `<i class="fa fa-paper-plane"></i>` dentro del elemento `button` de tipo `submit`.
|
||||
Puedes agregar el icono `fa-paper-plane` de Font Awesome agregando `<i class="fa fa-paper-plane"></i>` dentro de tu elemento `button` de envío.
|
||||
|
||||
Da al input(campo de entrada de texto) de tu formulario una clase `form-control`. Da el botón de envío(submit) de tu formulario las clases `btn btn-primary`. También da a este botón el icono de Font Awesome con `fa-paper-plane`.
|
||||
Dale a tu campo de entrada de texto la clase `form-control`. Dale a tu botón de envío de formulario las clases `btn btn-primary`. También asígnale a este botón el icono de Font Awesome `fa-paper-plane`.
|
||||
|
||||
Todo el texto en los elementos `<input>`, `<textarea>`, y `<select>` con la clase `.form-control` deben tener un ancho del 100%.
|
||||
Todos los elementos textuales `<input>`, `<textarea>`, y `<select>` con la clase `.form-control` tienen un ancho de 100%.
|
||||
|
||||
# --hints--
|
||||
|
||||
El botón de envío submit en tu formulario debe tener las clases `btn btn-primary`.
|
||||
El botón de envío en tu formulario debe tener las clases `btn btn-primary`.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]').hasClass('btn btn-primary'));
|
||||
```
|
||||
|
||||
Debes añadir `<i class="fa fa-paper-plane"></i>` dentro de tu elemento button.
|
||||
Debes añadir un `<i class="fa fa-paper-plane"></i>` dentro de tu elemento `button`.
|
||||
|
||||
```js
|
||||
assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
|
||||
```
|
||||
|
||||
El texto en `input` en tu formulario debe tener la clase `form-control`.
|
||||
El `input` de tipo texto en tu formulario debe tener la clase `form-control`.
|
||||
|
||||
```js
|
||||
assert($('input[type="text"]').hasClass('form-control'));
|
||||
|
||||
@ -8,11 +8,11 @@ dashedName: taste-the-bootstrap-button-color-rainbow
|
||||
|
||||
# --description--
|
||||
|
||||
La clase `btn-primary` es el color principal que usarás en tu aplicación. Es útil para resaltar las acciones que quieres que tome tu usuario.
|
||||
La clase `btn-primary` es el color principal que usarás en tu aplicación. Es útil para resaltar acciones que deseas que tu usuario realice.
|
||||
|
||||
Reemplaza la clase de Bootstrap `btn-default` con `btn-primary` en tu botón.
|
||||
Reemplaza la clase `btn-default` de Bootstrap por `btn-primary` en tu botón.
|
||||
|
||||
Ten en cuenta que este botón todavía necesitará las clases `btn` y `btn-block`.
|
||||
Ten en cuenta que este botón aún necesitará las clases `btn` y `btn-block`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -14,11 +14,11 @@ Puedes usar spans para crear elementos en línea. ¿Recuerdas cuando usamos la c
|
||||
|
||||
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>botón btn-block</button>
|
||||
|
||||
Esto ilustra la diferencia entre un elemento "en línea" y un elemento de "bloque".
|
||||
Eso ilustra la diferencia entre un elemento "inline" y un elemento "block".
|
||||
|
||||
Usando el elemento en línea `span`, puedes alinear varios elementos, e incluso estilizar diferentes partes de la misma línea de manera diferente.
|
||||
|
||||
Usando un elemento `span`, anida la palabra `love` dentro del elemento `p` que actualmente contiene el texto `Things cats love`. Luego asigna al `span` la clase `text-danger` para hacer al texto rojo.
|
||||
Usando un elemento `span`, anida la palabra `love` dentro del elemento `p` que actualmente tiene el texto `Things cats love`. Luego dale a `span` la clase `text-danger` para cambiar el texto a rojo.
|
||||
|
||||
Así es como harías esto para el elemento `p` que tiene el texto `Top 3 things cats hate`:
|
||||
|
||||
@ -34,7 +34,7 @@ Tu elemento `span` debe estar dentro de tu elemento `p`.
|
||||
assert($('p span') && $('p span').length > 0);
|
||||
```
|
||||
|
||||
Tu elemento `span` solo debe tener el texto `love`.
|
||||
Tu elemento `span` debe tener solo el texto `love`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aec908857
|
||||
title: Use los comentarios para aclarar el código
|
||||
title: Usa comentarios para aclarar el código
|
||||
challengeType: 0
|
||||
forumTopicId: 18347
|
||||
dashedName: use-comments-to-clarify-code
|
||||
@ -8,35 +8,35 @@ dashedName: use-comments-to-clarify-code
|
||||
|
||||
# --description--
|
||||
|
||||
Cuando comencemos a utilizar jQuery, modificaremos los elementos HTML sin necesidad de cambiarlos en HTML.
|
||||
Cuando empecemos a usar jQuery, vamos a modificar elementos HTML sin necesidad de cambiarlos en HTML.
|
||||
|
||||
Asegurémonos de que todos sepan que en realidad no deben modificar nada de este código directamente.
|
||||
Vamos a asegurarnos de que todos sepan que no deben modificar nada de este código directamente.
|
||||
|
||||
Recuerda que puedes comenzar un comentario con `<!--` y terminar con `-->`
|
||||
Recuerda que puedes empezar un comentario con `<!--` y terminarlo con `-->`
|
||||
|
||||
Añade un comentario en la parte superior de tu HTML que diga `Code below this line should not be changed`
|
||||
Agrega un comentario en la parte superior de tu HTML que diga `Code below this line should not be changed`
|
||||
|
||||
# --hints--
|
||||
|
||||
En la parte superior de tu HTML debe comenzar un comentario con `<!--`.
|
||||
Debes comenzar un comentario en la parte superior de tu HTML con `<!--`.
|
||||
|
||||
```js
|
||||
assert(code.match(/^\s*<!--/));
|
||||
```
|
||||
|
||||
El comentario debe contener el texto `Code below this line should not be changed`.
|
||||
Tu comentario debe tener el texto `Code below this line should not be changed`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
||||
```
|
||||
|
||||
Debe cerrar el comentario con `-->`.
|
||||
Debes cerrar tu comentario con`-->`.
|
||||
|
||||
```js
|
||||
assert(code.match(/-->.*\n+.+/g));
|
||||
```
|
||||
|
||||
Debe tener el mismo número de aperturas y cierres de comentario.
|
||||
Debes tener el mismo número de aperturas y cierres de comentarios.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9acde08712
|
||||
title: Utiliza diseño responsivo con contenedores de fluido Bootstrap
|
||||
title: Utiliza diseño responsivo con contenedores de fluido de Bootstrap
|
||||
challengeType: 0
|
||||
forumTopicId: 18362
|
||||
dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
@ -8,19 +8,19 @@ dashedName: use-responsive-design-with-bootstrap-fluid-containers
|
||||
|
||||
# --description--
|
||||
|
||||
En la sección de HTML5 y CSS de freeCodeCamp, creamos una aplicación de fotos de gatos. Ahora vamos de vuelta a la aplicación. Esta vez, lo estilizaremos usando el popular framework CSS responsivo de Bootstrap.
|
||||
En la seccion de HTML5 y CSS de freeCodeCamp construimos un 'Cat Photo App'. Ahora volvamos a él. Esta vez, vamos a estilizarlo utilizando el popular framework CSS responsivo de Bootstrap.
|
||||
|
||||
Bootstap averiguará la anchura de tu pantalla y responderá redimensionando los elementos HTML, de aquí el nombre <dfn>diseño responsivo</dfn>.
|
||||
Bootstrap averiguará cuan ancha es tu pantalla y responderá redimensionando tus elementos HTML - de ahí el nombre <dfn>diseño responsivo</dfn>.
|
||||
|
||||
Con diseño responsivo, no hay necesidad de diseñar una versión móvil de tu sitio web. Se verá bien en dispositivos con pantallas de cualquier anchura.
|
||||
Con diseño responsivo, no hay necesidad de diseñar una versión móvil de tu sitio web. Se verá bien en dispositivos con pantallas de cualquier ancho.
|
||||
|
||||
Puedes añadir Bootstrap a cualquier aplicación al agregar el siguiente código encima de tu HTML:
|
||||
Puedes añadir Bootstrap a cualquier aplicación agregando el siguiente código en la parte superior de tu HTML:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
|
||||
```
|
||||
|
||||
En este caso, ya lo añadimos a esta página. Ten en cuenta que para cerrar la etiqueta `link` puedes utilizar `>` o `/>`.
|
||||
En este caso, ya lo hemos añadido por ti en esta página, tras bambalinas. Ten en cuenta que para cerrar la etiqueta `link` puedes utilizar `>` o `/>`.
|
||||
|
||||
Para comenzar, debemos anidar todo nuestro HTML (menos la etiqueta `link` y el elemento `style`) en un elemento `div` con la clase `container-fluid`.
|
||||
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Todos los elementos HTML después de la etiqueta de cierre `style` deben anidarse en `.container-fluid`.
|
||||
Todos los elementos HTML después de la etiqueta de cierre de `style` deben estar anidados dentro de `.container-fluid`.
|
||||
|
||||
```js
|
||||
assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length);
|
||||
|
||||
@ -10,31 +10,31 @@ dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
|
||||
|
||||
Bootstrap utiliza un sistema responsivo de cuadrilla de 12 columnas, el cual hace que sea fácil poner elementos en dos filas y especificar la anchura relativa de cada elemento. La mayoría de las clases de Bootstrap pueden ser aplicadas a un elemento `div`.
|
||||
|
||||
Bootstrap tiene diferentes atributos de anchura de columna que utiliza con respecto a la anchura de la pantalla del usuario. Por ejemplo, los teléfonos tienen pantallas más angostas y las computadoras portátiles tienen pantallas más anchas.
|
||||
Bootstrap tiene diferentes atributos de ancho de columna que usa dependiendo cuan ancha es la pantalla del usuario. Por ejemplo, los teléfonos tienen pantallas más angostas y las laptops tienen pantallas más anchas.
|
||||
|
||||
Ten como ejemplo la clase de Bootstrap `col-md-*`. Aquí, `md` significa mediano y `*` es un número que especifica cuántas columnas de ancho deben tener los elementos. En este caso, se especifica el ancho de la columna de un elemento en una pantalla de tamaño mediano, como un portátil.
|
||||
Tomemos por ejemplo la clase de Bootstrap `col-md-*`. Aquí, `md` significa mediano y `*` es un número que especifica cuántas columnas de ancho deben tener los elementos. En este caso, el ancho de columna de un elemento en una pantalla de tamaño mediano, como una laptop, está siendo especificado.
|
||||
|
||||
En la aplicación de fotos de gatitos que estamos creando, utilizaremos `col-xs-*`, donde `xs` significa extra pequeño (como una pantalla de teléfono celular extra pequeña) y `*` es el número de columnas que especifica cuántas columnas de ancho debe tener un elemento.
|
||||
En el 'Cat Photo App' que estamos armando, vamos a usar `col-xs-*`, donde `xs` significa extra pequeño ("extra small" como una pantalla de teléfono), y `*` es el número de columnas que va a tomar el elemento en anchura.
|
||||
|
||||
Pon los botones `Like`, `Info` y `Delete` de lado a lado anidando los tres dentro de un elemento `<div class="row">`, luego cada uno de ellos dentro de un elemento `<div class="col-xs-4">`.
|
||||
Pon los botones `Like`, `Info` y `Delete` lado a lado, anidando los tres dentro de un elemento `<div class="row">`, luego, cada uno de ellos dentro de un elemento `<div class="col-xs-4">`.
|
||||
|
||||
La clase `row` se aplica a un `div` y los mismos botones pueden anidarse dentro de ella.
|
||||
La clase `row` es aplicada a un `div`, y los botones mismos pueden ser anidados dentro de él.
|
||||
|
||||
# --hints--
|
||||
|
||||
Todos los botones deben estar anidados dentro del mismo elemento `div` con la clase `row`.
|
||||
Todos tus botones deben estar anidados dentro del mismo elemento `div` con la clase `row`.
|
||||
|
||||
```js
|
||||
assert($('div.row:has(button)').length > 0);
|
||||
```
|
||||
|
||||
Cada uno de los botones de Bootstap debe anidarse dentro de su propio elemento `div` con la clase `col-xs-4`.
|
||||
Cada uno de tus botones de Bootstrap deben estar anidados dentro de su propio elemento `div` con la clase `col-xs-4`.
|
||||
|
||||
```js
|
||||
assert($('div.col-xs-4:has(button)').length > 2);
|
||||
```
|
||||
|
||||
Cada uno de los elementos `button` debe tener una etiqueta de cierre.
|
||||
Cada uno de tus elementos `button` deben tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -44,7 +44,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Cada uno de loselementos `div` debe tener una etiqueta de cierre.
|
||||
Cada uno de tus elementos `div` deben tener una etiqueta de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
|
||||
|
||||
# --description--
|
||||
|
||||
Bootstrap viene con diferentes colores predefinidos para botones. La clase `btn-danger` es el color del botón que usarás para notificar a los usuarios que el botón realiza una acción destructiva, como eliminar una foto de gato.
|
||||
Bootstrap viene con varios colores predefinidos para botones. La clase `btn-danger` es el color del botón que usarás para notificar a los usuarios que el botón realiza una acción destructiva, como eliminar la foto de un gato.
|
||||
|
||||
Crea un botón con el texto `Delete` y dale la clase `btn-danger`.
|
||||
|
||||
@ -22,7 +22,7 @@ Debes crear un nuevo elemento `button` con el texto `Delete`.
|
||||
assert(new RegExp('Delete', 'gi').test($('button').text()));
|
||||
```
|
||||
|
||||
Todos tus botones de Bootstrap deben tener clases `btn` y `btn-block`.
|
||||
Todos tus botones de Bootstrap deben tener las clases `btn` y `btn-block`.
|
||||
|
||||
```js
|
||||
assert($('button.btn-block.btn').length > 2);
|
||||
@ -34,7 +34,7 @@ Tu nuevo botón debe tener la clase `btn-danger`.
|
||||
assert($('button').hasClass('btn-danger'));
|
||||
```
|
||||
|
||||
Todos los elementos `button` deben tener etiquetas de cierre.
|
||||
Todos tus elementos `button` deben tener etiquetas de cierre.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user