diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md index 4a3296deb5..38fd4fe1f2 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md @@ -1,6 +1,6 @@ --- id: a77dbc43c33f39daa4429b4f -title: Boo who +title: 基本类型布尔值的检查 challengeType: 5 forumTopicId: 16000 dashedName: boo-who @@ -8,67 +8,67 @@ dashedName: boo-who # --description-- -Check if a value is classified as a boolean primitive. Return true or false. +检查一个值是否是基本类型中的布尔值(boolean)类型。 函数应返回 `true` 或者 `false`。 -Boolean primitives are true and false. +基本类型中的布尔值为 `true` 或者 `false`。 # --hints-- -`booWho(true)` should return true. +`booWho(true)` 应返回 `true`。 ```js assert.strictEqual(booWho(true), true); ``` -`booWho(false)` should return true. +`booWho(false)` 应该返回 `true`。 ```js assert.strictEqual(booWho(false), true); ``` -`booWho([1, 2, 3])` should return false. +`booWho([1, 2, 3])` 应该返回 `false`。 ```js assert.strictEqual(booWho([1, 2, 3]), false); ``` -`booWho([].slice)` should return false. +`booWho([].slice)` 应该返回 `false`。 ```js assert.strictEqual(booWho([].slice), false); ``` -`booWho({ "a": 1 })` should return false. +`booWho({ "a": 1 })` 应该返回 `false`。 ```js assert.strictEqual(booWho({ a: 1 }), false); ``` -`booWho(1)` should return false. +`booWho(1)` 应该返回 `false`。 ```js assert.strictEqual(booWho(1), false); ``` -`booWho(NaN)` should return false. +`booWho(NaN)` 应该返回 `false`。 ```js assert.strictEqual(booWho(NaN), false); ``` -`booWho("a")` should return false. +`booWho("a")` 应该返回 `false`。 ```js assert.strictEqual(booWho('a'), false); ``` -`booWho("true")` should return false. +`booWho("true")` 应该返回 `false`。 ```js assert.strictEqual(booWho('true'), false); ``` -`booWho("false")` should return false. +`booWho("false")` 应该返回 `false`。 ```js assert.strictEqual(booWho('false'), false); diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md index 48dd027d9a..33784ca0ac 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md @@ -49,7 +49,9 @@ if(typeof myName !== "undefined"){(function(v){return v;})(myName);} ``` ## --seed-contents-- + ```js + ``` # --solutions-- diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md index a458cd96c1..e93aee6c57 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md @@ -36,7 +36,9 @@ if(typeof a !== 'undefined') {(function(a){return "a = " + a;})(a);} else { (fun ``` ## --seed-contents-- + ```js + ``` # --solutions-- diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md index 2a502314bb..173162f676 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md @@ -1,6 +1,6 @@ --- id: bd7993c9c69feddfaeb7bdef -title: Multiply Two Decimals with JavaScript +title: 两个小数相乘 challengeType: 1 videoUrl: 'https://scrimba.com/c/ce2GeHq' forumTopicId: 301173 @@ -9,23 +9,23 @@ dashedName: multiply-two-decimals-with-javascript # --description-- -In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers. +在 JavaScript 中,你也可以用小数进行计算,就像整数一样。 -Let's multiply two decimals together to get their product. +把两个小数相乘,并得到它们乘积。 # --instructions-- -Change the `0.0` so that product will equal `5.0`. +改变 `0.0` 的数值让变量 product 的值等于 `5.0`。 # --hints-- -The variable `product` should equal `5.0`. +变量 `product` 应该等于 `5.0`。 ```js assert(product === 5.0); ``` -You should use the `*` operator +要使用`*`运算符。 ```js assert(/\*/.test(code)); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md index 2326bddd3c..fd3c663a25 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908849 -title: Add Elements within Your Bootstrap Wells +title: 在 Bootstrap Wells 中添加元素 challengeType: 0 forumTopicId: 16636 dashedName: add-elements-within-your-bootstrap-wells @@ -8,13 +8,13 @@ dashedName: add-elements-within-your-bootstrap-wells # --description-- -Now we're several `div` elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our `button` elements. +现在的每一行的列都已经有了 `div` 元素。 这已经足够了, 现在让我们添加 `button` 元素吧。 -Nest three `button` elements within each of your `div` elements having the class name `well`. +每一个 class 属性为 `well` 的 `div` 元素内都应该放三个 `button` 元素。 # --hints-- -Three `button` elements should be nested within each of your `div` elements with class `well`. +每一个 class 属性为 `well` 的 `div` 元素内都应该放三个 `button` 元素。 ```js assert( @@ -23,13 +23,13 @@ assert( ); ``` -You should have a total of 6 `button` elements. +总共有 6 个 `button` 元素。 ```js assert($('button') && $('button').length > 5); ``` -All of your `button` elements should have closing tags. +确保所有 `button` 元素都有闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md index 1cfb689b06..cfbee850d6 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aedc08845 -title: Add Font Awesome Icons to all of our Buttons +title: 将字体图标添加到所有的按钮上 challengeType: 0 forumTopicId: 16637 required: @@ -12,17 +12,17 @@ dashedName: add-font-awesome-icons-to-all-of-our-buttons # --description-- -Font Awesome is a convenient library of icons. These icons can be web fonts or vector graphics. 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. +Font Awesome 是一个非常便利的图标库。 这些图标可以是网络字体,也可以是一张矢量图。 这些图标就和字体一样, 不仅能通过像素单位指定它们的大小,它们也同样会继承父级 HTML 元素的字号。 # --instructions-- -Use Font Awesome to add an `info-circle` icon to your info button and a `trash` icon to your delete button. +为 info 按钮添加 Font Awesome `info-circle` 图标,delete 按钮添加 `trash` 图标。 -**Note:** The `span` element is an acceptable alternative to the `i` element for the directions below. +**注意:** 下述要求中的 `i` 元素也可以用 `span` 元素代替。 # --hints-- -You should add a `` within your info button element. +应在 `info` 按钮元素中添加一个 ``。 ```js assert( @@ -31,7 +31,7 @@ assert( ); ``` -You should add a `` within your delete button element. +应在 `delete` 按钮元素中添加一个 ``。 ```js assert( @@ -40,7 +40,7 @@ assert( ); ``` -Each of your `i` elements should have a closing tag and `` is in your like button element. +每个 `i` 元素都应有一个闭合标签,`` 在 `like` 标签元素中。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md index 4cec89bf4c..2f00ae9d50 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aedd08845 -title: Add Font Awesome Icons to our Buttons +title: 在按钮中添加字体图标 challengeType: 0 forumTopicId: 16638 required: @@ -12,33 +12,33 @@ dashedName: add-font-awesome-icons-to-our-buttons # --description-- -Font Awesome is a convenient library of icons. These icons can be webfonts or vector graphics. 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. +Font Awesome 是一个非常便利的图标库。 这些图标可以是网络字体,也可以是一张矢量图。 这些图标就和字体一样, 不仅能通过像素单位指定它们的大小,它们也同样会继承父级 HTML 元素的字体大小。 -You can include Font Awesome in any app by adding the following code to the top of your HTML: +可以将 Font Awesome 图标库添加至任何一个 web app 中,方法很简单,只需要在 HTML 头部增加下列代码即可: `` -In this case, we've already added it for you to this page behind the scenes. +不过在这里,已经预先为此页面添加了上述代码。 -The `i` 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 `i` element to turn it into an icon, for example: +`i` 元素起初用于让其它元素具有斜体(italic)的效果,不过现在一般用于显示图标。 可以把 Font Awesome 中的 class 属性添加到 `i` 元素中,让它变成一个图标,比如: `` -Note that the `span` element is also acceptable for use with icons. +注意用 `span` 元素展示图标也是可以的。 # --instructions-- -Use Font Awesome to add a `thumbs-up` icon to your like button by giving it an `i` element with the classes `fas` and `fa-thumbs-up`. Make sure to keep the text "Like" next to the icon. +给 like 按钮添加一个 Font Awesome `thumbs-up` 图标,具体方法是给 `i` 元素添加 `fas` 和 `fa-thumbs-up` class 属性。 确保将 `Like` 文本放在图标旁边。 # --hints-- -You should add an `i` element with the classes `fas` and `fa-thumbs-up`. +增加一个 class 为 `fas` 和 `fa-thumbs-up` 的 `i` 元素。 ```js assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up')); ``` -Your `fa-thumbs-up` icon should be located within the Like button. +`fa-thumbs-up` 图标应该在 Like 按钮中。 ```js assert( @@ -49,7 +49,7 @@ assert( ); ``` -Your `i` element should be nested within your `button` element. +`i` 元素应该在 `button` 元素中。 ```js assert( @@ -58,7 +58,7 @@ assert( ); ``` -Your icon element should have a closing tag. +确保图标元素有一个闭合标签。 ```js assert(code.match(/<\/i>|<\/span>/g)); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md index f2354d36db..0345968ab9 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908853 -title: Add id Attributes to Bootstrap Elements +title: 给 Bootstrap 元素添加 id 属性 challengeType: 0 forumTopicId: 16639 dashedName: add-id-attributes-to-bootstrap-elements @@ -8,21 +8,21 @@ dashedName: add-id-attributes-to-bootstrap-elements # --description-- -Recall that in addition to class attributes, you can give each of your elements an `id` attribute. +回忆一下,除了可以给元素添加 class 属性,我们还可以给元素设置 `id` 属性。 -Each id must be unique to a specific element and used only once per page. +每个元素的 id 都必须是唯一的,并且在一个页面中只能使用一次。 -Let's give a unique id to each of our `div` elements of class `well`. +让我们为每个 class 为 `well` 的 `div` 元素添加一个唯一的 id。 -Remember that you can give an element an id like this: +记住,可以这样给一个元素设置 id: `
` -Give the well on the left the id of `left-well`. Give the well on the right the id of `right-well`. +把左边 well 的 id 设置为 `left-well`。 右边的 well 的 id 设置为 `right-well`。 # --hints-- -Your left `well` should have the id of `left-well`. +左边 `well` 的 id 应该为 `left-well`。 ```js assert( @@ -31,7 +31,7 @@ assert( ); ``` -Your right `well` should have the id of `right-well`. +右边的 `well` 的 id 应该为 `right-well`。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md index 4ec8c688fc..480f2027f4 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908850 -title: Apply the Default Bootstrap Button Style +title: 给 Bootstrap 按钮添加默认样式 challengeType: 0 forumTopicId: 16657 dashedName: apply-the-default-bootstrap-button-style @@ -8,19 +8,19 @@ dashedName: apply-the-default-bootstrap-button-style # --description-- -Bootstrap has another button class called `btn-default`. +Bootstrap 还有另外一种按钮 class 属性叫做 `btn-default`。 -Apply both the `btn` and `btn-default` classes to each of your `button` elements. +为所有的 `button` 元素增加两个 class: `btn` 和 `btn-default`。 # --hints-- -You should apply the `btn` class to each of your `button` elements. +应该将 `btn` class 添加到所有的 `button` 元素中。 ```js assert($('.btn').length > 5); ``` -You should apply the `btn-default` class to each of your `button` elements. +应该将 `btn-default` class 添加到每一个 `button` 元素中。 ```js assert($('.btn-default').length > 5); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md index e066189270..adb60e7258 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md @@ -1,6 +1,6 @@ --- id: bad87fee1348cd8acef08813 -title: Call out Optional Actions with btn-info +title: 可选操作样式 btn-info challengeType: 0 forumTopicId: 16770 dashedName: call-out-optional-actions-with-btn-info @@ -8,33 +8,33 @@ dashedName: call-out-optional-actions-with-btn-info # --description-- -Bootstrap comes with several pre-defined colors for buttons. The `btn-info` class is used to call attention to optional actions that the user can take. +Bootstrap 有着丰富的预定义按钮颜色。 浅蓝色的 `btn-info` class 通常用在备选操作上。 -Create a new block-level Bootstrap button below your "Like" button with the text "Info", and add Bootstrap's `btn-info` and `btn-block` classes to it. +在 `Like` 按钮下方创建包含文本 `Info` 的块级 Bootstrap 按钮,然后为该按钮添加 Bootstrap 的 `btn-info` 和 `btn-block` classes。 -Note that these buttons still need the `btn` and `btn-block` classes. +注意:这些按钮仍然需要 `btn` 和 `btn-block` classes。 # --hints-- -You should create a new `button` element with the text "Info". +应创建一个新的包含 `Info` 文本的 `button` 元素。 ```js assert(new RegExp('info', 'gi').test($('button').text())); ``` -Both of your Bootstrap buttons should have the `btn` and `btn-block` classes. +两个按钮的 class 属性应该包含 `btn` 和 `btn-block`。 ```js assert($('button.btn-block.btn').length > 1); ``` -Your new button should have the class `btn-info`. +新按钮的 class 属性应该含有 `btn-info`。 ```js assert($('button').hasClass('btn-info')); ``` -All of your `button` elements should have closing tags. +确保所有的 `button` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md index bcf6be7ef8..ccdc71907e 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd8acde08812 -title: Center Text with Bootstrap +title: 用 Bootstrap 居中文本 challengeType: 0 forumTopicId: 16771 dashedName: center-text-with-bootstrap @@ -8,21 +8,21 @@ dashedName: center-text-with-bootstrap # --description-- -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 `text-center` to our `h2` element. +可以使用 Bootstrap 将顶部的元素居中来美化页面。 只需要将 `h2` 元素的 class 属性设置为 `text-center` 就可以实现。 -Remember that you can add several classes to the same element by separating each of them with a space, like this: +记住:可以为一个元素添加多个 classes ,class 间通过空格分隔,就像这样: `

your text

` # --hints-- -Your `h2` element should be centered by applying the class `text-center` +`h2` 元素应该通过 `text-center` class 使其居中显示 ```js assert($('h2').hasClass('text-center')); ``` -Your `h2` element should still have the class `red-text` +`h2` 元素应该包含 `red-text` class ```js assert($('h2').hasClass('red-text')); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md index 784250c7e5..101460e065 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md @@ -1,6 +1,6 @@ --- id: bad87fee1348cd8acef08812 -title: Create a Block Element Bootstrap Button +title: 创建一个 Bootstrap 块级元素按钮 challengeType: 0 forumTopicId: 16810 dashedName: create-a-block-element-bootstrap-button @@ -8,41 +8,41 @@ dashedName: create-a-block-element-bootstrap-button # --description-- -Normally, your `button` elements with the `btn` and `btn-default` classes are only as wide as the text that they contain. For example: +一般情况下,`btn` 和 `btn-default` 两个 classes 修饰的 `button` 元素宽度与它包含的文本相同, 举个例子: `` -This button would only be as wide as the word "Submit". +这个按钮的宽度应该和文本`Submit` 的宽度相同。 - + -By making them block elements with the additional class of `btn-block`, 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. +通过为按钮添加 class 属性 `btn-block` 使其成为块级元素,按钮会伸展并填满页面整个水平空间,后续的元素会流到这个块级元素的下方,即 "另起一行"。 `` -This button would take up 100% of the available width. +这个按钮会 100% 占满所有的可用宽度。 - + -Note that these buttons still need the `btn` class. +记住这些按钮仍然需要 `btn` 这个 class。 -Add Bootstrap's `btn-block` class to your Bootstrap button. +添加 Bootstrap 的 `btn-block` class 到刚创建的 Bootstrap 按钮上吧。 # --hints-- -Your button should still have the `btn` and `btn-default` classes. +按钮的 class 属性应该仍然包含 `btn` 和 `btn-default`。 ```js assert($('button').hasClass('btn') && $('button').hasClass('btn-default')); ``` -Your button should have the class `btn-block`. +按钮的 class 属性应该包含 `btn-block`。 ```js assert($('button').hasClass('btn-block')); ``` -All of your `button` elements should have closing tags. +确保所有的 `button` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md index 2cf8ce1aff..d056196aee 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md @@ -1,6 +1,6 @@ --- id: bad87fee1348cd8acdf08812 -title: Create a Bootstrap Button +title: 创建一个 Bootstrap 按钮 challengeType: 0 forumTopicId: 16811 dashedName: create-a-bootstrap-button @@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-button # --description-- -Bootstrap has its own styles for `button` elements, which look much better than the plain HTML ones. +Bootstrap 的 `button` 元素有着独有的、比默认 HTML 按钮更好的样式风格。 -Create a new `button` element below your large kitten photo. Give it the `btn` and `btn-default` classes, as well as the text of "Like". +在较大的小猫图片下方创建新的 `button` 元素。 为它添加 `btn` 与 `btn-default` 两个 classes 和 `Like` 文本。 # --hints-- -You should create a new `button` element with the text "Like". +应创建一个新的包含 `Like` 文本的 `button` 元素。 ```js assert( @@ -23,13 +23,13 @@ assert( ); ``` -Your new button should have two classes: `btn` and `btn-default`. +新的按钮元素应该有两个 classes: `btn` 和 `btn-default`。 ```js assert($('button').hasClass('btn') && $('button').hasClass('btn-default')); ``` -All of your `button` elements should have closing tags. +保证所有 `button` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md index 074aa2fc92..83c950a611 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908846 -title: Create a Bootstrap Headline +title: 创建一个 Bootstrap 标题 challengeType: 0 forumTopicId: 16812 dashedName: create-a-bootstrap-headline @@ -8,23 +8,23 @@ dashedName: create-a-bootstrap-headline # --description-- -Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills. +现在,来运用 HTML、CSS 和 Bootstrap 从头开始做点东西。 -We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges. +接下来将会搭建一个 jQuery playground,以便在后续的 jQuery 课程中使用它。 -To start with, create an `h3` element, with the text `jQuery Playground`. +首先,创建一个包含 `jQuery Playground` 文本内容的 `h3` 元素。 -Color your `h3` element with the `text-primary` Bootstrap class, and center it with the `text-center` Bootstrap class. +通过给 `h3` 元素设置 Bootstrap 的 `text-primary` class 属性来为其上色,然后添加 Bootstrap 的 `text-center` class 属性使其文本居中显示。 # --hints-- -You should add an `h3` element to your page. +为页面添加一个 `h3` 元素。 ```js assert($('h3') && $('h3').length > 0); ``` -Your `h3` element should have a closing tag. +确保 `h3` 元素有一个闭合标签。 ```js assert( @@ -34,19 +34,19 @@ assert( ); ``` -Your `h3` element should be colored by applying the class `text-primary` +为了确保成功上色,`h3` 元素应该具有 `text-primary` class。 ```js assert($('h3').hasClass('text-primary')); ``` -Your `h3` element should be centered by applying the class `text-center` +为了确保文本居中显示,`h3` 元素应该具有 `text-center` class。 ```js assert($('h3').hasClass('text-center')); ``` -Your `h3` element should have the text `jQuery Playground`. +`h3` 元素文本内容为 `jQuery Playground`。 ```js assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text())); @@ -55,7 +55,9 @@ assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text())); # --seed-- ## --seed-contents-- + ```html + ``` # --solutions-- diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md index 3a5ff315bb..7bdeb238b6 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9bec908846 -title: Create a Bootstrap Row +title: 创建一个 Bootstrap Row challengeType: 0 forumTopicId: 16813 dashedName: create-a-bootstrap-row @@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-row # --description-- -Now we'll create a Bootstrap row for our inline elements. +这次为内联元素创建一个 Bootstrap 栅格系统的 Row(行)。 -Create a `div` element below the `h3` tag, with a class of `row`. +在 `h3` 标签下方创建一个 class 属性为 `row` 的 `div` 元素。 # --hints-- -You should add a `div` element below your `h3` element. +`h3` 元素下应该增加一个 `div` 元素。 ```js assert( @@ -25,19 +25,19 @@ assert( ); ``` -Your `div` element should have the class `row` +`div` 元素的 class 属性应为 `row`。 ```js assert($('div').hasClass('row')); ``` -Your `row div` should be nested inside the `container-fluid div` +`row div` 应该内嵌于 `container-fluid div`。 ```js assert($('div.container-fluid div.row').length > 0); ``` -Your `div` element should have a closing tag. +确保所有 `div` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md index eaea933735..7e6a537c07 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908852 -title: Create a Class to Target with jQuery Selectors +title: 用 jQuery 选择器给目标元素的添加 class challengeType: 0 forumTopicId: 16815 dashedName: create-a-class-to-target-with-jquery-selectors @@ -8,13 +8,13 @@ dashedName: create-a-class-to-target-with-jquery-selectors # --description-- -Not every class needs to have corresponding CSS. Sometimes we create classes just for the purpose of selecting these elements more easily using jQuery. +并不是所有 class 属性都需要有对应的 CSS 样式。 有时候我们设置 class 只是为了更方便地在 jQuery 中选中这些元素。 -Give each of your `button` elements the class `target`. +为每一个 `button` 元素添加 `target` class。 # --hints-- -You should apply the `target` class to each of your `button` elements. +每一个 `button` 元素都应该设置 `target` class ```js assert($('.target').length > 5); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.md index 646afcbe0f..37381150cb 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aede08845 -title: Create a Custom Heading +title: 创建自定义标题 challengeType: 0 forumTopicId: 16816 dashedName: create-a-custom-heading @@ -8,23 +8,23 @@ dashedName: create-a-custom-heading # --description-- -We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row. +为 Cat Photo App 做一个导航,把标题和惬意的猫咪图片放在同一行。 -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 `div` element. +记住,由于 Bootstrap 使用了响应式栅格系统,可以很方便的把元素放到一行以及指定元素的相对宽度。 大部分的 Bootstrap 的 class 都能用在 `div` 元素上。 -Nest your first image and your `h2` element within a single `
` element. Nest your `h2` element within a `
` and your image in a `
` so that they are on the same line. +把第一张图片和 `h2` 元素用一个简单的 `
` 元素包裹起来。 再用 `
` 包裹 `h2` 元素,用 `
` 包裹我们的图片,这样它们就能位于同一行了。 -Notice how the image is now just the right size to fit along the text? +注意现在图片是否与文字大小一致呢? # --hints-- -Your `h2` element and topmost `img` element should both be nested together within a `div` element with the class `row`. +`h2` 元素和最上方的 `img` 元素应该一起内嵌于具有 `row` class 的 `div` 元素内。 ```js assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0); ``` -Your topmost `img` element should be nested within a `div` with the class `col-xs-4`. +最上方的 `img` 元素应该内嵌于含有 `col-xs-4` class 的 `div` 元素中。 ```js assert( @@ -33,7 +33,7 @@ assert( ); ``` -Your `h2` element should be nested within a `div` with the class `col-xs-8`. +`h2` 元素应该内嵌于含有 `col-xs-8` class 的 `div` 元素中。 ```js assert( @@ -42,7 +42,7 @@ assert( ); ``` -All of your `div` elements should have closing tags. +确保每一个 `div` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md index 6e79e8f12e..f9d1bd116f 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908848 -title: Create Bootstrap Wells +title: 创建 Bootstrap Wells challengeType: 0 forumTopicId: 16825 dashedName: create-bootstrap-wells @@ -8,25 +8,25 @@ dashedName: create-bootstrap-wells # --description-- -Bootstrap has a class called `well` that can create a visual sense of depth for your columns. +Bootstrap 有一个叫作 `well` 的 class,作用是使界面更具层次感。 -Nest one `div` element with the class `well` within each of your `col-xs-6` `div` elements. +在每一个 class 属性为 `col-xs-6` 的 `div` 元素中都嵌入一个带有 `well` class 的 `div` 元素。 # --hints-- -You should add a `div` element with the class `well` inside each of your `div` elements with the class `"col-xs-6"` +应在每一个 class 属性为 `col-xs-6` 的 `div` 元素中添加一个带有 `well` class 的 `div` 元素。 ```js assert($('div.col-xs-6').not(':has(>div.well)').length < 1); ``` -Both of your `div` elements with the class `"col-xs-6"` should be nested within your `div` element with the class `"row"`. +两个 class 为 `col-xs-6` 的 `div` 元素都应该嵌入一个 class 为 `row` 的 `div` 元素。 ```js assert($('div.row > div.col-xs-6').length > 1); ``` -All your `div` elements should have closing tags. +确保所有的 `div` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md index 543e90d7a2..cab4463b54 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md @@ -1,6 +1,6 @@ --- id: bad87fee1347bd9aedf08845 -title: Ditch Custom CSS for Bootstrap +title: 用 Bootstrap 来取代我们之前的自定义样式 challengeType: 0 forumTopicId: 17565 dashedName: ditch-custom-css-for-bootstrap @@ -8,31 +8,31 @@ dashedName: ditch-custom-css-for-bootstrap # --description-- -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. +现在可以清理一下之前代码,用 Bootstrap 的内置样式来替换之前定义的样式,这样 Cat Photo App 看起来更简洁些。 -Don't worry - there will be plenty of time to customize our CSS later. +别担心——以后会有大把时间来自定义 CSS 样式的。 -Delete the `.red-text`, `p`, and `.smaller-image` CSS declarations from your `style` element so that the only declarations left in your `style` element are `h2` and `thick-green-border`. +删除 `style` 元素里的 `.red-text`,`p`,和 `.smaller-image` CSS 定义,使 `style` 元素只留下 `h2` 和 `thick-green-border`。 -Then delete the `p` element that contains a dead link. Then remove the `red-text` class from your `h2` element and replace it with the `text-primary` Bootstrap class. +删除包含死链接的 `p` 元素。 然后将 `h2` 的 `red-text` class 替换为 Bootstrap 的 `text-primary` class。 -Finally, remove the "smaller-image" class from your first `img` element and replace it with the `img-responsive` class. +最后,从第一个 `img` 元素中删除 `smaller-image` class,并将其替换为 `img-responsive` class。 # --hints-- -Your h2 element should no longer have the class `red-text`. +`h2` 元素不应该有 `red-text` class。 ```js assert(!$('h2').hasClass('red-text')); ``` -Your h2 element should now have the class `text-primary`. +`h2` 元素应有 `text-primary` class。 ```js assert($('h2').hasClass('text-primary')); ``` -Your paragraph elements should no longer use the font `Monospace`. +段落元素(p)不应该再使用 `Monospace` 字体。 ```js assert( @@ -42,13 +42,13 @@ assert( ); ``` -The `smaller-image` class should be removed from your top image. +移除第一张图片的 `smaller-image` class 属性。 ```js assert(!$('img').hasClass('smaller-image')); ``` -You should add the `img-responsive` class to your top image. +给第一张图片添加 `img-responsive` class 属性。 ```js assert($('.img-responsive').length > 1); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md index 290766d634..4e55517952 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908855 -title: Give Each Element a Unique id +title: 给每个元素一个唯一的 id challengeType: 0 forumTopicId: 18191 dashedName: give-each-element-a-unique-id @@ -8,15 +8,15 @@ dashedName: give-each-element-a-unique-id # --description-- -We will also want to be able to use jQuery to target each button by its unique id. +也可以通过 jQuery 根据每个按钮唯一的 id 来定位出它们。 -Give each of your buttons a unique id, starting with `target1` and ending with `target6`. +给每一个按钮设置唯一的 id,以 `target1` 开始,`target6` 结束。 -Make sure that `target1` to `target3` are in `#left-well`, and `target4` to `target6` are in `#right-well`. +确保 `target1` 到 `target3` 在 `#left-well` 之中,`target4` 到 `target6` 在 `#right-well` 之中。 # --hints-- -One `button` element should have the id `target1`. +其中一个 `button` 元素应该有 id `target1`。 ```js assert( @@ -25,7 +25,7 @@ assert( ); ``` -One `button` element should have the id `target2`. +其中一个 `button` 元素应该有 id `target2`。 ```js assert( @@ -34,7 +34,7 @@ assert( ); ``` -One `button` element should have the id `target3`. +其中一个 `button` 元素应该有 id `target3`。 ```js assert( @@ -43,7 +43,7 @@ assert( ); ``` -One `button` element should have the id `target4`. +其中一个 `button` 元素应该有 id `target4`。 ```js assert( @@ -52,7 +52,7 @@ assert( ); ``` -One `button` element should have the id `target5`. +其中一个 `button` 元素应该有 id `target5`。 ```js assert( @@ -61,7 +61,7 @@ assert( ); ``` -One `button` element should have the id `target6`. +其中一个 `button` 元素应有 id `target6`。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md index 452f52ab47..1b16ebddee 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908746 -title: House our page within a Bootstrap container-fluid div +title: 将页面放在 container-fluid div 中 challengeType: 0 forumTopicId: 18198 dashedName: house-our-page-within-a-bootstrap-container-fluid-div @@ -8,19 +8,19 @@ dashedName: house-our-page-within-a-bootstrap-container-fluid-div # --description-- -Now let's make sure all the content on your page is mobile-responsive. +现在确保页面所有内容都可以响应移动端。 -Let's nest your `h3` element within a `div` element with the class `container-fluid`. +将的 `h3` 元素内嵌进一个具有 `container-fluid` class 的`div` 元素中。 # --hints-- -Your `div` element should have the class `container-fluid`. +`div` 元素 class 属性应该为 `container-fluid`。 ```js assert($('div').hasClass('container-fluid')); ``` -Each of your `div` elements should have closing tags. +确保每一个 `div` 元素都有一个闭合标签。 ```js assert( @@ -30,7 +30,7 @@ assert( ); ``` -Your `h3` element should be nested inside a `div` element. +`h3` 元素应该内嵌于 `div` 元素。 ```js assert($('div').children('h3').length > 0); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md index 06e1b6f63b..7cc92113f3 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908856 -title: Label Bootstrap Buttons +title: 给 Bootstrap 按钮设置标签 challengeType: 0 forumTopicId: 18222 dashedName: label-bootstrap-buttons @@ -8,43 +8,43 @@ dashedName: label-bootstrap-buttons # --description-- -Just like we labeled our wells, we want to label our buttons. +正如标注了每个 wells 一样,同样可以标注每一个按钮。 -Give each of your `button` elements text that corresponds to its `id`'s selector. +为每个 `button` 元素设置与其 id 选择器对应的文本。 # --hints-- -Your `button` element with the id `target1` should have the text `#target1`. +应给 id 为 `target1` 的 `button` 元素设置文本为 `#target1`。 ```js assert(new RegExp('#target1', 'gi').test($('#target1').text())); ``` -Your `button` element with the id `target2` should have the text `#target2`. +应给 id 为 `target2` 的 `button` 元素设置文本为`#target2`。 ```js assert(new RegExp('#target2', 'gi').test($('#target2').text())); ``` -Your `button` element with the id `target3` should have the text `#target3`. +应给 id 为 `target3` 的 `button` 元素设置文本为 `#target3`。 ```js assert(new RegExp('#target3', 'gi').test($('#target3').text())); ``` -Your `button` element with the id `target4` should have the text `#target4`. +应给 id 为 `target4` 的 `button` 元素设置文本为 `#target4`。 ```js assert(new RegExp('#target4', 'gi').test($('#target4').text())); ``` -Your `button` element with the id `target5` should have the text `#target5`. +应给 id 为 `target5` 的 `button` 元素设置文本为`#target5`。 ```js assert(new RegExp('#target5', 'gi').test($('#target5').text())); ``` -Your `button` element with the id `target6` should have the text `#target6`. +应给 id 为 `target6` 的 `button` 元素设置文本为`#target6`。 ```js assert(new RegExp('#target6', 'gi').test($('#target6').text())); diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md index cae4c4837f..f7ca976691 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908854 -title: Label Bootstrap Wells +title: 给 Bootstrap Wells 设置标签 challengeType: 0 forumTopicId: 18223 dashedName: label-bootstrap-wells @@ -8,15 +8,15 @@ dashedName: label-bootstrap-wells # --description-- -For the sake of clarity, let's label both of our wells with their ids. +为了让页面逻辑更清晰,每个 wells 都标上它们的 id 吧。 -Above your left-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#left-well`. +在 left-well 的上一层,class 属性为 `col-xs-6` 的 `div` 元素里面,增加一个文本为 `#left-well` 的 `h4` 元素。 -Above your right-well, inside its `col-xs-6` `div` element, add a `h4` element with the text `#right-well`. +在 right-well 的上一层,class 属性为 `col-xs-6` 的 `div` 元素里面,增加一个文本为 `#right-well` 的 `h4` 元素。 # --hints-- -You should add an `h4` element to each of your `
` elements. +应该为每个 `
` 元素添加一个 `h4` 元素。 ```js assert( @@ -24,19 +24,19 @@ assert( ); ``` -One `h4` element should have the text `#left-well`. +其中一个 `h4` 元素应该含有文本内容 `#left-well`。 ```js assert(new RegExp('#left-well', 'gi').test($('h4').text())); ``` -One `h4` element should have the text `#right-well`. +其中一个 `h4` 元素应该含有文本内容 `#right-well`。 ```js assert(new RegExp('#right-well', 'gi').test($('h4').text())); ``` -All of your `h4` elements should have closing tags. +确保每个 `h4` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md index b6037f8333..517053ab51 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908845 -title: Line up Form Elements Responsively with Bootstrap +title: 使用 Bootstrap 响应式排列表单元素 challengeType: 0 forumTopicId: 18225 required: @@ -13,15 +13,15 @@ dashedName: line-up-form-elements-responsively-with-bootstrap # --description-- -Now let's get your form `input` and your submission `button` on the same line. We'll do this the same way we have previously: by using a `div` element with the class `row`, and other `div` elements within it using the `col-xs-*` class. +现在把表单里的 `input` 元素和 submit `button` (提交按钮)放在同一行。 跟着之前的做法来就行:准备好一个具有 `row` class 的 `div` 元素还有几个具有 `col-xs-*` class 的 `div` 元素。 -Nest both your form's text `input` and submit `button` within a `div` with the class `row`. Nest your form's text `input` within a div with the class of `col-xs-7`. Nest your form's submit `button` in a `div` with the class `col-xs-5`. +先把表单的 text `input` (文本输入框)和 submit `button` (提交按钮)放进具有 `row` class 的 `div` 中。 再用 `col-xs-7` class 的 div 包裹表单的 text `input` (文本输入框), `col-xs-5` class 的 `div` 包裹表单的 submit `button` (提交按钮)。 -This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design! +这是我们到目前为止 Cat Photo App 的最后一个挑战了。 祝你编码愉快。 # --hints-- -Your form submission button and text input should be nested in a div with class `row`. +确保提交按钮和文本输入框都在同一个具有 class 属性 `row` 的 div 元素中。 ```js assert( @@ -30,19 +30,19 @@ assert( ); ``` -Your form text input should be nested in a div with the class `col-xs-7`. +表单的文本输入框应该嵌入到 `col-xs-7` class 属性的 div 内。 ```js assert($('div.col-xs-7:has(input[type="text"])').length > 0); ``` -Your form submission button should be nested in a div with the class `col-xs-5`. +表单的提交按钮应该嵌入到 `col-xs-5` class 属性的 div 内。 ```js assert($('div.col-xs-5:has(button[type="submit"])').length > 0); ``` -All of your `div` elements should have closing tags. +确保每一个 `div` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md index 54c1ec8e26..0375a20f5b 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9acde08812 -title: Make Images Mobile Responsive +title: 使图片自适应移动端 challengeType: 0 forumTopicId: 18232 dashedName: make-images-mobile-responsive @@ -8,39 +8,39 @@ dashedName: make-images-mobile-responsive # --description-- -First, add a new image below the existing one. Set its `src` attribute to `https://bit.ly/fcc-running-cats`. +首先,在已有的图片下面添加一张新的图片。 设置其 `src` 属性为 `https://bit.ly/fcc-running-cats`。 -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. +幸运的是,现在通过 Bootstrap,我们仅仅只需要为 image 标签上设置 class 属性为 `img-responsive` , 就可以让它完美地适应你的页面的宽度了。 # --hints-- -You should have a total of two images. +该页面共有两张图片。 ```js assert($('img').length === 2); ``` -Your new image should be below your old one and have the class `img-responsive`. +新的图片应该在旧的图片下面并且有值包含 `img-responsive` 的 class 属性。 ```js assert($('img:eq(1)').hasClass('img-responsive')); ``` -Your new image should not have the class `smaller-image`. +新图片的 class 不应该包含 `smaller-image`。 ```js assert(!$('img:eq(1)').hasClass('smaller-image')); ``` -Your new image should have a `src` of `https://bit.ly/fcc-running-cats`. +新图片的 `src` 属性值应该为 `https://bit.ly/fcc-running-cats`。 ```js assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats'); ``` -Your new `img` element should have a closing angle bracket. +确保新的 `img` 元素有一个闭合的尖括号。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md index 8fcf0774c8..d832fed321 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aeda08845 -title: Responsively Style Checkboxes +title: 响应式风格的复选框 challengeType: 0 forumTopicId: 18269 required: @@ -13,27 +13,27 @@ dashedName: responsively-style-checkboxes # --description-- -Since Bootstrap's `col-xs-*` classes are applicable to all `form` elements, you can use them on your checkboxes too! This way, the checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is. +Bootstrap 的 `col-xs-*` 可应用于所有的 `form` 元素上,包括复选框! 这样就可以不必关注屏幕大小,均匀地把复选框放在页面上了。 # --instructions-- -Nest all three of your checkboxes in a `
` element. Then nest each of them in a `
` element. +将所有三个复选框都放置于一个 `
` 元素中。 然后分别把每个复选框都放置于一个 `
` 元素中。 # --hints-- -All of your checkboxes should be nested inside one `div` with the class `row`. +将所有的复选框嵌入一个含有 `row` class 的 `div` 元素中。 ```js assert($('div.row:has(input[type="checkbox"])').length > 0); ``` -Each of your checkboxes should be nested inside its own `div` with the class `col-xs-4`. +每一个复选框应该嵌套于单独的具有 `col-xs-4` class 的 `div` 元素中。 ```js assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2); ``` -All of your `div` elements should have closing tags. +确保所有 `div` 元素都有一个闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md index 3541d7fead..9515a94221 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aedb08845 -title: Responsively Style Radio Buttons +title: 响应式风格的单选按钮 challengeType: 0 forumTopicId: 18270 required: @@ -13,27 +13,27 @@ dashedName: responsively-style-radio-buttons # --description-- -You can use Bootstrap's `col-xs-*` classes on `form` elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is. +Bootstrap 的 `col-xs-*` class 也可以用在 `form` 元素上! 这样就可以在不关心屏幕大小的情况下,将的单选按钮均匀的平铺在页面上。 -Nest both your radio buttons within a `
` element. Then nest each of them within a `
` element. +将所有单选按钮放入 `
` 元素中。 再用 `
` 元素包裹每一个单选按钮。 -**Note:** As a reminder, radio buttons are `input` elements of type `radio`. +**注意:** 提醒一句,单选按钮是 type 为 `radio` 的 `input` 元素。 # --hints-- -All of your radio buttons should be nested inside one `div` with the class `row`. +所有的单选按钮应该放置于具有 `row` class 的 `div` 元素中。 ```js assert($('div.row:has(input[type="radio"])').length > 0); ``` -Each of your radio buttons should be nested inside its own `div` with the class `col-xs-6`. +每一个单选按钮应该嵌套于具有 class 属性为 `col-xs-6` 的 `div` 元素之中。 ```js assert($('div.col-xs-6:has(input[type="radio"])').length > 1); ``` -All of your `div` elements should have closing tags. +确保所有 `div` 元素都有闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md index 440c9a7740..497936be8f 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aec908847 -title: Split Your Bootstrap Row +title: 分割 Bootstrap Row challengeType: 0 forumTopicId: 18306 dashedName: split-your-bootstrap-row @@ -8,19 +8,19 @@ dashedName: split-your-bootstrap-row # --description-- -Now that we have a Bootstrap Row, let's split it into two columns to house our elements. +现在已经有了一个 Bootstrap Row,把它分成两列。 -Create two `div` elements within your row, both with the class `col-xs-6`. +在行内创建两个 class 属性为 `col-xs-6` 的 `div` 元素。 # --hints-- -Two `div class="col-xs-6"` elements should be nested within your `div class="row"` element. +两个 `div class="col-xs-6"` 元素应该内嵌入 `div class="row"` 元素中。 ```js assert($('div.row > div.col-xs-6').length > 1); ``` -All your `div` elements should have closing tags. +确保所有的 `div` 元素都有闭合标签。 ```js assert( diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md index 513456f26c..30a474a0df 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md @@ -1,6 +1,6 @@ --- id: bad87fee1348bd9aed908845 -title: Style Text Inputs as Form Controls +title: 给表单输入框添加样式 challengeType: 0 forumTopicId: 18312 required: @@ -13,33 +13,33 @@ dashedName: style-text-inputs-as-form-controls # --description-- -You can add the `fa-paper-plane` Font Awesome icon by adding `` within your submit `button` element. +可以在 submit `button` 元素内加上 ``,来添加 Font Awesome 的 `fa-paper-plane` 图标。 -Give your form's text input field a class of `form-control`. Give your form's submit button the classes `btn btn-primary`. Also give this button the Font Awesome icon of `fa-paper-plane`. +为表单的文本输入框(text input)设置 `form-control` class。 为表单的提交(submit)按钮设置 `btn btn-primary` class, 并为它加上 Font Awesome 的 `fa-paper-plane` 图标。 -All textual ``, `