"title":"Introduction to the Bootstrap Challenges",
"description":[
[
"",
"",
"Bootstrap is a front-end framework used to design responsive web pages and web applications. It takes a mobile-first approach to web development. Bootstrap includes pre-built CSS styles and classes, plus some JavaScript functionality.",
""
],
[
"",
"",
"Bootstrap uses a responsive 12 column grid layout and has design templates for:<br><br><ul><li>buttons</li><li>images</li><li>tables</li><li>forms</li><li>navigation</li></ul><br>This section introduces some of the ways to use Bootstrap in your web projects.",
"In the HTML5 and CSS section of freeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.",
"In this case, we've already added it for you to this page behind the scenes. Note that using either <code>></code> or <code>/></code> to close the <code>link</code> tag is acceptable.",
"To get started, we should nest all of our HTML (except the <code>link</code> tag and the <code>style</code> element) in a <code>div</code> element with the class <code>container-fluid</code>."
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure your <code>div</code> element has a closing tag.');",
"assert($(\".container-fluid\").children().length >= 8, 'message: Make sure you have nested all HTML elements after the closing <code>style</code> tag in <code>.container-fluid</code>.');"
"title":"Usa diseño adaptativo con los contenedores fluidos de Bootstrap",
"description":[
"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 incluyendo el siguiente código al inicio de tu HTML:",
"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>."
]
},
"fr":{
"title":"Un design adaptatif (responsive design) utilisant les conteneurs fluides de Bootstrap",
"description":[
"Revenons à notre application de photos de chats. Cette fois-ci, nous allons lui donner un style grâce au renommé framework CSS Bootstrap.",
"Bootstrap saura reconnaître la largeur de notre écran et s'y adapter en redimensionnant les éléments HTML - d'où le nom <code>Responsive Design</code> (design adaptatif).",
"Avec le design responsive, il n'y a pas besoin de créer de version mobile de votre site. Il restera bien sur tous les appareils quelle que soit la taille de leurs écrans.",
"Vous pouvez ajouter Bootstrap à n'importe quelle application simplement en incluant le code suivant en haut de votre HTML:",
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page."
"assert($(\"img\").length === 2, 'message: You should have a total of two images.');",
"assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), 'message: Your new image should be below your old one and have the class <code>img-responsive</code>.');",
"assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), 'message: Your new image should not have the class <code>smaller-image</code>.');",
"assert($(\"img:eq(1)\").attr(\"src\") === \"https://bit.ly/fcc-running-cats\", 'message: Your new image should have a <code>src</code> of <code>https://bit.ly/fcc-running-cats</code>.');",
"assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2, 'message: Make sure your new <code>img</code> element has a closing angle bracket.');"
"title":"Haz que las imágenes sean adaptativas en dispositivos móviles",
"description":[
"Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo <code>src</code> sea <code>https://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."
]
},
"fr":{
"title":"Rendre des images adaptatives aux appareils mobiles",
"description":[
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page.",
"D'abord, ajoutez une nouvelle image en dessous de celle qui eiste dejà. Changez l'attribut <code>src</src> en <code>https://bit.ly/fcc-running-cats</code>.",
"Ce serait absolument super si notre image pouvait être exactement de la largeur de l'écran du téléphone.",
"Heureusement, avec Bootstrap, il faut seulement ajouter la classe <code>img-responsive</code> à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page."
"Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class <code>text-center</code> to our <code>h2</code> element.",
"assert($(\"h2\").hasClass(\"text-center\"), 'message: Your <code>h2</code> element should be centered by applying the class <code>text-center</code>');",
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should still have the class <code>red-text</code>');"
"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:",
"Maintenant que wous utilisons Bootstrap, nous pouvons centrer notre entête pour qu'il ait une meilleure apparence. Nous devons seulement ajouter la classe <code>text-center</code> à notre élément <code>h2</code>.",
"Souvenez vous que vous pouvez utiliser plusieurs classes pour un même élément en les séparant avec un espace, comme ceci:",
"assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()), 'message: Create a new <code>button</code> element with the text \"Like\".');",
"assert($(\"button\").hasClass(\"btn\"), 'message: Your new button should have the class <code>btn</code>.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
"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\"."
]
},
"fr":{
"title":"Créer un bouton avec Bootstrap",
"description":[
"Bootstrap possède ses propres styles pour les éléments <code>button</code>, qui sont beaucoup plus beaux que ceux issus du HTML seul.",
"Créez un nouvel élément <code>button</code> en dessous de votre grande photo de chaton. Donnez lui comme classe <code>btn</code> et comme texte \"Like\"."
"By making them block elements with the additional class of <code>btn-block</code>, your button will stretch to fill your page's entire horizontal space and any elements following it will flow onto a \"new line\" below the block.",
"assert($(\"button\").hasClass(\"btn\"), 'message: Your button should still have the class <code>btn</code>.');",
"assert($(\"button\").hasClass(\"btn-block\"), 'message: Your button should have the class <code>btn-block</code>.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
"Haciéndolos bloquean elementos con la clase adicional de <code>btn-block</code>, el botón se amplía para llenar toda espacio horizontal de la página y los elementos siguientes fluirá sobre una \"nueva línea\" debajo del bloque .",
"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."
]
},
"fr":{
"title":"Créer un bouton bloc Bootstrap",
"description":[
"Normalement , vos éléments de <code>button</code> avec une classe de <code>btn</code> ne sont aussi larges que le texte qu'ils contiennent . Par exemple:",
"En leur faisant bloquer les éléments avec la classe supplémentaire de <code>btn-block</code>, votre bouton étirer pour remplir tout l'espace horizontal de votre page et tous les éléments suivants, il coulera sur une \"nouvelle ligne\" en dessous du bloc .",
"assert($(\"button\").hasClass(\"btn-primary\"), 'message: Your button should have the class <code>btn-primary</code>.');",
"assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'message: Your button should still have the <code>btn</code> and <code>btn-block</code> classes.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
"title":"Prueba el arcoíris de colores para botones que te ofrece Bootstrap",
"description":[
"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>."
]
},
"fr":{
"title":"Goutez à l'arc en ciel de couleurs des boutons de Bootstrap",
"description":[
"La classe <code>btn-primary</code> est la couleur principale que vous utiliserez dans votre application. Elle est utile pour mettre en valeur les actions que vous voulez faire réaliser par vos utilisateurs.",
"Ajoutez la classe Bootstrap <code>btn-primary</code> à votre bouton.",
"Notez que ce bouton a toujours besoin des classes <code>btn</code> et <code>btn-block</code>"
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.",
"Create a new block-level Bootstrap button below your \"Like\" button with the text \"Info\", and add Bootstrap's <code>btn-info</code> and <code>btn-block</code> classes to it.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
"assert(new RegExp(\"info\",\"gi\").test($(\"button\").text()), 'message: Create a new <code>button</code> element with the text \"Info\".');",
"assert($(\"button.btn-block.btn\").length > 1, 'message: Both of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.');",
"assert($(\"button\").hasClass(\"btn-info\"), 'message: Your new button should have the class <code>btn-info</code>.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
"title":"Señala acciones opcionales con botones informativos",
"description":[
"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>."
]
},
"fr":{
"title":"Indiquez les actions optionelles avec des boutons informatifs",
"description":[
"Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe <code>btn-info</code> est utilisée pour indiquer des actions optionelles pour vos utilisateurs.",
"Créez un nouveau bouton Bootstrap bloc en dessous de votre bouton \"Like\" avec le texte \"Info\" et donnez lui les classes Bootstrap <code>btn-info</code> et <code>btn-block</code>.",
"Notez que ces boutons ont toujours besoins des classes <code>btn</code> and <code>btn-block</code>."
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
"Create a button with the text \"Delete\" and give it the class <code>btn-danger</code>.",
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
"assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'message: Create a new <code>button</code> element with the text \"Delete\".');",
"assert($(\"button.btn-block.btn\").length > 2, 'message: All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.');",
"assert($(\"button\").hasClass(\"btn-danger\"), 'message: Your new button should have the class <code>btn-danger</code>.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
"title":"Advierte a tus usuarios sobre acciones peligrosas",
"description":[
"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>."
]
},
"fr":{
"title":"Prévenez vos utilisateurs d'une action dangereuse",
"description":[
"Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe <code>btn-danger</code> est utilisée pour indiquer aux utilisateurs que le bouton actionne un processus destructif comme supprimer une photo de chat.",
"Créez un bouton ayant le texte \"Delete\" et donnez lui la classe <code>btn-danger</code>.",
"Notez que ces boutons ont toujours besoins des classes <code>btn</code> and <code>btn-block</code>."
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code><div class=\"row\"></code> element, then each of them within a <code><div class=\"col-xs-4\"></code> element.",
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
"assert($(\"div.row:has(button)\").length > 0, 'message: Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.');",
"assert($(\"div.col-xs-4:has(button)\").length > 2, 'message: Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure each of your <code>button</code> elements has a closing tag.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
"title":"Usa la cuadrícula de Bootstrap para poner elementos lado a lado",
"description":[
"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=\"https://v4-alpha.getbootstrap.com/layout/grid/#example-stacked-to-horizontal\" target=\"_blank\"><img class=\"img-responsive\" src=\"//i.imgur.com/FaYuui8.png\" title=\"Haga clic para ver la documentación rejilla Bootstrap\" 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."
]
},
"fr":{
"title":"Utilisez la grille de Bootstrap pour mettre les éléments côte-à-côte.",
"description":[
"Bootstrap utilise un système de grille adaptative, qui rend plus simple le placement des éléments en rangées et la spécification de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être associés à un élément <code>div</code>",
"Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:",
"<a href=\"https://v4-alpha.getbootstrap.com/layout/grid/#example-stacked-to-horizontal\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Cliquez pour voir la documentation de la grille Bootstrap\" alt=\"Une image illustrant le système de grille Bootstrap\"></a>",
"Notez que dans cet exemple, nous avons utilisé la classe <code>col-md-*</code>. Ici, <code>md</code> signifie medium, et <code>*</code> donne le nombre de colonnes en largeur de l'élément. Dans le cas présenté, on a défini la largeur en colonnes d' un élément sur un écrand de taille medium, comme un ordinateur portable.",
"Dans l'application de photos de chats que nous sommes en train de construire, nous utiliserons <code>col-xs-*</code>, où <code>xs</code> signifie extrêmement petit (comme un écran de téléphone mobile), et <code>*</code> est le nombre de colonnes en largeur de l'élément.",
"Mettez les boutons <code>Like</code>, <code>info</code> et <code>Delete</code> côte-à-côte en les enveloppant tous dans un élément <code><div class=\"row\"></code>, puis chacun d'entre eux dans un élément <code><div class=\"col-xs-4\"></code> element.",
"La classe <code>row</code> est donnée à un <code>div</code>, et les boutons peuvent être insérés à l'intérieur de celui-ci."
"We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.",
"Delete the <code>.red-text</code>, <code>p</code>, and <code>.smaller-image</code> CSS declarations from your <code>style</code> element so that the only declarations left in your <code>style</code> element are <code>h2</code> and <code>thick-green-border</code>.",
"Then delete the <code>p</code> element that contains a dead link. Then remove the <code>red-text</code> class from your <code>h2</code> element and replace it with the <code>text-primary</code> Bootstrap class.",
"assert(!$(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should no longer have the class <code>red-text</code>.');",
"assert($(\"h2\").hasClass(\"text-primary\"), 'message: Your h2 element should now have the class <code>text-primary</code>.');",
"assert(!$(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your paragraph elements should no longer use the font <code>Monospace</code>.');",
"assert(!$(\"img\").hasClass(\"smaller-image\"), 'message: Remove the <code>smaller-image</code> class from your top image.');",
"assert($(\".img-responsive\").length > 1, 'message: Add the <code>img-responsive</code> class to your top image.');"
"title":"Reemplaza el CSS personalizado por Bootstrap",
"description":[
"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>."
]
},
"fr":{
"title":"Remplacez le CSS personnalisé par les styles Bootstrap",
"description":[
"Nous pouvons nettoyer notre code et rendre le look de notre appli Cat Photos plus conventionnel en utilisant les styles intégrés à Bootstrap à la place des styles personnalisés que nous avons créés auparavant.",
"Ne vous inquiétez pas - nous auront beaucoup de temps pour personnaliser notre CSS plus tard.",
"Supprimez les déclarations CSS <code>.red-text</code>, <code>p</code>, et <code>.smaller-image</code> de votre élément <code>style</code> pour que les seules déclarations restantes dans l'élément <code>style</code> soient <code>h2</code> et <code>thick-green-border</code>.",
"Ensuite supprimez l'élément <code>p</code> contenant un lien fantôme. Puis enlevez la classe <code>red-text</code> de votre élément <code>h2</code> et remplacez la par la classe Bootstrap <code>text-primary</code>",
"Enfin, enlevez la classe \"smaller-image\" dde votre premier élément <code>img</code> et remplacez le par la classe <code>img-responsive</code>."
"<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
"assert($(\"p span\") && $(\"p span\").text().match(/love/i) && !$(\"p span\").text().match(/Things cats/i), 'message: Your <code>span</code> element should have just the text <code>love</code>.');",
"assert($(\"span\").hasClass(\"text-danger\"), 'message: Your <code>span</code> element should have class <code>text-danger</code>.');",
"assert(code.match(/<\\/span>/g) && code.match(/<span/g) && code.match(/<\\/span>/g).length === code.match(/<span/g).length, 'message: Make sure your <code>span</code> element has a closing tag.');"
"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=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//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\":",
"title":"Utiliser Spans pour les éléments \"Inline\"",
"description":[
"Vous pouvez utiliser les spans pour créer des éléments inline. Vous rappelez vous quand nous avions utilisé la classe <code>btn-block</code> pour remplir la rangée entière?",
"Cette image illustre la différence entre les éléments <code>inline</code> (en ligne) et les éléments <code>block-level</code> (de blocs):",
"<a href=\"https://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour élargir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, c'est centré. En dessous il y a un bouton \"block-level\", qui s'étire à tout l'espace horizontal.'></a>",
"En utilisant un élément <code>span</code>, vous pouvez mettre ensemble plusieurs éléments, et même donner un style différent à plusieurs parties d'un même élément",
"Nichez le mot \"love\" dans votre élément \"Things cats love\" en dessous dans un élément <code>span</code>; Ensuite donnez à ce <code>span</code> la classe <code>text-danger</code> pour rendre le texte rouge.",
"Il faudrait que vous fassiez ainsi pour l'élément \"Top 3 things cats hate\":",
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
"Nest your first image and your <code>h2</code> element within a single <code><div class=\"row\"></code> element. Nest your <code>h2</code> element within a <code><div class=\"col-xs-8\"></code> and your image in a <code><div class=\"col-xs-4\"></code> so that they are on the same line.",
"assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'message: Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.');",
"assert($(\"div.col-xs-4:has(img)\").length > 0 && $(\"div.col-xs-4:has(div)\").length === 0, 'message: Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.');",
"assert($(\"div.col-xs-8:has(h2)\").length > 0 && $(\"div.col-xs-8:has(div)\").length === 0, 'message: Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
"Crearemos un encabezado simple para nuestra aplicación de fotos de gatos poniendo el título y la relajante imagen del gato 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=\"//i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//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?"
]
},
"fr":{
"title":"Créer un entête personalisé",
"description":[
"Notice how the image is now just the right size to fit along the text?",
"Nous allons réaliser un entête tout simple pour notre appli Cat Photo App en plaçant le titre et l'image de chat relaxante dans la même rangée.",
"Rappelez-vous, Bootstrap utilise un système de grille adaptative, qui rend facile le placement des éléments en rangées et la définition de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être appliquées à un élément <code>div</code>.",
"Voici un diagramme du fonctionnement de la grille à 12 colonnes de Bootstrap:",
"<a href=\"https://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour élargir\" alt=\"Une image illlustrant le système de grille de Bootstrap\"></a>",
"Notez que dans cet exemple, on utilise la classe <code>col-md-*</code>. Ici <code>md</code> signifie medium, et <code>*</code> est un nombre spécifiant le nombre de colonnes en largeur que l'élément devrait avoir.",
"Enveloppez votre première image et votre élément <code>h2</code> dans un seul élément <code><div class=\"row\"></code>. Mettez l'élément <code>h2</code> dans un <code><div class=\"col-xs-8\"></code> et votre image dans un <code><div class=\"col-xs-4\"></code> pour qu'ils soient sur la même ligne.",
"Voyez vous comme l'image est maintenant exactement ajustée à la bonne taille pour être à côté du texte?"
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"The <code>i</code> element was originally used to make other elements italic, but is now commonly used for icons. You can add the Font Awesome classes to the <code>i</code> element to turn it into an icon, for example:",
"Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giving it an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>."
"assert($(\"i\").is(\".fa.fa-thumbs-up\") || $(\"span\").is(\".fa.fa-thumbs-up\"), 'message: Add an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>.');",
"assert(($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\")) || ($(\"span.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'message: Your <code>fa-thumbs-up</code> icon should be located within the Like button.');",
"assert($(\"button\").children(\"i\").length > 0 || $(\"button\").children(\"span\").length > 0, 'message: Nest your <code>i</code> element within your <code>button</code> element.');",
"assert(code.match(/<\\/i>|<\\/span>/g), 'message: Make sure your icon element has a closing tag.');"
"title":"Agrega iconos de Font Awesome a los botones",
"description":[
"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.",
"Puedes añadir Font Awesome a cualquier aplicación sólo incluyendo y agregando el siguiente código al comienzo de tu HTML:",
"En este caso, ya lo hemos agregado por tí a esta página tras bambalinas.",
"El elemento <code>i</code> originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento <code>i</code> para convertirlo en un ícono, por ejemplo:",
"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>."
]
},
"fr":{
"title":"Ajouter des icônes Font Awesome à nos boutons",
"description":[
"Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format <code>.svg</code>. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.",
"Vous poyvez ajouter Font Awesome à n'importe quell application en ajoutant le code suivant en haut de votre HTML:",
"Ici, nous l'avons déjà ajouté pour vous dans le back-office.",
"La balise <code>i</code> eétait utilisé à la base pour mettre les autres éléments en italique, mais maintenant elle est utilisée pour les icones. Vous ajoutez des classes Font Awesome à un élément <code>i</code> pour les les transformer en icones, par exemple:",
"Utilisez Font Awesome pour ajouter un icone <code>thumbs-up</code> à votre bouton de like en lui donnant un élément <code>i</code> ayant les classes <code>fa</code> et <code>fa-thumbs-up</code>."
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"assert($(\".btn-info > i\").is(\".fa.fa-info-circle\") || $(\".btn-info > span\").is(\".fa.fa-info-circle\"), 'message: You should add a <code><i class=\"fa fa-info-circle\"></i></code> within your info button element.');",
"assert($(\".btn-danger > i\").is(\".fa.fa-trash\") || $(\".btn-danger > span\").is(\".fa.fa-trash\"), 'message: You should add a <code><i class=\"fa fa-trash\"></i></code> within your delete button element.');",
"assert(code.match(/<\\/i>|<\\/span/g) && code.match(/<\\/i|<\\/span>/g).length > 2 && ($(\".btn-primary > i\").is(\".fa.fa-thumbs-up\") || $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'message: Make sure each of your <code>i</code> elements has a closing tag and <code><i class=\"fa fa-thumbs-up\"></i></code> is in your like button element.');"
"title":"Agrega Font Awesome a todos los botones",
"description":[
"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."
]
},
"fr":{
"title":"Ajoutez des icones Font Awesome à tous nos boutons",
"description":[
"Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format <code>.svg</code>. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.",
"Utilisez Font Awesome pour ajouter un icone <code>info-circle</code> à votre bouton d'info et un icone <code>trash</code> à votre bouton de suppression."
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nest both your radio buttons within a <code><div class=\"row\"></code> element. Then nest each of them within a <code><div class=\"col-xs-6\"></code> element.",
"assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'message: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.');",
"assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'message: Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
"title":"Crea botones de opción con estilo adaptativo",
"description":[
"¡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>."
]
},
"fr":{
"title":"Donnez un style responsive à vos boutons radio",
"description":[
"Vous pouvez utiliser la classe Bootstrap <code>col-xs-*</code> sur des éléments <code>form</code>. Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.",
"Nichez tous vous boutons radio dans un élément <code><div class=\"row\"></code>. Ensuite, nichezchacun d'entre eux dans un élément <code><div class=\"col-xs-6\"></code>"
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nest all three of your checkboxes in a <code><div class=\"row\"></code> element. Then nest each of them in a <code><div class=\"col-xs-4\"></code> element."
"assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'message: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.');",
"assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'message: Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
"title":"Crea casillas de selección con estilo adaptativo",
"description":[
"¡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>."
]
},
"fr":{
"title":"Donnez un style responsive à vos checkbox (cases de séléction)",
"description":[
"Vous pouvez aussi utiliser la classe Bootstrap <code>col-xs-*</code> sur des éléments <code>form</code>! Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.",
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nichez toustes vos checkbox dans un élément <code><div class=\"row\"></code>. Ensuite nichez chacun d'entre eux dans un élément <code><div class=\"col-xs-4\"></code>"
"You can add the <code>fa-paper-plane</code> Font Awesome icon by adding <code><i class=\"fa fa-paper-plane\"></i></code> within your submit <code>button</code> element.",
"Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code>. Also give this button the Font Awesome icon of <code>fa-paper-plane</code>.",
"All textual <code><input></code>, <code><textarea></code>, and <code><select></code> elements with the class <code>.form-control</code> have a width of 100%."
"assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'message: Give the submit button in your form the classes <code>btn btn-primary</code>.');",
"assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'message: Add a <code><i class=\"fa fa-paper-plane\"></i></code> within your submit <code>button</code> element.');",
"assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'message: Give the text <code>input</code> in your form the class <code>form-control</code>.');",
"assert(code.match(/<\\/i>/g) && code.match(/<\\/i/g).length > 3, 'message: Make sure each of your <code>i</code> elements has a closing tag.');"
"title":"Estiliza cajas de texto como controles de formulario",
"description":[
"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."
]
},
"fr":{
"title":"Donnez un style similaire au contrôles de formulaires à des zones de texte",
"description":[
"Vous pouvez ajouter l'icone Font Awesome <code>fa-paper-plane</code> en ajoutant <code><i class=\"fa fa-paper-plane\"></i></code> à l'intérieur de votre <code>button</code> de soumission du formulaire.",
"Donnez aux entrées texte de votre formulaire une classe <code>form-control</code>. Donnez à votre bouton de soumission de formulaire les classes <code>btn btn-primary</code>. Donnez lui aussi un icone Font Awesome <code>fa-paper-plane</code>."
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class <code>row</code>, and other <code>div</code> elements within it using the <code>col-xs-*</code> class.",
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class <code>row</code>. Nest your form's text <code>input</code> within a div with the class of <code>col-xs-7</code>. Nest your form's submit <code>button</code> in a <code>div</code> with the class <code>col-xs-5</code>.",
"assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'message: Nest your form submission button and text input in a div with class <code>row</code>.');",
"assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'message: Nest your form text input in a div with the class <code>col-xs-7</code>.');",
"assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'message: Nest your form submission button in a div with the class <code>col-xs-5</code>.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
"title":"Alínea elementos de formulario de forma adaptativa con Bootstrap",
"description":[
"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!"
]
},
"fr":{
"title":"Aligner les éléments de formulaire de façon responsive avec Bootstrap",
"description":[
"Maintenant mettons sur la même ligne l'élément <code>input</code> et le <code>button</code> de soumission du formulaire. Nous procéderons de la même façon que précedemment: en utilisant un élément <code>div</code> avec la classe <code>row</code>, et un un autre div à l'intérieur qui aura la classe <code>col-xs-*</code>.",
"Nichez à la fois l'<code>input</code> texte de votre formulaire et le <code>button</code> de soumission de formulaire à l'intérieur d'un <code>div</code> avec la classe <code>row</code>. Nichez l'<code>input</code> texte du formulaire dans un div ayant la classe <code>col-xs-7</code>. Nichez votre <code>button</code> de soumission de formulaire dans un div ayant la classe <code>col-xs-5</code>.",
"C'est le dernier challenge qui concerne notre application de photos de chats. Nous espérons que vous avez aimé apprendre Font Awesome, Bootstrap et du design adaptatif!"
"To start with, create an <code>h3</code> element, with the text <code>jQuery Playground</code>.",
"Color your <code>h3</code> element with the <code>text-primary</code> Bootstrap class, and center it with the <code>text-center</code> Bootstrap class."
"assert($(\"h3\") && $(\"h3\").length > 0, 'message: Add a <code>h3</code> element to your page.');",
"assert(code.match(/<\\/h3>/g) && code.match(/<h3/g) && code.match(/<\\/h3>/g).length === code.match(/<h3/g).length, 'message: Make sure your <code>h3</code> element has a closing tag.');",
"assert($(\"h3\").hasClass(\"text-primary\"), 'message: Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>');",
"assert($(\"h3\").hasClass(\"text-center\"), 'message: Your <code>h3</code> element should be centered by applying the class <code>text-center</code>');",
"assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'message: Your <code>h3</code> element should have the text <code>jQuery Playground</code>.');"
"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."
]
},
"fr":{
"title":"Créer un entête Bootstrap",
"description":[
"Maintenons, créons queqlque chose à partir de zéro pour pratiquer nos connaissances acquises sur HTML, CSS et Bootstrap.",
"Nous allons construire un terrain de jeu pour jQuery, que nous allons bientôt utiliser dans les challenges jQuery.",
"Pour commencer, créez un élément <code>h3</code>, contenant le texte <code>jQuery Playground</code>.",
"Colorez notre élément <code>h3</code> avec la classe Bootstrap <code>text-primary</code>, et centrez le en utilisant la classe Bootstrap <code>text-center</code>"
"assert($(\"div\").hasClass(\"container-fluid\"), 'message: Your <code>div</code> element should have the class <code>container-fluid</code>.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');",
"assert($(\"div\").children(\"h3\").length >0, 'message: Nest your <code>h3</code> element inside a <code>div</code> element.');"
"assert($(\"div\").hasClass(\"row\"), 'message: Your <code>div</code> element should have the class <code>row</code>');",
"assert($(\"div.container-fluid div.row\").length > 0, 'message: Your <code>row div</code> should be nested inside the <code>container-fluid div</code>');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure your <code>div</code> element has a closing tag.');"
"assert($(\"div.row > div.col-xs-6\").length > 1, 'message: Nest two <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure all your <code>div</code> elements have closing tags.');"
"assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'message: Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div</code> elements with the class <code>\"col-xs-6\"</code>');",
"assert($(\"div.row > div.col-xs-6\").length > 1, 'message: Nest both of your <code>div</code> elements with the class <code>\"col-xs-6\"</code> within your <code>div</code> element with the class <code>\"row\"</code>.');",
"assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure all your <code>div</code> elements have closing tags.');"
"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>."
]
},
"fr":{
"title":"Créez un \"puit\" (well) Bootstrap",
"description":[
"Bootstrap possède une classe appelée <code>well</code> qui peux créer une certaine profondeur pour vos colonnes.",
"Nichez un élément <code>div</code> avec la classe <code>well</code> dans chacun de vos éléments <code>col-xs-6</code> <code>div</code>."
"Now we're several <code>div</code> elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our <code>button</code> elements.",
"assert($(\"div.well:eq(0)\").children(\"button\").length === 3 && $(\"div.well:eq(1)\").children(\"button\").length === 3, 'message: Nest three <code>button</code> elements within each of your <code>div</code> elements with class <code>well</code>.');",
"assert($(\"button\") && $(\"button\").length > 5, 'message: You should have a total of 6 <code>button</code> elements.');",
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have closing tags.');"
"title":"Agrega elementos dentro de los pozos de Bootstrap",
"description":[
"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>."
]
},
"fr":{
"title":"Ajouter des éléments dans un puit Bootstrap",
"description":[
"Nous avons maintenant plusieurs niveaux de profondeur d'éléments <code>div</code> dans chaque colonne de notre rangée. Ceci est suffisant pour le moment. Maintenant nous pouvons ajouter nos éléments <code>button</code>.",
"Nichez trois éléments <code>button</code> dans chaque élément <code>well</code> <code>div</code>."
"Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery.",
"title":"Crea una clase para usar con selectores de jQuery",
"description":[
"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>."
]
},
"fr":{
"title":"Créez une classe à cibler avec les sélécteurs jQuery",
"description":[
"Toutes les classes ne nécéssitent pas d'avoir un code CSS qui leur correspondent. Parfois ous créons des classes dans le seul but de pouvoir sélectionner ces éléments plus facilement en utilisant jQuery.",
"Donnez à chacun de vos éléments <code>button</code> la classe <code>target</code>."
"assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, 'message: Give your left <code>well</code> the id of <code>left-well</code>.');",
"assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, 'message: Give your right <code>well</code> the id of <code>right-well</code>.');"
"Above your left-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#left-well</code>.",
"Above your right-well, inside its <code>col-xs-6</code> <code>div</code> element, add a <code>h4</code> element with the text <code>#right-well</code>."
"assert($(\".col-xs-6\").children(\"h4\") && $(\".col-xs-6\").children(\"h4\").length > 1, 'message: Add an <code>h4</code> element to each of your <code><div class=\"col-xs-6\"></code> elements.');",
"assert(new RegExp(\"#left-well\",\"gi\").test($(\"h4\").text()), 'message: One <code>h4</code> element should have the text <code>#left-well</code>.');",
"assert(new RegExp(\"#right-well\",\"gi\").test($(\"h4\").text()), 'message: One <code>h4</code> element should have the text <code>#right-well</code>.');",
"assert(code.match(/<\\/h4>/g) && code.match(/<h4/g) && code.match(/<\\/h4>/g).length === code.match(/<h4/g).length, 'message: Make sure all your <code>h4</code> elements have closing tags.');"
"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>."
]
},
"fr":{
"title":"Donner un nom aux puits Bootstrap",
"description":[
"Au nom de la clarté, donnons un nom à nos deux puits en accord avec leur ids",
"Au dessus de votre puit de gauche, à l'intérieur de ses éléments <code>col-xs-6</code> <code>div</code>, ajoutez un élément <code>h4</code> ayant le texte <code>#left-well</code>.",
"Au dessus de votre puit de droite, à l'intérieur de ses éléments <code>col-xs-6</code> <code>div</code>, ajoutez un élément <code>h4</code> ayant le texte <code>#right-well</code>."
"Give each of your buttons a unique id, starting with <code>target1</code> and ending with <code>target6</code>.",
"Make sure that <code>target1</code> to <code>target3</code> are in <code>#left-well</code>, and <code>target4</code> to <code>target6</code> are in <code>#right-well</code>."
"assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'message: One <code>button</code> element should have the id <code>target1</code>.');",
"assert($(\"#left-well\").children(\"#target2\") && $(\"#left-well\").children(\"#target2\").length > 0, 'message: One <code>button</code> element should have the id <code>target2</code>.');",
"assert($(\"#left-well\").children(\"#target3\") && $(\"#left-well\").children(\"#target3\").length > 0, 'message: One <code>button</code> element should have the id <code>target3</code>.');",
"assert($(\"#right-well\").children(\"#target4\") && $(\"#right-well\").children(\"#target4\").length > 0, 'message: One <code>button</code> element should have the id <code>target4</code>.');",
"assert($(\"#right-well\").children(\"#target5\") && $(\"#right-well\").children(\"#target5\").length > 0, 'message: One <code>button</code> element should have the id <code>target5</code>.');",
"assert($(\"#right-well\").children(\"#target6\") && $(\"#right-well\").children(\"#target6\").length > 0, 'message: One <code>button</code> element should have the id <code>target6</code>.');"
"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>.",
"Asegúrate que <code>target1</code> a <code>target3</code> queden en <code>#left-well</code>, mientras que <code>target4</code> a <code>target6</code> queden en <code>#right-well</code>."
]
},
"fr":{
"title":"Donner à chaque élément un ID unique",
"description":[
"Nous désirerons aussi pouvoir être capable d'utiliser jQuery pour cibler chaque bouton suivant son id unique.",
"Donnez à chaque bouton un id unique, commençant par <code>target1</code> et finissant par <code>target6</code>.",
"Assurez vous que <code>target1</code> à <code>target3</code> sont dans le <code>#left-well</code>, et que <code>target4</code> à <code>target6</code> sont dans le <code>#right-well</code>."
"assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'message: Give your <code>button</code> element with the id <code>target1</code> the text <code>#target1</code>.');",
"assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), 'message: Give your <code>button</code> element with the id <code>target2</code> the text <code>#target2</code>.');",
"assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), 'message: Give your <code>button</code> element with the id <code>target3</code> the text <code>#target3</code>.');",
"assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), 'message: Give your <code>button</code> element with the id <code>target4</code> the text <code>#target4</code>.');",
"assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), 'message: Give your <code>button</code> element with the id <code>target5</code> the text <code>#target5</code>.');",
"assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), 'message: Give your <code>button</code> element with the id <code>target6</code> the text <code>#target6</code>.');"
"assert(code.match(/<!--(?!(>|->|.*-->.*this line))\\s*.*this line.*\\s*-->/gi), 'message: Your comment should have the text <code>Only change code above this line</code>.');",
"Cuando comencemos a usar jQuery, modificarmemos los elementos HTML sin necesidad de hacer cambios reales en el código HTML.",
"Vamos a asegurar que cualquier persona sepa que no debe 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>Only change code above this line.</code>"
]
},
"fr":{
"title":"Utiliser des commentaires pour clarifier son code",
"description":[
"Quand nous commencerons à utiliser jQuery, nous modifierons les éléments HTML sans avoir besoin de les changer directement dans le fichier HTML.",
"Assurons nous que tout le monde sache qu'ils ne devraient pas modifier quoi que ce soit dans le code HTML.",
"Rappelez vous que vous pouvez commencer un commentaire avec <code><!--</code> et le finir avec <code>--></code>",
"Ajoutez un commentaire en haut de l'HTML qui annonce <code>Only change code above this line.</code> (Changez seulement le code au dessus de cette ligne.)"
