gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i8n,learn): processed translations (#41364)

Browse Source 
Co-authored-by: Crowdin Bot <support+bot@crowdin.com>
This commit is contained in:
camperbot
2021-03-04 19:55:32 -07:00
committed by GitHub
parent c000c7ab11
commit d58e605825
36 changed files with 275 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md
View File

@ -1,6 +1,6 @@
--- ---
id: a77dbc43c33f39daa4429b4f id: a77dbc43c33f39daa4429b4f
title: Boo who title: 基本类型布尔值的检查
challengeType: 5 challengeType: 5
forumTopicId: 16000 forumTopicId: 16000
dashedName: boo-who dashedName: boo-who
@ -8,67 +8,67 @@ dashedName: boo-who
# --description-- # --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-- # --hints--
`booWho(true)` should return true. `booWho(true)` 应返回 `true`。
```js ```js
assert.strictEqual(booWho(true), true); assert.strictEqual(booWho(true), true);
``` ```
`booWho(false)` should return true. `booWho(false)` 应该返回 `true`。
```js ```js
assert.strictEqual(booWho(false), true); assert.strictEqual(booWho(false), true);
``` ```
`booWho([1, 2, 3])` should return false. `booWho([1, 2, 3])` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho([1, 2, 3]), false); assert.strictEqual(booWho([1, 2, 3]), false);
``` ```
`booWho([].slice)` should return false. `booWho([].slice)` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho([].slice), false); assert.strictEqual(booWho([].slice), false);
``` ```
`booWho({ "a": 1 })` should return false. `booWho({ "a": 1 })` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho({ a: 1 }), false); assert.strictEqual(booWho({ a: 1 }), false);
``` ```
`booWho(1)` should return false. `booWho(1)` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho(1), false); assert.strictEqual(booWho(1), false);
``` ```
`booWho(NaN)` should return false. `booWho(NaN)` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho(NaN), false); assert.strictEqual(booWho(NaN), false);
``` ```
`booWho("a")` should return false. `booWho("a")` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho('a'), false); assert.strictEqual(booWho('a'), false);
``` ```
`booWho("true")` should return false. `booWho("true")` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho('true'), false); assert.strictEqual(booWho('true'), false);
``` ```
`booWho("false")` should return false. `booWho("false")` 应该返回 `false`。
```js ```js
assert.strictEqual(booWho('false'), false); assert.strictEqual(booWho('false'), false);

2
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
View File

@ -49,7 +49,9 @@ if(typeof myName !== "undefined"){(function(v){return v;})(myName);}
``` ```
## --seed-contents-- ## --seed-contents--
```js ```js
``` ```
# --solutions-- # --solutions--

2
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md
View File

