diff --git a/seed/challenges/01-front-end-development-certification/bootstrap.json b/seed/challenges/01-front-end-development-certification/bootstrap.json index 881e5bf085..733e1af296 100644 --- a/seed/challenges/01-front-end-development-certification/bootstrap.json +++ b/seed/challenges/01-front-end-development-certification/bootstrap.json @@ -88,6 +88,16 @@ "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", "En este caso, lo hemos agregado a esta página por ti.", "Para iniciar, debemos anidar todo nuestro HTML en un elemento div con la clase container-fluid." + ], + "nameFr": "Un design adaptatif (responsive design) utilisant les conteneurs fluides de Bootstrap", + "descriptionFr": [ + "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 Responsive Design (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:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", + "Ici, nous l'avons déjà ajouté à la page pour vous dans l'arrière-boutique.", + "Pour commencer, nous devons envelopper nos éléments HTML dans un élément div possédant la classe container-fluid" ] }, { @@ -170,6 +180,14 @@ "Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo src sea http://bit.ly/fcc-running-cats.", "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 img-responsive a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página." + ], + "nameFr": "Rendre des images adaptatives aux appareils mobiles", + "descriptionFr": [ + "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 img-responsive 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 src en http://bit.ly/fcc-running-cats.", + "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 img-responsive à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page." ] }, { @@ -250,6 +268,12 @@ "Ahora que estamos usando Bootstrap, podemos centrar nuestro elemento de encabezado para hacerlo verse mejor. Todo lo que necesitamos hacer es agregar la clase text-center a nuestro elemento h2.", "Recuerda que puedes agregar varias clases a un mismo elemento separando cada una de ellas con un espacio, de esta forma:", "<h2 class=\"red-text text-center\">your text</h2>" + ], + "nameFr": "Centrer du texte avec Bootstrap", + "descriptionFr": [ + "Maintenant que wous utilisons Bootstrap, nous pouvons centrer notre entête pour qu'il ait une meilleure apparence. Nous devons seulement ajouter la classe text-center à notre élément h2.", + "Souvenez vous que vous pouvez utiliser plusieurs classes pour un même élément en les séparant avec un espace, comme ceci:", + "<h2 class=\"red-text text-center\">Votre texte</h2>" ] }, { @@ -330,6 +354,11 @@ "descriptionEs": [ "Bootstrap tiene sus propios estilos para elementos button, los cuales se ven mejor que los estilos simples de HTML.", "Crea un nuevo elemento button debajo de tu foto grande del gatito. Dale la clase btn y el texto \"Like\"." + ], + "nameFr": "Créer un bouton avec Bootstrap", + "descriptionFr": [ + "Bootstrap possède ses propres styles pour les éléments button, qui sont beaucoup plus beaux que ceux issus du HTML seul.", + "Créez un nouvel élément button en dessous de votre grande photo de chaton. Donnez lui comme classe btn et comme texte \"Like\"." ] }, { @@ -416,6 +445,14 @@ "\"Un", "Ten en cuenta que estos botones todavía necesitan la clase btn.", "Agrega la clase de Bootstrap btn-block a tu botón Bootstrap." + ], + "nameFr": "Créer un bouton bloc Bootstrap", + "descriptionFr": [ + "Normalement, vos éléments button sont aussi large que le texte qu'ils contiennent. En les transformants en éléments blocs, vos boutons vont s'ajuster pour remplir l'intégralité de l'espace horizontal de la page et tous les éléments qui le suivront se placeront sur une \"nouvelle ligne\" en dessous du bloc.", + "Cette image illustre la différence entre éléments inline (sans briser la ligne) et éléments block-level (en blocs)", + "\"Un", + "Notez que ces boutons ont toujours besoin de la classe btn", + "Ajoutez la classe Bootstrap btn-block à votre bouton Bootstrap." ] }, { @@ -498,6 +535,12 @@ "La clase btn-primary 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 btn-primary de Bootstrap a tu botón.", "Ten en mente que este botón todavía necesita las clases btn y btn-block." + ], + "nameFr": "Goutez à l'arc en ciel de couleurs des boutons de Bootstrap", + "descriptionFr": [ + "La classe btn-primary 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 btn-primary à votre bouton.", + "Notez que ce bouton a toujours besoin des classes btn et btn-block" ] }, { @@ -581,6 +624,12 @@ "Bootstrap incluye varios colores pre-definidos para botones. La clase btn-info 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 btn-info y btn-block.", "Ten en mente que estos botones todavía necesitan las clases btn y btn-block." + ], + "nameFr": "Indiquez les actions optionelles avec des boutons informatifs", + "descriptionFr": [ + "Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe btn-info 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 btn-info et btn-block.", + "Notez que ces boutons ont toujours besoins des classes btn and btn-block." ] }, { @@ -665,6 +714,13 @@ "Bootstrap incluye varios colores pre-definidos para botones. La clase btn-danger 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 btn-danger.", "Recuerda que estos botones todavía requieren las clases btn y btn-block." + ], + "nameFr": "Prévenez vos utilisateurs d'une action dangereuse", + "descriptionFr": [ + "Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe btn-danger 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 btn-danger.", + "Notez que ces boutons ont toujours besoins des classes btn and btn-block." + ] }, { @@ -758,6 +814,16 @@ "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", "Pon los botones de Like, Info y Delete lado a lado. Esto se hace anidando los tres botones dentro de un elemento <div class=\"row\">, y luego cada uno de ellos dentro de un elemento <div class=\"col-xs-4\">.", "La clase row se aplica al elemento div, dentro del cual van anidados los botones." + ], + "nameFr": "Utilisez la grille de Bootstrap pour mettre les éléments côte-à-côte.", + "descriptionFr": [ + "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 div", + "Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:", + "\"Une", + "Notez que dans cet exemple, nous avons utilisé la classe col-md-*. Ici, md signifie medium, et * 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 col-xs-*, où xs signifie extrêmement petit (comme un écran de téléphone mobile), et * est le nombre de colonnes en largeur de l'élément.", + "Mettez les boutons Like, info et Delete côte-à-côte en les enveloppant tous dans un élément <div class=\"row\">, puis chacun d'entre eux dans un élément <div class=\"col-xs-4\"> element.", + "La classe row est donnée à un div, et les boutons peuvent être insérés à l'intérieur de celui-ci." ] }, { @@ -856,6 +922,14 @@ "Elimina las declaraciones CSS .red-text, p, y .smaller-image de tu elemento style, de forma que las únicas declaraciones que queden en tu elemento style sean h2 y thick-green-border.", "Luego elimina el elemento p que contiene un enlace nulo. Después, elimina la clase red-text de tu elemento h2 y reemplázalo con la clase text-primary de Bootstrap.", "Por último, elimina la clase \"smaller-image\" de tu primer elemento img y reemplázalo con la clase img-responsive." + ], + "nameFr": "Remplacez le CSS personnalisé par les styles Bootstrap", + "descriptionFr": [ + "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 .red-text, p, et .smaller-image de votre élément style pour que les seules déclarations restantes dans l'élément style soient h2 et thick-green-border.", + "Ensuite supprimez l'élément p contenant un lien fantôme. Puis enlevez la classe red-text de votre élément h2 et remplacez la par la classe Bootstrap text-primary", + "Enfin, enlevez la classe \"smaller-image\" dde votre premier élément img et remplacez le par la classe img-responsive." ] }, { @@ -944,6 +1018,16 @@ "Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento span. Luego, asigna a ese elemento span la clase text-danger para hacer que el texto sea rojo.", "Así es como lo harías con el elemento \"Top 3 things cats hate\":", "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" + ], + "nameFr": "Utiliser Spans pour les éléments \"Inline\"", + "descriptionFr": [ + "Vous pouvez utiliser les spans pour créer des éléments inline. Vous rappelez vous quand nous avions utilisé la classe btn-block pour remplir la rangée entière?", + "Cette image illustre la différence entre les éléments inline (en ligne) et les éléments block-level (de blocs):", + "\"Un", + "En utilisant un élément span, 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 span; Ensuite donnez à ce span la classe text-danger pour rendre le texte rouge.", + "Il faudrait que vous fassiez ainsi pour l'élément \"Top 3 things cats hate\":", + "<p>Top 3 things cats <span class = \"text-danger\">hate:</span></p>" ] }, { @@ -1033,6 +1117,17 @@ "En la aplicación de fotos de gatos que estamos construyendo, usaremos col-xs-*, donde xs significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y * especifica el número de columnas que debe tomar el ancho del elemento.", "Anida tu primera imagen y tu elemento h2 dentro de un solo elemento <div class=\"row\">. Anida tu texto h2 dentro de un <div class=\"col-xs-8\"> y tu imagen en un <div class=\"col-xs-4\"> 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?" + ], + "nameFr": "Créer un entête personalisé", + "descriptionFr": [ + "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 div.", + "Voici un diagramme du fonctionnement de la grille à 12 colonnes de Bootstrap:", + "\"Une", + "Notez que dans cet exemple, on utilise la classe col-md-*. Ici md signifie medium, et * 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 h2 dans un seul élément <div class=\"row\">. Mettez l'élément h2 dans un <div class=\"col-xs-8\"> et votre image dans un <div class=\"col-xs-4\"> 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?" ] }, { @@ -1123,6 +1218,16 @@ "El elemento i originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento i para convertirlo en un ícono, por ejemplo:", "<i class=\"fa fa-info-circle\"></i>", "Usa Font Awesome para agregar un icono de \"pulgar arriba\" thumbs-up a tu botón de like dándole un elemento i con las clases fa y fa-thumbs-up." + ], + "nameFr": "Ajouter des icônes Font Awesome à nos boutons", + "descriptionFr": [ + "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format .svg. 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:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", + "Ici, nous l'avons déjà ajouté pour vous dans le back-office.", + "La balise i 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 i pour les les transformer en icones, par exemple:", + "<i class=\"fa fa-info-circle\"></i>", + "Utilisez Font Awesome pour ajouter un icone thumbs-up à votre bouton de like en lui donnant un élément i ayant les classes fa et fa-thumbs-up." ] }, { @@ -1202,6 +1307,11 @@ "descriptionEs": [ "Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato .svg, 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 info-circle a tu botón informativo y un icono trash a tu botón de eliminar." + ], + "nameFr": "Ajoutez des icones Font Awesome à tous nos boutons", + "descriptionFr": [ + "Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format .svg. 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 info-circle à votre bouton d'info et un icone trash à votre bouton de suppression." ] }, { @@ -1281,6 +1391,11 @@ "descriptionEs": [ "¡Puedes utilizar las clases col-xs-* de Bootstrap en elementos form 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 <div class=\"row\">. Luego, anida cada uno de ellos dentro de un elemento <div class=\"col-xs-6\">." + ], + "nameFr": "Donnez un style responsive à vos boutons radio", + "descriptionFr": [ + "Vous pouvez utiliser la classe Bootstrap col-xs-* sur des éléments form. 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 <div class=\"row\">. Ensuite, nichezchacun d'entre eux dans un élément <div class=\"col-xs-6\">" ] }, { @@ -1367,6 +1482,12 @@ "descriptionEs": [ "¡Puedes utilizar las clases col-xs-* de Bootstrap en elementos form 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 <div class=\"row\">. Luego, anida cada una de ellas en un elemento <div class=\"col-xs-4\">." + ], + "nameFr": "Donnez un style responsive à vos checkbox (cases de séléction)", + "descriptionFr": [ + "Vous pouvez aussi utiliser la classe Bootstrap col-xs-* sur des éléments form! 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 col-xs-* classes on form 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 <div class=\"row\">. Ensuite nichez chacun d'entre eux dans un élément <div class=\"col-xs-4\">" ] }, { @@ -1462,6 +1583,11 @@ "descriptionEs": [ "Puedes agregar el icono fa-paper-plane de Font Awesome incluyendo <i class=\"fa fa-paper-plane\"></i> dentro de tu elemento button de envío.", "Dale a la entrada de texto de tu formulario la clase form-control. Dale al botón de envío de tu formulario las clases btn btn-primary. También, incluye en ese botón el icono fa-paper-plane de Font Awesome." + ], + "nameFr": "Donnez un style similaire au contrôles de formulaires à des zones de texte", + "descriptionFr": [ + "Vous pouvez ajouter l'icone Font Awesome fa-paper-plane en ajoutant <i class=\"fa fa-paper-plane\"></i> à l'intérieur de votre button de soumission du formulaire.", + "Donnez aux entrées texte de votre formulaire une classe form-control. Donnez à votre bouton de soumission de formulaire les classes btn btn-primary. Donnez lui aussi un icone Font Awesome fa-paper-plane." ] }, { @@ -1559,6 +1685,12 @@ "Ahora vamos a poner el elemento input y el elemento button que dice submit de tu formulario en la misma línea. Lo haremos de la misma forma que lo hicimos anteriormente: usando un elemento div con la clase row, y otros elementos div dentro de ese, usando la clase col-xs-*.", "Anida ambos, el elemento input y el elemento button que dice submit de tu formulario dentro de un div con la clase row. Anida el elemento input de tu formulario dentro de un div con cla clase col-xs-7. Anida el elemento button que dice submit de tu formulario en un elemento div con la clase col-xs-5.", "¡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!" + ], + "nameFr": "Aligner les éléments de formulaire de façon responsive avec Bootstrap", + "descriptionFr": [ + "Maintenant mettons sur la même ligne l'élément input et le button de soumission du formulaire. Nous procéderons de la même façon que précedemment: en utilisant un élément div avec la classe row, et un un autre div à l'intérieur qui aura la classe col-xs-*.", + "Nichez à la fois l'input texte de votre formulaire et le button de soumission de formulaire à l'intérieur d'un div avec la classe row. Nichez l'input texte du formulaire dans un div ayant la classe col-xs-7. Nichez votre button de soumission de formulaire dans un div ayant la classe col-xs-5.", + "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!" ] }, { @@ -1590,6 +1722,13 @@ "Crearemos un área de juego con jQuery, el cual utilizaremos en nuestros desafíos con jQuery.", "Para empezar, crea un elemento h3, con el texto jQuery Playground.", "Ponle color a tu elemento h3 con la clase text-primary de Bootstrap, y céntrala con la clase text-center de Bootstrap." + ], + "nameFr": "Créer un entête Bootstrap", + "descriptionFr": [ + "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 h3, contenant le texte jQuery Playground.", + "Colorez notre élément h3 avec la classe Bootstrap text-primary, et centrez le en utilisant la classe Bootstrap text-center" ] }, { @@ -1615,6 +1754,11 @@ "descriptionEs": [ "Ahora asegurémonos de que todo el contenido en nuestra página pueda adaptarse a dispositivos móviles.", "Anida tu elemento h3 dentro de un elemento div con la clase container-fluid." + ], + "nameFr": "Loger notre page dans un conteneur Bootstrap Fluid Div", + "descriptionFr": [ + "Maintenant, assurons nous que tout le contenu de la page est mobile-responsive (adaptatif au téléphones mobiles).", + "Nichons notre element h3 à l'intérieur d'un élément div ayant la classe container-fluid." ] }, { @@ -1643,6 +1787,11 @@ "descriptionEs": [ "Ahora crearemos una fila de Bootstrap con nuestros elementos en línea.", "Crea un elemento div debajo de la etiqueta h3, con la clase row." + ], + "nameFr": "Créer une rangée (row) Bootstrap", + "descriptionFr": [ + "Maintenant nous allons créer une rangée (row) Bootstrap pour nos éléments inline.", + "Créez un élément div en dessous de la balise h3, avec une classe row." ] }, { @@ -1671,6 +1820,11 @@ "descriptionEs": [ "Ahora que tenemos una fila en Bootstrap, vamos a partirla en dos columnas para alojar nuestros elementos.", "Crea dos elementos div dentro de tu fila, ambos con la clase col-xs-6." + ], + "nameFr": "Séparer une rangée Bootstrap", + "descriptionFr": [ + "Maintenant que nous avons une rangée Bootstrap, séparons la en deux colonnes pour placer nos éléments.", + "Créez deux éléments divdans votre rangée, chacun ayant la classe col-xs-6." ] }, { @@ -1704,6 +1858,11 @@ "descriptionEs": [ "Bootstrap tiene una clase llamada well que crea una sensación visual de profundidad para tus columnas.", "Anida un elemento div con la clase well dentro de cada uno de tus elementos div que tienen la clase col-xs-6." + ], + "nameFr": "Créez un \"puit\" (well) Bootstrap", + "descriptionFr": [ + "Bootstrap possède une classe appelée well qui peux créer une certaine profondeur pour vos colonnes.", + "Nichez un élément div avec la classe well dans chacun de vos éléments col-xs-6 div." ] }, { @@ -1745,6 +1904,11 @@ "descriptionEs": [ "Ahora estamos a una profundidad de varios elementos div dentro de cada columna de nuestra fila. No iremos más profundo que esto. Ahora podemos agregar nuestros elementos button.", "Anida tres elementos button dentro de cada uno de tus elementos div que tienen la clase well." + ], + "nameFr": "Ajouter des éléments dans un puit Bootstrap", + "descriptionFr": [ + "Nous avons maintenant plusieurs niveaux de profondeur d'éléments div dans chaque colonne de notre rangée. Ceci est suffisant pour le moment. Maintenant nous pouvons ajouter nos éléments button.", + "Nichez trois éléments button dans chaque élément well div." ] }, { @@ -1785,6 +1949,11 @@ "descriptionEs": [ "Bootstrap tiene otra clase de botón llamada btn-default.", "Aplica las clases btn y btn-default a cada uno de tus elementos button." + ], + "nameFr": "Appliquer le style de bouton par défaut de Bootstrap", + "descriptionFr": [ + "Bootstrap possède une autre classe de bouton appelée btn-default.", + "Appliquez les deux classes btn et btn-default à chacun de vos éléments button" ] }, { @@ -1824,6 +1993,11 @@ "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 button la clase target." + ], + "nameFr": "Créez une classe à cibler avec les sélécteurs jQuery", + "descriptionFr": [ + "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 button la classe target." ] }, { @@ -1872,6 +2046,15 @@ "Recuerda que puedes darle a un elemento un id como el siguiente:", "<div class=\"well\" id=\"center-well\">", "Dale al pozo de la izquireda el id left-well. Al pozo de la derecha, dale un id right-well." + ], + "nameFr": "Ajouter des attributs ID à vos éléments Bootstrap", + "descriptionFr": [ + "Rappelez vous qu'en plus des attributs classes, vous pouvez donnez à chacun de vos éléments un attribut id.", + "Chaque id doit être unique pour un élément donné et utilisé une seule fois par page.", + "Donnons un id unique à chacun de nos éléments div de classe well.", + "Rappelez vous que vous pouvez donner un id à un élément ainsi :", + "<div class=\"well\" id=\"center-well\">", + "Donnez au puit sur la gauche un id de left-well. Donnez au puit sur la droite un id de right-well." ] }, { @@ -1918,6 +2101,12 @@ "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 div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #left-well.", "Ahora, sobre tu pozo de la derecha, dentro de su elemento div que tiene la clase col-xs-6, agrega un elemento h4 con el texto #right-well." + ], + "nameFr": "Donner un nom aux puits Bootstrap", + "descriptionFr": [ + "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 col-xs-6 div, ajoutez un élément h4 ayant le texte #left-well.", + "Au dessus de votre puit de droite, à l'intérieur de ses éléments col-xs-6 div, ajoutez un élément h4 ayant le texte #right-well." ] }, { @@ -1966,6 +2155,12 @@ "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 target1 y terminando con target6.", "Asegúrate que target1 a target3 queden en #left-well, mientras que target4 a target6 queden en #right-well." + ], + "nameFr": "Donner à chaque élément un ID unique", + "descriptionFr": [ + "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 target1 et finissant par target6.", + "Assurez vous que target1 à target3 sont dans le #left-well, et que target4 à target6 sont dans le #right-well." ] }, { @@ -2012,6 +2207,11 @@ "descriptionEs": [ "De la misma forma en que etiquetamos nuestros pozos, ahora vamos a etiquetar nuestros botones.", "Dale a cada uno de tus elementos button un texto que corresponda con su id." + ], + "nameFr": "Donnez un nom à vos boutons Bootstrap", + "descriptionFr": [ + "De la même façon que nous avons donné un nom à nos puits, nous voulons nommer nos boutons.", + "Donnez à chaque élément button un texte qui corresponde à son id." ] }, { @@ -2060,6 +2260,13 @@ "Vamos a asegurar que cualquier persona sepa que no debe modificar nada en este código directamente.", "Recuerda que puedes iniciar un comentario usando <!-- y terminarlo usando -->", "Agrega un comentario al inicio de tu código HTML que diga Only change code above this line." + ], + "nameFr": "Utiliser des commentaires pour clarifier son code", + "descriptionFr": [ + "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 <!-- et le finir avec -->", + "Ajoutez un commentaire en haut de l'HTML qui annonce Only change code above this line. (Changez seulement le code au dessus de cette ligne.)" ] } ]