@ -36,7 +36,9 @@ if(typeof a !== 'undefined') {(function(a){return "a = " + a;})(a);} else { (fun
``` ```
## --seed-contents-- ## --seed-contents--
```js ```js
``` ```
# --solutions-- # --solutions--

12
curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md
View File

@ -1,6 +1,6 @@
--- ---
id: bd7993c9c69feddfaeb7bdef id: bd7993c9c69feddfaeb7bdef
title: Multiply Two Decimals with JavaScript title: 两个小数相乘
challengeType: 1 challengeType: 1
videoUrl: 'https://scrimba.com/c/ce2GeHq' videoUrl: 'https://scrimba.com/c/ce2GeHq'
forumTopicId: 301173 forumTopicId: 301173
@ -9,23 +9,23 @@ dashedName: multiply-two-decimals-with-javascript
# --description-- # --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-- # --instructions--
Change the `0.0` so that product will equal `5.0`. 改变 `0.0` 的数值让变量 product 的值等于 `5.0`。
# --hints-- # --hints--
The variable `product` should equal `5.0`. 变量 `product` 应该等于 `5.0`。
```js ```js
assert(product === 5.0); assert(product === 5.0);
``` ```
You should use the `*` operator 要使用`*`运算符。
```js ```js
assert(/\*/.test(code)); assert(/\*/.test(code));

12
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908849 id: bad87fee1348bd9aec908849
title: Add Elements within Your Bootstrap Wells title: 在 Bootstrap Wells 中添加元素
challengeType: 0 challengeType: 0
forumTopicId: 16636 forumTopicId: 16636
dashedName: add-elements-within-your-bootstrap-wells dashedName: add-elements-within-your-bootstrap-wells
@ -8,13 +8,13 @@ dashedName: add-elements-within-your-bootstrap-wells
# --description-- # --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-- # --hints--
Three `button` elements should be nested within each of your `div` elements with class `well`. 每一个 class 属性为 `well` 的 `div` 元素内都应该放三个 `button` 元素。
```js ```js
assert( assert(
@ -23,13 +23,13 @@ assert(
); );
``` ```
You should have a total of 6 `button` elements. 总共有 6 个 `button` 元素。
```js ```js
assert($('button') && $('button').length > 5); assert($('button') && $('button').length > 5);
``` ```
All of your `button` elements should have closing tags. 确保所有 `button` 元素都有闭合标签。
```js ```js
assert( assert(

14
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aedc08845 id: bad87fee1348bd9aedc08845
title: Add Font Awesome Icons to all of our Buttons title: 将字体图标添加到所有的按钮上
challengeType: 0 challengeType: 0
forumTopicId: 16637 forumTopicId: 16637
required: required:
@ -12,17 +12,17 @@ dashedName: add-font-awesome-icons-to-all-of-our-buttons
# --description-- # --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-- # --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-- # --hints--
You should add a `<i class="fas fa-info-circle"></i>` within your info button element. 应在 `info` 按钮元素中添加一个 `<i class="fas fa-info-circle"></i>`。
```js ```js
assert( assert(
@ -31,7 +31,7 @@ assert(
); );
``` ```
You should add a `<i class="fas fa-trash"></i>` within your delete button element. 应在 `delete` 按钮元素中添加一个 `<i class="fas fa-trash"></i>`。
```js ```js
assert( assert(
@ -40,7 +40,7 @@ assert(
); );
``` ```
Each of your `i` elements should have a closing tag and `<i class="fas fa-thumbs-up"></i>` is in your like button element. 每个 `i` 元素都应有一个闭合标签，`<i class="fas fa-thumbs-up"></i>` 在 `like` 标签元素中。
```js ```js
assert( assert(

22
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aedd08845 id: bad87fee1348bd9aedd08845
title: Add Font Awesome Icons to our Buttons title: 在按钮中添加字体图标
challengeType: 0 challengeType: 0
forumTopicId: 16638 forumTopicId: 16638
required: required:
@ -12,33 +12,33 @@ dashedName: add-font-awesome-icons-to-our-buttons
# --description-- # --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 头部增加下列代码即可：
`<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">` `<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">`
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` 元素中，让它变成一个图标，比如：
`<i class="fas fa-info-circle"></i>` `<i class="fas fa-info-circle"></i>`
Note that the `span` element is also acceptable for use with icons. 注意用 `span` 元素展示图标也是可以的。
# --instructions-- # --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-- # --hints--
You should add an `i` element with the classes `fas` and `fa-thumbs-up`. 增加一个 class 为 `fas` 和 `fa-thumbs-up` 的 `i` 元素。
```js ```js
assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up')); 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 ```js
assert( assert(
@ -49,7 +49,7 @@ assert(
); );
``` ```
Your `i` element should be nested within your `button` element. `i` 元素应该在 `button` 元素中。
```js ```js
assert( assert(
@ -58,7 +58,7 @@ assert(
); );
``` ```
Your icon element should have a closing tag. 确保图标元素有一个闭合标签。
```js ```js
assert(code.match(/<\/i>|<\/span>/g)); assert(code.match(/<\/i>|<\/span>/g));

16
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908853 id: bad87fee1348bd9aec908853
title: Add id Attributes to Bootstrap Elements title: 给 Bootstrap 元素添加 id 属性
challengeType: 0 challengeType: 0
forumTopicId: 16639 forumTopicId: 16639
dashedName: add-id-attributes-to-bootstrap-elements dashedName: add-id-attributes-to-bootstrap-elements
@ -8,21 +8,21 @@ dashedName: add-id-attributes-to-bootstrap-elements
# --description-- # --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：
`<div class="well" id="center-well">` `<div class="well" id="center-well">`
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-- # --hints--
Your left `well` should have the id of `left-well`. 左边 `well` 的 id 应该为 `left-well`。
```js ```js
assert( assert(
@ -31,7 +31,7 @@ assert(
); );
``` ```
Your right `well` should have the id of `right-well`. 右边的 `well` 的 id 应该为 `right-well`。
```js ```js
assert( assert(

10
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908850 id: bad87fee1348bd9aec908850
title: Apply the Default Bootstrap Button Style title: 给 Bootstrap 按钮添加默认样式
challengeType: 0 challengeType: 0
forumTopicId: 16657 forumTopicId: 16657
dashedName: apply-the-default-bootstrap-button-style dashedName: apply-the-default-bootstrap-button-style
@ -8,19 +8,19 @@ dashedName: apply-the-default-bootstrap-button-style
# --description-- # --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-- # --hints--
You should apply the `btn` class to each of your `button` elements. 应该将 `btn` class 添加到所有的 `button` 元素中。
```js ```js
assert($('.btn').length > 5); assert($('.btn').length > 5);
``` ```
You should apply the `btn-default` class to each of your `button` elements. 应该将 `btn-default` class 添加到每一个 `button` 元素中。
```js ```js
assert($('.btn-default').length > 5); assert($('.btn-default').length > 5);

16
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348cd8acef08813 id: bad87fee1348cd8acef08813
title: Call out Optional Actions with btn-info title: 可选操作样式 btn-info
challengeType: 0 challengeType: 0
forumTopicId: 16770 forumTopicId: 16770
dashedName: call-out-optional-actions-with-btn-info dashedName: call-out-optional-actions-with-btn-info
@ -8,33 +8,33 @@ dashedName: call-out-optional-actions-with-btn-info
# --description-- # --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-- # --hints--
You should create a new `button` element with the text "Info". 应创建一个新的包含 `Info` 文本的 `button` 元素。
```js ```js
assert(new RegExp('info', 'gi').test($('button').text())); 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 ```js
assert($('button.btn-block.btn').length > 1); assert($('button.btn-block.btn').length > 1);
``` ```
Your new button should have the class `btn-info`. 新按钮的 class 属性应该含有 `btn-info`。
```js ```js
assert($('button').hasClass('btn-info')); assert($('button').hasClass('btn-info'));
``` ```
All of your `button` elements should have closing tags. 确保所有的 `button` 元素都有一个闭合标签。
```js ```js
assert( assert(

10
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd8acde08812 id: bad87fee1348bd8acde08812
title: Center Text with Bootstrap title: 用 Bootstrap 居中文本
challengeType: 0 challengeType: 0
forumTopicId: 16771 forumTopicId: 16771
dashedName: center-text-with-bootstrap dashedName: center-text-with-bootstrap
@ -8,21 +8,21 @@ dashedName: center-text-with-bootstrap
# --description-- # --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 间通过空格分隔，就像这样：
`<h2 class="red-text text-center">your text</h2>` `<h2 class="red-text text-center">your text</h2>`
# --hints-- # --hints--
Your `h2` element should be centered by applying the class `text-center` `h2` 元素应该通过 `text-center` class 使其居中显示
```js ```js
assert($('h2').hasClass('text-center')); assert($('h2').hasClass('text-center'));
``` ```
Your `h2` element should still have the class `red-text` `h2` 元素应该包含 `red-text` class
```js ```js
assert($('h2').hasClass('red-text')); assert($('h2').hasClass('red-text'));

24
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348cd8acef08812 id: bad87fee1348cd8acef08812
title: Create a Block Element Bootstrap Button title: 创建一个 Bootstrap 块级元素按钮
challengeType: 0 challengeType: 0
forumTopicId: 16810 forumTopicId: 16810
dashedName: create-a-block-element-bootstrap-button dashedName: create-a-block-element-bootstrap-button
@ -8,41 +8,41 @@ dashedName: create-a-block-element-bootstrap-button
# --description-- # --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` 元素宽度与它包含的文本相同， 举个例子：
`<button class="btn btn-default">Submit</button>` `<button class="btn btn-default">Submit</button>`
This button would only be as wide as the word "Submit". 这个按钮的宽度应该和文本`Submit` 的宽度相同。
<button class='btn btn-default'>Submit</button> <button class='btn btn-default'>提交</button>
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` 使其成为块级元素，按钮会伸展并填满页面整个水平空间，后续的元素会流到这个块级元素的下方，即 "另起一行"。
`<button class="btn btn-default btn-block">Submit</button>` `<button class="btn btn-default btn-block">Submit</button>`
This button would take up 100% of the available width. 这个按钮会 100% 占满所有的可用宽度。
<button class='btn btn-default btn-block'>Submit</button> <button class='btn btn-default btn-block'>提交</button>
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-- # --hints--
Your button should still have the `btn` and `btn-default` classes. 按钮的 class 属性应该仍然包含 `btn` 和 `btn-default`。
```js ```js
assert($('button').hasClass('btn') && $('button').hasClass('btn-default')); assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
``` ```
Your button should have the class `btn-block`. 按钮的 class 属性应该包含 `btn-block`。
```js ```js
assert($('button').hasClass('btn-block')); assert($('button').hasClass('btn-block'));
``` ```
All of your `button` elements should have closing tags. 确保所有的 `button` 元素都有一个闭合标签。
```js ```js
assert( assert(

12
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348cd8acdf08812 id: bad87fee1348cd8acdf08812
title: Create a Bootstrap Button title: 创建一个 Bootstrap 按钮
challengeType: 0 challengeType: 0
forumTopicId: 16811 forumTopicId: 16811
dashedName: create-a-bootstrap-button dashedName: create-a-bootstrap-button
@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-button
# --description-- # --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-- # --hints--
You should create a new `button` element with the text "Like". 应创建一个新的包含 `Like` 文本的 `button` 元素。
```js ```js
assert( assert(
@ -23,13 +23,13 @@ assert(
); );
``` ```
Your new button should have two classes: `btn` and `btn-default`. 新的按钮元素应该有两个 classes: `btn` 和 `btn-default`。
```js ```js
assert($('button').hasClass('btn') && $('button').hasClass('btn-default')); assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
``` ```
All of your `button` elements should have closing tags. 保证所有 `button` 元素都有一个闭合标签。
```js ```js
assert( assert(

22
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908846 id: bad87fee1348bd9aec908846
title: Create a Bootstrap Headline title: 创建一个 Bootstrap 标题
challengeType: 0 challengeType: 0
forumTopicId: 16812 forumTopicId: 16812
dashedName: create-a-bootstrap-headline dashedName: create-a-bootstrap-headline
@ -8,23 +8,23 @@ dashedName: create-a-bootstrap-headline
# --description-- # --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-- # --hints--
You should add an `h3` element to your page. 为页面添加一个 `h3` 元素。
```js ```js
assert($('h3') && $('h3').length > 0); assert($('h3') && $('h3').length > 0);
``` ```
Your `h3` element should have a closing tag. 确保 `h3` 元素有一个闭合标签。
```js ```js
assert( assert(
@ -34,19 +34,19 @@ assert(
); );
``` ```
Your `h3` element should be colored by applying the class `text-primary` 为了确保成功上色，`h3` 元素应该具有 `text-primary` class。
```js ```js
assert($('h3').hasClass('text-primary')); assert($('h3').hasClass('text-primary'));
``` ```
Your `h3` element should be centered by applying the class `text-center` 为了确保文本居中显示，`h3` 元素应该具有 `text-center` class。
```js ```js
assert($('h3').hasClass('text-center')); assert($('h3').hasClass('text-center'));
``` ```
Your `h3` element should have the text `jQuery Playground`. `h3` 元素文本内容为 `jQuery Playground`。
```js ```js
assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text())); assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
@ -55,7 +55,9 @@ assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
# --seed-- # --seed--
## --seed-contents-- ## --seed-contents--
```html ```html
``` ```
# --solutions-- # --solutions--

14
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9bec908846 id: bad87fee1348bd9bec908846
title: Create a Bootstrap Row title: 创建一个 Bootstrap Row
challengeType: 0 challengeType: 0
forumTopicId: 16813 forumTopicId: 16813
dashedName: create-a-bootstrap-row dashedName: create-a-bootstrap-row
@ -8,13 +8,13 @@ dashedName: create-a-bootstrap-row
# --description-- # --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-- # --hints--
You should add a `div` element below your `h3` element. `h3` 元素下应该增加一个 `div` 元素。
```js ```js
assert( assert(
@ -25,19 +25,19 @@ assert(
); );
``` ```
Your `div` element should have the class `row` `div` 元素的 class 属性应为 `row`。
```js ```js
assert($('div').hasClass('row')); assert($('div').hasClass('row'));
``` ```
Your `row div` should be nested inside the `container-fluid div` `row div` 应该内嵌于 `container-fluid div`。
```js ```js
assert($('div.container-fluid div.row').length > 0); assert($('div.container-fluid div.row').length > 0);
``` ```
Your `div` element should have a closing tag. 确保所有 `div` 元素都有一个闭合标签。
```js ```js
assert( assert(

8
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908852 id: bad87fee1348bd9aec908852
title: Create a Class to Target with jQuery Selectors title: 用 jQuery 选择器给目标元素的添加 class
challengeType: 0 challengeType: 0
forumTopicId: 16815 forumTopicId: 16815
dashedName: create-a-class-to-target-with-jquery-selectors dashedName: create-a-class-to-target-with-jquery-selectors
@ -8,13 +8,13 @@ dashedName: create-a-class-to-target-with-jquery-selectors
# --description-- # --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-- # --hints--
You should apply the `target` class to each of your `button` elements. 每一个 `button` 元素都应该设置 `target` class
```js ```js
assert($('.target').length > 5); assert($('.target').length > 5);

18
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aede08845 id: bad87fee1348bd9aede08845
title: Create a Custom Heading title: 创建自定义标题
challengeType: 0 challengeType: 0
forumTopicId: 16816 forumTopicId: 16816
dashedName: create-a-custom-heading dashedName: create-a-custom-heading
@ -8,23 +8,23 @@ dashedName: create-a-custom-heading
# --description-- # --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 `<div class="row">` element. Nest your `h2` element within a `<div class="col-xs-8">` and your image in a `<div class="col-xs-4">` so that they are on the same line. 把第一张图片和 `h2` 元素用一个简单的 `<div class="row">` 元素包裹起来。 再用 `<div class="col-xs-8">` 包裹 `h2` 元素，用 `<div class="col-xs-4">` 包裹我们的图片，这样它们就能位于同一行了。
Notice how the image is now just the right size to fit along the text? 注意现在图片是否与文字大小一致呢？
# --hints-- # --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 ```js
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0); 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 ```js
assert( 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 ```js
assert( assert(
@ -42,7 +42,7 @@ assert(
); );
``` ```
All of your `div` elements should have closing tags. 确保每一个 `div` 元素都有一个闭合标签。
```js ```js
assert( assert(

12
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908848 id: bad87fee1348bd9aec908848
title: Create Bootstrap Wells title: 创建 Bootstrap Wells
challengeType: 0 challengeType: 0
forumTopicId: 16825 forumTopicId: 16825
dashedName: create-bootstrap-wells dashedName: create-bootstrap-wells
@ -8,25 +8,25 @@ dashedName: create-bootstrap-wells
# --description-- # --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-- # --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 ```js
assert($('div.col-xs-6').not(':has(>div.well)').length < 1); 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 ```js
assert($('div.row > div.col-xs-6').length > 1); assert($('div.row > div.col-xs-6').length > 1);
``` ```
All your `div` elements should have closing tags. 确保所有的 `div` 元素都有一个闭合标签。
```js ```js
assert( assert(

22
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1347bd9aedf08845 id: bad87fee1347bd9aedf08845
title: Ditch Custom CSS for Bootstrap title: 用 Bootstrap 来取代我们之前的自定义样式
challengeType: 0 challengeType: 0
forumTopicId: 17565 forumTopicId: 17565
dashedName: ditch-custom-css-for-bootstrap dashedName: ditch-custom-css-for-bootstrap
@ -8,31 +8,31 @@ dashedName: ditch-custom-css-for-bootstrap
# --description-- # --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-- # --hints--
Your h2 element should no longer have the class `red-text`. `h2` 元素不应该有 `red-text` class。
```js ```js
assert(!$('h2').hasClass('red-text')); assert(!$('h2').hasClass('red-text'));
``` ```
Your h2 element should now have the class `text-primary`. `h2` 元素应有 `text-primary` class。
```js ```js
assert($('h2').hasClass('text-primary')); assert($('h2').hasClass('text-primary'));
``` ```
Your paragraph elements should no longer use the font `Monospace`. 段落元素（p）不应该再使用 `Monospace` 字体。
```js ```js
assert( assert(
@ -42,13 +42,13 @@ assert(
); );
``` ```
The `smaller-image` class should be removed from your top image. 移除第一张图片的 `smaller-image` class 属性。
```js ```js
assert(!$('img').hasClass('smaller-image')); assert(!$('img').hasClass('smaller-image'));
``` ```
You should add the `img-responsive` class to your top image. 给第一张图片添加 `img-responsive` class 属性。
```js ```js
assert($('.img-responsive').length > 1); assert($('.img-responsive').length > 1);

20
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908855 id: bad87fee1348bd9aec908855
title: Give Each Element a Unique id title: 给每个元素一个唯一的 id
challengeType: 0 challengeType: 0
forumTopicId: 18191 forumTopicId: 18191
dashedName: give-each-element-a-unique-id dashedName: give-each-element-a-unique-id
@ -8,15 +8,15 @@ dashedName: give-each-element-a-unique-id
# --description-- # --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-- # --hints--
One `button` element should have the id `target1`. 其中一个 `button` 元素应该有 id `target1`。
```js ```js
assert( assert(
@ -25,7 +25,7 @@ assert(
); );
``` ```
One `button` element should have the id `target2`. 其中一个 `button` 元素应该有 id `target2`。
```js ```js
assert( assert(
@ -34,7 +34,7 @@ assert(
); );
``` ```
One `button` element should have the id `target3`. 其中一个 `button` 元素应该有 id `target3`。
```js ```js
assert( assert(
@ -43,7 +43,7 @@ assert(
); );
``` ```
One `button` element should have the id `target4`. 其中一个 `button` 元素应该有 id `target4`。
```js ```js
assert( assert(
@ -52,7 +52,7 @@ assert(
); );
``` ```
One `button` element should have the id `target5`. 其中一个 `button` 元素应该有 id `target5`。
```js ```js
assert( assert(
@ -61,7 +61,7 @@ assert(
); );
``` ```
One `button` element should have the id `target6`. 其中一个 `button` 元素应有 id `target6`。
```js ```js
assert( assert(

12
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908746 id: bad87fee1348bd9aec908746
title: House our page within a Bootstrap container-fluid div title: 将页面放在 container-fluid div 中
challengeType: 0 challengeType: 0
forumTopicId: 18198 forumTopicId: 18198
dashedName: house-our-page-within-a-bootstrap-container-fluid-div 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-- # --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-- # --hints--
Your `div` element should have the class `container-fluid`. `div` 元素 class 属性应该为 `container-fluid`。
```js ```js
assert($('div').hasClass('container-fluid')); assert($('div').hasClass('container-fluid'));
``` ```
Each of your `div` elements should have closing tags. 确保每一个 `div` 元素都有一个闭合标签。
```js ```js
assert( assert(
@ -30,7 +30,7 @@ assert(
); );
``` ```
Your `h3` element should be nested inside a `div` element. `h3` 元素应该内嵌于 `div` 元素。
```js ```js
assert($('div').children('h3').length > 0); assert($('div').children('h3').length > 0);

18
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908856 id: bad87fee1348bd9aec908856
title: Label Bootstrap Buttons title: 给 Bootstrap 按钮设置标签
challengeType: 0 challengeType: 0
forumTopicId: 18222 forumTopicId: 18222
dashedName: label-bootstrap-buttons dashedName: label-bootstrap-buttons
@ -8,43 +8,43 @@ dashedName: label-bootstrap-buttons
# --description-- # --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-- # --hints--
Your `button` element with the id `target1` should have the text `#target1`. 应给 id 为 `target1` 的 `button` 元素设置文本为 `#target1`。
```js ```js
assert(new RegExp('#target1', 'gi').test($('#target1').text())); 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 ```js
assert(new RegExp('#target2', 'gi').test($('#target2').text())); 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 ```js
assert(new RegExp('#target3', 'gi').test($('#target3').text())); 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 ```js
assert(new RegExp('#target4', 'gi').test($('#target4').text())); 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 ```js
assert(new RegExp('#target5', 'gi').test($('#target5').text())); 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 ```js
assert(new RegExp('#target6', 'gi').test($('#target6').text())); assert(new RegExp('#target6', 'gi').test($('#target6').text()));

16
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908854 id: bad87fee1348bd9aec908854
title: Label Bootstrap Wells title: 给 Bootstrap Wells 设置标签
challengeType: 0 challengeType: 0
forumTopicId: 18223 forumTopicId: 18223
dashedName: label-bootstrap-wells dashedName: label-bootstrap-wells
@ -8,15 +8,15 @@ dashedName: label-bootstrap-wells
# --description-- # --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-- # --hints--
You should add an `h4` element to each of your `<div class="col-xs-6">` elements. 应该为每个 `<div class="col-xs-6">` 元素添加一个 `h4` 元素。
```js ```js
assert( assert(
@ -24,19 +24,19 @@ assert(
); );
``` ```
One `h4` element should have the text `#left-well`. 其中一个 `h4` 元素应该含有文本内容 `#left-well`。
```js ```js
assert(new RegExp('#left-well', 'gi').test($('h4').text())); assert(new RegExp('#left-well', 'gi').test($('h4').text()));
``` ```
One `h4` element should have the text `#right-well`. 其中一个 `h4` 元素应该含有文本内容 `#right-well`。
```js ```js
assert(new RegExp('#right-well', 'gi').test($('h4').text())); assert(new RegExp('#right-well', 'gi').test($('h4').text()));
``` ```
All of your `h4` elements should have closing tags. 确保每个 `h4` 元素都有一个闭合标签。
```js ```js
assert( assert(

16
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908845 id: bad87fee1348bd9aec908845
title: Line up Form Elements Responsively with Bootstrap title: 使用 Bootstrap 响应式排列表单元素
challengeType: 0 challengeType: 0
forumTopicId: 18225 forumTopicId: 18225
required: required:
@ -13,15 +13,15 @@ dashedName: line-up-form-elements-responsively-with-bootstrap
# --description-- # --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-- # --hints--
Your form submission button and text input should be nested in a div with class `row`. 确保提交按钮和文本输入框都在同一个具有 class 属性 `row` 的 div 元素中。
```js ```js
assert( 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 ```js
assert($('div.col-xs-7:has(input[type="text"])').length > 0); 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 ```js
assert($('div.col-xs-5:has(button[type="submit"])').length > 0); assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
``` ```
All of your `div` elements should have closing tags. 确保每一个 `div` 元素都有一个闭合标签。
```js ```js
assert( assert(

18
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9acde08812 id: bad87fee1348bd9acde08812
title: Make Images Mobile Responsive title: 使图片自适应移动端
challengeType: 0 challengeType: 0
forumTopicId: 18232 forumTopicId: 18232
dashedName: make-images-mobile-responsive dashedName: make-images-mobile-responsive
@ -8,39 +8,39 @@ dashedName: make-images-mobile-responsive
# --description-- # --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-- # --hints--
You should have a total of two images. 该页面共有两张图片。
```js ```js
assert($('img').length === 2); assert($('img').length === 2);
``` ```
Your new image should be below your old one and have the class `img-responsive`. 新的图片应该在旧的图片下面并且有值包含 `img-responsive` 的 class 属性。
```js ```js
assert($('img:eq(1)').hasClass('img-responsive')); assert($('img:eq(1)').hasClass('img-responsive'));
``` ```
Your new image should not have the class `smaller-image`. 新图片的 class 不应该包含 `smaller-image`。
```js ```js
assert(!$('img:eq(1)').hasClass('smaller-image')); 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 ```js
assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats'); assert($('img:eq(1)').attr('src') === 'https://bit.ly/fcc-running-cats');
``` ```
Your new `img` element should have a closing angle bracket. 确保新的 `img` 元素有一个闭合的尖括号。
```js ```js
assert( assert(

12
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aeda08845 id: bad87fee1348bd9aeda08845
title: Responsively Style Checkboxes title: 响应式风格的复选框
challengeType: 0 challengeType: 0
forumTopicId: 18269 forumTopicId: 18269
required: required:
@ -13,27 +13,27 @@ dashedName: responsively-style-checkboxes
# --description-- # --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-- # --instructions--
Nest all three of your checkboxes in a `<div class="row">` element. Then nest each of them in a `<div class="col-xs-4">` element. 将所有三个复选框都放置于一个 `<div class="row">` 元素中。 然后分别把每个复选框都放置于一个 `<div class="col-xs-4">` 元素中。
# --hints-- # --hints--
All of your checkboxes should be nested inside one `div` with the class `row`. 将所有的复选框嵌入一个含有 `row` class 的 `div` 元素中。
```js ```js
assert($('div.row:has(input[type="checkbox"])').length > 0); 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 ```js
assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2); assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
``` ```
All of your `div` elements should have closing tags. 确保所有 `div` 元素都有一个闭合标签。
```js ```js
assert( assert(

14
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aedb08845 id: bad87fee1348bd9aedb08845
title: Responsively Style Radio Buttons title: 响应式风格的单选按钮
challengeType: 0 challengeType: 0
forumTopicId: 18270 forumTopicId: 18270
required: required:
@ -13,27 +13,27 @@ dashedName: responsively-style-radio-buttons
# --description-- # --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 `<div class="row">` element. Then nest each of them within a `<div class="col-xs-6">` element. 将所有单选按钮放入 `<div class="row">` 元素中。 再用 `<div class="col-xs-6">` 元素包裹每一个单选按钮。
**Note:** As a reminder, radio buttons are `input` elements of type `radio`. **注意：** 提醒一句，单选按钮是 type 为 `radio` 的 `input` 元素。
# --hints-- # --hints--
All of your radio buttons should be nested inside one `div` with the class `row`. 所有的单选按钮应该放置于具有 `row` class 的 `div` 元素中。
```js ```js
assert($('div.row:has(input[type="radio"])').length > 0); 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 ```js
assert($('div.col-xs-6:has(input[type="radio"])').length > 1); assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
``` ```
All of your `div` elements should have closing tags. 确保所有 `div` 元素都有闭合标签。
```js ```js
assert( assert(

10
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908847 id: bad87fee1348bd9aec908847
title: Split Your Bootstrap Row title: 分割 Bootstrap Row
challengeType: 0 challengeType: 0
forumTopicId: 18306 forumTopicId: 18306
dashedName: split-your-bootstrap-row dashedName: split-your-bootstrap-row
@ -8,19 +8,19 @@ dashedName: split-your-bootstrap-row
# --description-- # --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-- # --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 ```js
assert($('div.row > div.col-xs-6').length > 1); assert($('div.row > div.col-xs-6').length > 1);
``` ```
All your `div` elements should have closing tags. 确保所有的 `div` 元素都有闭合标签。
```js ```js
assert( assert(

16
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aed908845 id: bad87fee1348bd9aed908845
title: Style Text Inputs as Form Controls title: 给表单输入框添加样式
challengeType: 0 challengeType: 0
forumTopicId: 18312 forumTopicId: 18312
required: required:
@ -13,33 +13,33 @@ dashedName: style-text-inputs-as-form-controls
# --description-- # --description--
You can add the `fa-paper-plane` Font Awesome icon by adding `<i class="fa fa-paper-plane"></i>` within your submit `button` element. 可以在 submit `button` 元素内加上 `<i class="fa fa-paper-plane"></i>`，来添加 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 `<input>`, `<textarea>`, and `<select>` elements with the class `.form-control` have a width of 100%. 所有文本输入类的元素如 `<input>`，`<textarea>` 和 `<select>` 只要设置 `.form-control` class 就会占满100%的宽度。
# --hints-- # --hints--
The submit button in your form should have the classes `btn btn-primary`. 给你的 submit 按钮添加 `btn btn-primary` class。
```js ```js
assert($('button[type="submit"]').hasClass('btn btn-primary')); assert($('button[type="submit"]').hasClass('btn btn-primary'));
``` ```
You should add a `<i class="fa fa-paper-plane"></i>` within your submit `button` element. 在你的 submit `button` 元素内添加 `<i class="fa fa-paper-plane"></i>`。
```js ```js
assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0); assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
``` ```
The text `input` in your form should have the class `form-control`. 给表单中的 text `input` 元素添加 `form-control` class。
```js ```js
assert($('input[type="text"]').hasClass('form-control')); assert($('input[type="text"]').hasClass('form-control'));
``` ```
Each of your `i` elements should have a closing tag. 确保每一个 `i` 元素都有一个闭合标签。
```js ```js
assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3); assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);

14
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348cd8acef08811 id: bad87fee1348cd8acef08811
title: Taste the Bootstrap Button Color Rainbow title: 体验 Bootstrap 按钮的不同主题
challengeType: 0 challengeType: 0
forumTopicId: 18323 forumTopicId: 18323
dashedName: taste-the-bootstrap-button-color-rainbow dashedName: taste-the-bootstrap-button-color-rainbow
@ -8,27 +8,27 @@ dashedName: taste-the-bootstrap-button-color-rainbow
# --description-- # --description--
The `btn-primary` class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take. `btn-primary` class 的颜色是应用的主要颜色。 这样 “突出显示” 是引导用户按部就班进行操作的有效办法。
Replace Bootstrap's `btn-default` class with `btn-primary` in your button. 将按钮的 class 从 Bootstrap 的 `btn-default` 替换为 `btn-primary`。
Note that this button will still need the `btn` and `btn-block` classes. 注意：按钮仍然需要 `btn` 和 `btn-block` classes。
# --hints-- # --hints--
Your button should have the class `btn-primary`. 按钮的 class 属性应该包含 `btn-primary`。
```js ```js
assert($('button').hasClass('btn-primary')); assert($('button').hasClass('btn-primary'));
``` ```
Your button should still have the `btn` and `btn-block` classes. 按钮的 class 属性应该包含 `btn` 和 `btn-block`。
```js ```js
assert($('button').hasClass('btn-block') && $('button').hasClass('btn')); assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
``` ```
All your `button` elements should have closing tags. 确保所有 `button` 元素都有一个闭合标签。
```js ```js
assert( assert(

24
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aedf08845 id: bad87fee1348bd9aedf08845
title: Use a span to Target Inline Elements title: 使用 span 创建行内元素
challengeType: 0 challengeType: 0
forumTopicId: 18370 forumTopicId: 18370
dashedName: use-a-span-to-target-inline-elements dashedName: use-a-span-to-target-inline-elements
@ -8,31 +8,31 @@ dashedName: use-a-span-to-target-inline-elements
# --description-- # --description--
You can use spans to create inline elements. Remember when we used the `btn-block` class to make the button fill the entire row? 可以使用 span 标签来创建行内元素。 还记得怎么使用 `btn-block` class 来创建填满整行的按钮吗？
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>normal button</button> <button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>普通按钮</button>
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>btn-block button</button> <button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>块级按钮</button>
That illustrates the difference between an "inline" element and a "block" element. 上面的例子就是 "inline" （行内）元素和 "block" （块级）元素的区别。
By using the inline `span` element, you can put several elements on the same line, and even style different parts of the same line differently. 通过使用行内元素 `span`，可以把不同的元素放在同一行，甚至能为一行的不同部分指定不同样式。
Nest the word "love" in your "Things cats love" element below within a `span` element. Then give that `span` the class `text-danger` to make the text red. 使用一个 `span` 元素，将文本 `love` 嵌入现在包含文本 `Things cats love` 的 `p` 元素中。 然后给 `span` 元素设置 class `text-danger`，使文本变成红色。
Here's how you would do this with the "Top 3 things cats hate" element: 对含有文本 `Top 3 things cats hate` 的 `p` 元素这样处理：
`<p>Top 3 things cats <span class="text-danger">hate:</span></p>` `<p>Top 3 things cats <span class="text-danger">hate:</span></p>`
# --hints-- # --hints--
Your `span` element should be inside your `p` element. `span` 元素应该在 `p` 元素内。
```js ```js
assert($('p span') && $('p span').length > 0); assert($('p span') && $('p span').length > 0);
``` ```
Your `span` element should have just the text `love`. `span` 元素应该只包括 `love` 文本。
```js ```js
assert( assert(
@ -44,13 +44,13 @@ assert(
); );
``` ```
Your `span` element should have class `text-danger`. `span` 元素应该含有 `text-danger` class。
```js ```js
assert($('span').hasClass('text-danger')); assert($('span').hasClass('text-danger'));
``` ```
Your `span` element should have a closing tag. 确保 `span` 元素有一个闭合标签。
```js ```js
assert( assert(

18
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9aec908857 id: bad87fee1348bd9aec908857
title: Use Comments to Clarify Code title: 使用注释来说明代码
challengeType: 0 challengeType: 0
forumTopicId: 18347 forumTopicId: 18347
dashedName: use-comments-to-clarify-code dashedName: use-comments-to-clarify-code
@ -8,35 +8,35 @@ dashedName: use-comments-to-clarify-code
# --description-- # --description--
When we start using jQuery, we will modify HTML elements without needing to actually change them in HTML. 使用 jQuery 时，修改 HTML 元素时并不需要直接修改 HTML 代码。
Let's make sure that everyone knows they shouldn't actually modify any of this code directly. 必须确保让每个人都知道不应该直接修改此页面上的这些代码。
Remember that you can start a comment with `<!--` and end a comment with `-->` 记住，可以在 `<!--` 为开始，`-->` 为结束的地方进行评论注释。
Add a comment at the top of your HTML that says `Code below this line should not be changed` 请你在 HTML 顶部加如下一段注释： `Code below this line should not be changed` 。
# --hints-- # --hints--
You should start a comment with `<!--` at the top of your HTML. 应该在 HTML 顶部增加此代码 `<!--` 以开始注释。
```js ```js
assert(code.match(/^\s*<!--/)); assert(code.match(/^\s*<!--/));
``` ```
Your comment should have the text `Code below this line should not be changed`. 注释内容应该为 `Code below this line should not be changed`。
```js ```js
assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi)); assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
``` ```
You should close your comment with `-->`. 注释应该用 `-->` 进行闭合。
```js ```js
assert(code.match(/-->.*\n+.+/g)); assert(code.match(/-->.*\n+.+/g));
``` ```
You should have the same number of comment openers and closers. 注意，注释的开始标签和闭合标签数量应该一一对应，保持数量一致。
```js ```js
assert(code.match(/<!--/g).length === code.match(/-->/g).length); assert(code.match(/<!--/g).length === code.match(/-->/g).length);

20
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348bd9acde08712 id: bad87fee1348bd9acde08712
title: Use Responsive Design with Bootstrap Fluid Containers title: 使用 Bootstrap Fluid 容器实现响应式设计
challengeType: 0 challengeType: 0
forumTopicId: 18362 forumTopicId: 18362
dashedName: use-responsive-design-with-bootstrap-fluid-containers dashedName: use-responsive-design-with-bootstrap-fluid-containers
@ -8,29 +8,29 @@ dashedName: use-responsive-design-with-bootstrap-fluid-containers
# --description-- # --description--
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. 之前，在 freeCodeCamp 的 HTML5 和 CSS 章节中我们构建了一个 Cat Photo App。 我们在此基础上继续学习。 这次我们将会使用最受欢迎的响应式 CSS 框架 Bootstrap 来美化它。
Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <dfn>responsive design</dfn>. Bootstrap 会根据屏幕大小来动态调整 HTML 元素的大小————因此称为 <dfn>Responsive Design</dfn>（响应式设计）。
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width. 通过响应式设计，我们将无需额外设计一个手机版的网页， 因为它在任何尺寸的屏幕上看起来都很棒。
You can add Bootstrap to any app by adding the following code to the top of your HTML: 任何 Web 应用，都可以通过添加如下代码到 HTML 顶部来引入 Bootstrap 。
`<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>` `<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>`
In this case, we've already added it for you to this page behind the scenes. Note that using either `>` or `/>` to close the `link` tag is acceptable. 在该类课程中，我们已经提前帮你把相应代码添加到了页面中。 注意使用 `>` 或者 `/>` 两种方式闭合 `link` 标签都是可行的。
To get started, we should nest all of our HTML (except the `link` tag and the `style` element) in a `div` element with the class `container-fluid`. 首先，我们应该把所有 HTML 标签放在 class 为 `container-fluid` 的 `div` 元素内（除了 `link` 标签和 `style` 元素）。
# --hints-- # --hints--
Your `div` element should have the class `container-fluid`. `div` 元素的 class 属性值应该为 `container-fluid`。
```js ```js
assert($('div').hasClass('container-fluid')); assert($('div').hasClass('container-fluid'));
``` ```
Your `div` element should have a closing tag. 确保该 `div` 元素有闭合标签.
```js ```js
assert( assert(
@ -40,7 +40,7 @@ assert(
); );
``` ```
All HTML elements after the closing `style` tag should be nested in `.container-fluid`. 确保已经将闭合 `style` 标签后所有的 HTML 元素内嵌在 `.container-fluid` 元素中。
```js ```js
assert($('.container-fluid').children().length >= 8); assert($('.container-fluid').children().length >= 8);

22
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad88fee1348ce8acef08815 id: bad88fee1348ce8acef08815
title: Use the Bootstrap Grid to Put Elements Side By Side title: 使用 Bootstrap Grid 并排放置元素
challengeType: 0 challengeType: 0
forumTopicId: 18371 forumTopicId: 18371
dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
@ -8,33 +8,33 @@ dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
# --description-- # --description--
Bootstrap uses a responsive 12-column 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 具有一套 12 列的响应式栅格系统，可以轻松的将多个元素放入一行并指定它们的相对宽度。 Bootstrap 的大部分 class 属性都可以应用在 `div` 元素上。
Bootstrap has different column width attributes that it uses depending on how wide the user's screen is. For example, phones have narrow screens, and laptops have wider screens. Bootstrap 的列宽取决于用户的屏幕宽度。 比如，手机有着窄屏幕而笔记本电脑有者更大的屏幕.
Take for example Bootstrap's `col-md-*` class. Here, `md` means medium, and `*` 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. 就拿 Bootstrap 的 `col-md-*` class 来说。 在这里， `md` 表示 medium （中等的）， 而 `*` 是一个数字，说明了这个元素占有多少个列宽度。 这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。
In the Cat Photo App that we're building, we'll use `col-xs-*`, where `xs` means extra small (like an extra-small mobile phone screen), and `*` is the number of columns specifying how many columns wide the element should be. 在 Cat Photo App 中，将使用 `col-xs-*` ， 其中 `xs` 是 extra small 的缩写 (比如窄屏手机屏幕)， `*` 是填写的数字，代表一行中的元素该占多少列宽。
Put the `Like`, `Info` and `Delete` buttons side-by-side by nesting all three of them within one `<div class="row">` element, then each of them within a `<div class="col-xs-4">` element. 将 `Like`，`Info` 和 `Delete` 三个按钮并排放入一个 `<div class="row">` 元素中，然后每个按钮都各用一个 `<div class="col-xs-4">` 元素包裹起来。
The `row` class is applied to a `div`, and the buttons themselves can be nested within it. 当 `div` 元素设置了 `row` class 之后，那几个按钮便会嵌入其中了。
# --hints-- # --hints--
Your buttons should all be nested within the same `div` element with the class `row`. 所有按钮都需要嵌入到同一个 `div` 元素中， 并且该元素包含 `row` class 属性。
```js ```js
assert($('div.row:has(button)').length > 0); assert($('div.row:has(button)').length > 0);
``` ```
Each of your Bootstrap buttons should be nested within its own `div` element with the class `col-xs-4`. 每个 Bootstrap 按钮都需要嵌入各自的 `div` 元素，并且该元素包含 class 属性 `col-xs-4`。
```js ```js
assert($('div.col-xs-4:has(button)').length > 2); assert($('div.col-xs-4:has(button)').length > 2);
``` ```
Each of your `button` elements should have a closing tag. 确保每一个 `button` 元素都有一个闭合标签。
```js ```js
assert( assert(
@ -44,7 +44,7 @@ assert(
); );
``` ```
Each of your `div` elements should have a closing tag. 确保每一个 `div` 元素都有一个闭合标签。
```js ```js
assert( assert(

16
curriculum/challenges/chinese/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md
View File

@ -1,6 +1,6 @@
--- ---
id: bad87fee1348ce8acef08814 id: bad87fee1348ce8acef08814
title: Warn Your Users of a Dangerous Action with btn-danger title: 使用 btn-danger 提示危险操作
challengeType: 0 challengeType: 0
forumTopicId: 18375 forumTopicId: 18375
dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
@ -8,33 +8,33 @@ dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
# --description-- # --description--
Bootstrap comes with several pre-defined colors for buttons. The `btn-danger` class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo. Bootstrap 有着丰富的预定义按钮颜色。 红色 `btn-danger` class 用来提醒用户此行为具有破坏性，比如删除一张猫的图片。
Create a button with the text "Delete" and give it the class `btn-danger`. 创建一个带有文本 `Delete` 的按钮，给它设置 class `btn-danger`。
Note that these buttons still need the `btn` and `btn-block` classes. 注意：这些按钮仍然需要 `btn` 和 `btn-block` class。
# --hints-- # --hints--
You should create a new `button` element with the text "Delete". 应创建一个新的带有文本 `Delete` 的 `button` 元素。
```js ```js
assert(new RegExp('Delete', 'gi').test($('button').text())); assert(new RegExp('Delete', 'gi').test($('button').text()));
``` ```
All of your Bootstrap buttons should have the `btn` and `btn-block` classes. 所有 Bootstrap 按钮的 class 属性都应该包含 `btn` 和 `btn-block`。
```js ```js
assert($('button.btn-block.btn').length > 2); assert($('button.btn-block.btn').length > 2);
``` ```
Your new button should have the class `btn-danger`. 新创建按钮的 class 属性应该包含 `btn-danger`。
```js ```js
assert($('button').hasClass('btn-danger')); assert($('button').hasClass('btn-danger'));
``` ```
All of your `button` elements should have closing tags. 确保所有的 `button` 元素都有一个闭合标签。
```js ```js
assert( assert(

2
curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
View File

@ -49,7 +49,9 @@ if(typeof myName !== "undefined"){(function(v){return v;})(myName);}
``` ```
## --seed-contents-- ## --seed-contents--
```js ```js
``` ```
# --solutions-- # --solutions--