From 0b2be70c9af902f2e39c7e5f97d70c63322d647d Mon Sep 17 00:00:00 2001 From: ZhichengChen Date: Mon, 7 Sep 2020 16:17:39 +0800 Subject: [PATCH] fix(i18n): update Chinese translation of bootstrap (#38560) Co-authored-by: Zhicheng Chen --- ...nts-within-your-bootstrap-wells.chinese.md | 43 +++++-- ...ome-icons-to-all-of-our-buttons.chinese.md | 85 +++++++++++--- ...nt-awesome-icons-to-our-buttons.chinese.md | 90 ++++++++++++--- ...ttributes-to-bootstrap-elements.chinese.md | 45 ++++++-- ...-default-bootstrap-button-style.chinese.md | 41 +++++-- ...-optional-actions-with-btn-info.chinese.md | 87 +++++++++++++-- .../center-text-with-bootstrap.chinese.md | 80 +++++++++++-- ...-block-element-bootstrap-button.chinese.md | 90 +++++++++++++-- .../create-a-bootstrap-button.chinese.md | 90 +++++++++++++-- .../create-a-bootstrap-headline.chinese.md | 32 +++--- .../create-a-bootstrap-row.chinese.md | 29 +++-- ...to-target-with-jquery-selectors.chinese.md | 39 +++++-- .../create-a-custom-heading.chinese.md | 84 ++++++++++++-- .../create-bootstrap-wells.chinese.md | 35 ++++-- .../ditch-custom-css-for-bootstrap.chinese.md | 84 +++++++++++--- .../give-each-element-a-unique-id.chinese.md | 52 ++++++--- ...a-bootstrap-container-fluid-div.chinese.md | 26 +++-- .../label-bootstrap-buttons.chinese.md | 51 ++++++--- .../label-bootstrap-wells.chinese.md | 48 ++++++-- ...nts-responsively-with-bootstrap.chinese.md | 105 ++++++++++++++++-- .../make-images-mobile-responsive.chinese.md | 86 +++++++++++--- .../responsively-style-checkboxes.chinese.md | 95 ++++++++++++++-- ...esponsively-style-radio-buttons.chinese.md | 88 +++++++++++++-- .../split-your-bootstrap-row.chinese.md | 29 +++-- ...le-text-inputs-as-form-controls.chinese.md | 99 +++++++++++++++-- ...-bootstrap-button-color-rainbow.chinese.md | 83 ++++++++++++-- ...-span-to-target-inline-elements.chinese.md | 87 +++++++++++++-- .../use-comments-to-clarify-code.chinese.md | 50 +++++++-- ...with-bootstrap-fluid-containers.chinese.md | 84 ++++++++++++-- ...id-to-put-elements-side-by-side.chinese.md | 99 +++++++++++++++-- ...angerous-action-with-btn-danger.chinese.md | 87 +++++++++++++-- 31 files changed, 1764 insertions(+), 359 deletions(-) diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.chinese.md index 06086f26b8..753b23e344 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-elements-within-your-bootstrap-wells.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9aec908849 title: Add Elements within Your Bootstrap Wells challengeType: 0 -videoUrl: '' -localeTitle: 在Bootstrap Wells中添加元素 +forumTopicId: 16636 +localeTitle: 在 Bootstrap Wells 中添加元素 --- ## Description -
现在，我们行的每一列都有几个div元素。这是我们需要去的深度。现在我们可以添加我们的button元素。在每个well div元素中嵌套三个button元素。
+
+现在我们的每一行的每一列都已经有了 div 元素。这已经足够了，现在让我们添加 button 元素吧。 +在每一个 well div 元素下放置三个 button 元素。 +
## Instructions -
+
+
## Tests @@ -18,11 +22,11 @@ localeTitle: 在Bootstrap Wells中添加元素 ```yml tests: - - text: 在每个div元素中嵌入三个button元素，并且类well 。 + - text: 在每一个 class 属性为 well 的 div 元素内分别放置三个 button 元素。 testString: assert($("div.well:eq(0)").children("button").length === 3 && $("div.well:eq(1)").children("button").length === 3); - - text: 你应该总共有6个button元素。 + - text: 总共有 6 个 button 元素。 testString: assert($("button") && $("button").length > 5); - - text: 确保所有button元素都有结束标记。 + - text: 确保 button 元素都有一个闭合标签。 testString: assert(code.match(/<\/button>/g) && code.match(/ + + + + +
+
+ + + +
+
+ + ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.chinese.md index 02f3a56b7e..85d97a0728 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.chinese.md @@ -2,18 +2,22 @@ id: bad87fee1348bd9aedc08845 title: Add Font Awesome Icons to all of our Buttons required: - - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' + - link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css' raw: true challengeType: 0 -videoUrl: '' -localeTitle: 将Font Awesome Icons添加到我们所有的按钮中 +localeTitle: 将字体图标添加到我们所有的按钮上 --- ## Description -
Font Awesome是一个方便的图标库。这些图标是矢量图形，以.svg文件格式存储。这些图标就像字体一样对待。您可以使用像素指定其大小，并且它们将采用其父HTML元素的字体大小。使用Font Awesome将info-circle图标添加到信息按钮，将trash图标添加到删除按钮。注意： span元素是下面方向的i元素的可接受替代方法。
+
+Font Awesome 是一个非常便利的图标库。这些图标都是被保存在 .svg 的文件格式中的矢量图。这些图标就和字体一样，不仅能通过像素单位指定他们的大小，它们也同样会继承父级 HTML 元素的字体大小。 +
## Instructions -
+
+使用 Font Awesome 分别为你的 info 按钮添加 info-circle 图标，为你的 delete 按钮添加 trash 图标。 + +记住：下述要求中的 i 元素可以用 span 元素代替。
## Tests @@ -21,11 +25,11 @@ localeTitle: 将Font Awesome Icons添加到我们所有的按钮中 ```yml tests: - - text: 您应该在info按钮元素中添加<i class="fa fa-info-circle"></i> 。 + - text: "添加一个 <i class='fas fa-info-circle'></i> 图标到你的 info 按钮元素中。" testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle")); - - text: 您应该在删除按钮元素中添加<i class="fa fa-trash"></i> 。 + - text: "添加一个 <i class='fas fa-trash'></i> 图标到你的 delete 按钮元素中。" testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash")); - - text: 确保每个i元素都有一个结束标记， <i class="fa fa-thumbs-up"></i>就在你的按钮元素中。 + - text: "确保每一个 i 元素都有一个闭合标签并且 <i class='fa fa-thumbs-up'></i> 在 like 按钮元素中。" testString: assert(code.match(/<\/i>|<\/span/g) && code.match(/<\/i|<\/span>/g).length > 2 && ($(".btn-primary > i").is(".fas.fa-thumbs-up") || $(".btn-primary > span").is(".fas.fa-thumbs-up"))); ``` @@ -64,7 +68,7 @@ tests: Three kittens running towards the camera.
- +
@@ -95,7 +99,6 @@ tests:
- ```
@@ -107,8 +110,64 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+
+
+

CatPhotoApp

+
+
+ A cute orange cat lying on its back. +
+
+ Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.chinese.md index 0ca0f9640d..915a6d43eb 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.chinese.md @@ -2,18 +2,27 @@ id: bad87fee1348bd9aedd08845 title: Add Font Awesome Icons to our Buttons required: - - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' + - link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css' raw: true challengeType: 0 -videoUrl: '' -localeTitle: 添加字体真棒图标到我们的按钮 +forumTopicId: 16638 +localeTitle: 将字体图标添加到我们的按钮中 --- ## Description -
Font Awesome是一个方便的图标库。这些图标是矢量图形，以.svg文件格式存储。这些图标就像字体一样对待。您可以使用像素指定其大小，并且它们将采用其父HTML元素的字体大小。您可以在任何应用程序中包含Font Awesome，方法是在HTML的顶部添加以下代码： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">在这种情况下，我们已经在幕后为您添加了这个页面。 i元素最初用于使其他元素斜体，但现在通常用于图标。您可以将Font Awesome类添加到i元素以将其转换为图标，例如： <i class="fa fa-info-circle"></i>请注意， span元素也可用于图标。使用Font Awesome将一个thumbs-up图标添加到你喜欢的按钮，给它一个带有fa和fa-thumbs-up类的i元素;确保在图标旁边保留“赞”字样。
+
+Font Awesome 是一个非常便利的图标库。这些图标都是被保存在 .svg 的文件格式中的矢量图。这些图标就和字体一样，不仅能通过像素单位指定他们的大小，它们也同样会继承父级 HTML 元素的字体大小。 +你可以将 Font Awesome 图标库添加至任何一个 app 中，方法很简单，只需要在你的 HTML 头部增加下列代码即可： +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous"> +不过在这里，我们已经预先为此页面添加了上述代码。 +i 元素起初用于让其它元素具有斜体（italic）的效果，不过现在一般用于指代图标。你可以把 Font Awesome 中的 class 属性添加到 i 元素中，让它变成一个图标，比如： +<i class="fas fa-info-circle"></i> +记住 span 元素也一样可以用于指代图标。 +
## Instructions -
+
+通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮上，具体方法是给 i 元素添加 class 属性 fas 和 fa-thumbs-up；确保你的 "Like" 文本在图标旁边。
## Tests @@ -21,13 +30,13 @@ localeTitle: 添加字体真棒图标到我们的按钮 ```yml tests: - - text: 使用fa和fa-thumbs-up类添加i元素。 + - text: 增加一个 class 为 fas 和 fa-thumbs-up 的 i 元素。 testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up")); - - text: 您的fa-thumbs-up图标应位于Like按钮内。 + - text: fa-thumbs-up 图标应该放在 Like 按钮中。 testString: assert(($("i.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > i").is(".fas.fa-thumbs-up")) || ($("span.fa-thumbs-up").parent().text().match(/Like/gi) && $(".btn-primary > span").is(".fas.fa-thumbs-up"))); - - text: 将您的i元素嵌套在button元素中。 + - text: 将 i 元素放置在你的 button 元素中。 testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0); - - text: 确保您的图标元素具有结束标记。 + - text: 确保你的图标元素有一个闭合标签。 testString: assert(code.match(/<\/i>|<\/span>/g)); ``` @@ -97,7 +106,6 @@ tests: - ``` @@ -109,8 +117,64 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+
+
+

CatPhotoApp

+
+
+ A cute orange cat lying on its back. +
+
+ Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.chinese.md index 5fd5e2ee2c..fa904cd6bf 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.chinese.md @@ -2,15 +2,23 @@ id: bad87fee1348bd9aec908853 title: Add id Attributes to Bootstrap Elements challengeType: 0 -videoUrl: '' -localeTitle: 将id属性添加到Bootstrap元素 +forumTopicId: 16639 +localeTitle: 给 Bootstrap 元素添加id属性 --- ## Description -
回想一下，除了类属性之外，您还可以为每个元素赋予一个id属性。每个id必须对特定元素是唯一的，并且每页只使用一次。让我们给一个唯一的ID给我们每一个的div类的元素well 。请记住，你可以给一个元素这样的id： <div class="well" id="center-well">给left-well 。给right-well 。
+
+回忆一下，除了可以给元素添加 class 属性，我们还可以给元素设置 id 属性。 +每个指定元素的 id 都是唯一的，并且在每个页面中都只能使用一次。 +让我们为每个 class 为 well 的 div 元素添加一个唯一的 id。 +记住，你可以这样给一个元素设置 ID。 +<div class="well" id="center-well"> +把左边 well 的 ID 设置为 left-well。右边的 well 的 ID 设置为 right-well。 +
## Instructions -
+
+
## Tests @@ -18,9 +26,9 @@ localeTitle: 将id属性添加到Bootstrap元素 ```yml tests: - - text: 给你留下well的id left-well 。 + - text: 把左边的 well 的 ID 设置为 left-well。 testString: assert($(".col-xs-6").children("#left-well") && $(".col-xs-6").children("#left-well").length > 0); - - text: 给您的权利well的ID right-well 。 + - text: 把右边的 well 的 ID 设置为 right-well。 testString: assert($(".col-xs-6").children("#right-well") && $(".col-xs-6").children("#right-well").length > 0); ``` @@ -52,7 +60,6 @@ tests: - ``` @@ -64,8 +71,26 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.chinese.md index e227676175..b43366ef9d 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9aec908850 title: Apply the Default Bootstrap Button Style challengeType: 0 -videoUrl: '' -localeTitle: 应用默认引导按钮样式 +forumTopicId: 16657 +localeTitle: 给 Bootstrap 按钮添加默认样式 --- ## Description -
Bootstrap有另一个名为btn-default按钮类。将btn和btn-default类同时应用于每个button元素。
+
+Bootstrap 还有另外一种属于按钮的 class 属性叫做 btn-default。 +为 button 元素增加两个 class： btn 和 btn-default。 +
## Instructions -
+
+
## Tests @@ -18,9 +22,9 @@ localeTitle: 应用默认引导按钮样式 ```yml tests: - - text: 将btn类应用于每个button元素。 + - text: 将 btn class 添加到所有的 button 元素中。 testString: assert($(".btn").length > 5); - - text: 将btn-default类应用于每个button元素。 + - text: 将 btn-default class 添加到每一个 button 元素中。 testString: assert($(".btn-default").length > 5); ``` @@ -52,7 +56,6 @@ tests: - ``` @@ -64,8 +67,26 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.chinese.md index 2fa9cbed72..6afcf414a9 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.chinese.md @@ -2,15 +2,20 @@ id: bad87fee1348cd8acef08813 title: Call out Optional Actions with btn-info challengeType: 0 -videoUrl: '' -localeTitle: 使用btn-info调出可选操作 +forumTopicId: 16770 +localeTitle: 使用 btn-info 调出可选操作 --- ## Description -
Bootstrap带有几种预定义的按钮颜色。 btn-info类用于引起对用户可以采取的可选操作的注意。使用文本“Info”在“Like”按钮下创建一个新的块级Bootstrap按钮，并向其添加Bootstrap的btn-info和btn-block类。请注意，这些按钮仍然需要btn和btn-block类。
+
+Bootstrap 有着丰富的预定义按钮颜色。浅蓝色 btn-info class 通常用在用户可能采取的操作上。 +在你的 "Like" 按钮下方创建包含文本 "Info" 的块级 Bootstrap 按钮， 然后为该按钮添加 Bootstrap 的 btn-info 和 btn-block class。 +记住：你的这些按钮仍然需要 btn 和 btn-block class。 +
## Instructions -
+
+
## Tests @@ -18,13 +23,13 @@ localeTitle: 使用btn-info调出可选操作 ```yml tests: - - text: 使用文本“Info”创建一个新的button元素。 + - text: "创建包含文本 'Info' 的 button 元素。" testString: assert(new RegExp("info","gi").test($("button").text())); - - text: 两个Bootstrap按钮都应该有btn和btn-block类。 + - text: 两个按钮的 class 属性应该仍然具有 btn 和 btn-block。 testString: assert($("button.btn-block.btn").length > 1); - - text: 你的新按钮应该有类btn-info 。 + - text: 新按钮的 class 属性应该含有 btn-info。 testString: assert($("button").hasClass("btn-info")); - - text: 确保所有button元素都有一个结束标记。 + - text: 确保你所有的 button 元素都有一个闭合标签。 testString: assert(code.match(/<\/button>/g) && code.match(/ - ``` @@ -107,8 +111,67 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. + + + +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.chinese.md index 38a4a20f56..2b058310d5 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/center-text-with-bootstrap.chinese.md @@ -2,15 +2,20 @@ id: bad87fee1348bd8acde08812 title: Center Text with Bootstrap challengeType: 0 -videoUrl: '' -localeTitle: 中心文本与引导程序 +forumTopicId: 16771 +localeTitle: 用 Bootstrap 居中文本 --- ## Description -
现在我们正在使用Bootstrap，我们可以将我们的标题元素集中在一起，使其看起来更好。我们需要做的就是将类text-center添加到我们的h2元素中。请记住，您可以通过用空格分隔每个类来为同一个元素添加几个类，如下所示： <h2 class="red-text text-center">your text</h2>
+
+我们可以使用 Bootstrap 将顶部的元素居中来美化页面。只需要将 h2 元素的 class 属性设置为 text-center 就可以实现。 +记住：我们通过空格分隔不同的 class 可以为一个元素添加多个 class ，就像这样： +<h2 class="red-text text-center">your text</h2> +
## Instructions -
+
+
## Tests @@ -18,9 +23,9 @@ localeTitle: 中心文本与引导程序 ```yml tests: - - text: 应用类text-center应该使h2元素居中 + - text: 你的 h2 元素应该居中且有一个 class 为 text-center testString: assert($("h2").hasClass("text-center")); - - text: 您的h2元素仍应具有类red-text + - text: 你的 h2 元素应该还有另一个 class 为 red-text testString: assert($("h2").hasClass("red-text")); ``` @@ -90,7 +95,6 @@ tests: - ``` @@ -102,8 +106,64 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.chinese.md index efccf79f68..a1170fff88 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.chinese.md @@ -2,15 +2,27 @@ id: bad87fee1348cd8acef08812 title: Create a Block Element Bootstrap Button challengeType: 0 -videoUrl: '' -localeTitle: 创建一个块元素引导按钮 +forumTopicId: 16810 +localeTitle: 创建一个 Bootstrap 块级元素 --- ## Description -
通常，具有btn和btn-default类的button元素仅与它们包含的文本一样宽。例如： <button class="btn btn-default">Submit</button>此按钮只能与“提交”一词一样宽。 通过使用附加的btn-block类来阻止元素，您的按钮将拉伸以填充页面的整个水平空间，其后面的任何元素将流到块下方的“新行”。 <button class="btn btn-default btn-block">Submit</button>此按钮占用可用宽度的100％。 请注意，这些按钮仍需要btn类。将Bootstrap的btn-block类添加到Bootstrap按钮。
+
+一般情况下，具有 btn 和 btn-default 两个 class 的 button 元素宽度与它包含的文本相同，举个例子： +<button class="btn btn-default">Submit</button> +这个按钮的宽度应该和文本 "Submit" 相同 + +通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面整个水平空间，后续的元素会流到这个块级元素的下方，即 "新开一行"。 +<button class="btn btn-default btn-block">Submit</button> +这个按钮会 100% 占满所有的可用宽度。 + +记住这些按钮仍然需要 btn 这个 class。 +添加 Bootstrap 的 btn-block class 到你 Bootstrap 按钮上吧。 +
## Instructions -
+
+
## Tests @@ -18,11 +30,11 @@ localeTitle: 创建一个块元素引导按钮 ```yml tests: - - text: 你的按钮应该仍然有btn和btn-default类。 + - text: 按钮的 class 属性应该仍然具有 btn 和 btn-default。 testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default")); - - text: 你的按钮应该有类btn-block 。 + - text: 按钮的 class 属性应该包含 btn-block。 testString: assert($("button").hasClass("btn-block")); - - text: 确保所有button元素都有一个结束标记。 + - text: 确保所有的 button 元素都有一个闭合标签。 testString: assert(code.match(/<\/button>/g) && code.match(/ - ``` @@ -105,8 +116,65 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. + +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.chinese.md index 9febc25e18..7bf5bb5eb0 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-button.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348cd8acdf08812 title: Create a Bootstrap Button challengeType: 0 -videoUrl: '' -localeTitle: 创建一个Bootstrap按钮 +forumTopicId: 16811 +localeTitle: 创建一个 Bootstrap 按钮 --- ## Description -
Bootstrap有自己的button元素样式，看起来比纯HTML样式好得多。在您的大型小猫照片下方创建一个新的button元素。给它btn和btn-default类，以及“Like”的文本。
+
+Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。 +在较大的小猫图片下方创建新的 button 元素。 为它添加 btn 与 btn-default 两个 class 和 "Like" 文本。 +
## Instructions -
+
+
## Tests @@ -18,11 +22,11 @@ localeTitle: 创建一个Bootstrap按钮 ```yml tests: - - text: 使用文本“Like”创建一个新的button元素。 + - text: "创建新的 button 元素，设置文本为 'Like'。" testString: assert(new RegExp("like","gi").test($("button").text()) && ($("img.img-responsive + button.btn").length > 0)); - - text: 你的新按钮应该有两个类： btn和btn-default 。 + - text: '新的按钮元素应该有两个 class : btn 和 btn-default。' testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default")); - - text: 确保所有button元素都有一个结束标记。 + - text: 保证所有 button 元素都有一个闭合标签。 testString: assert(code.match(/<\/button>/g) && code.match(/ - ``` @@ -105,8 +108,73 @@ tests: ## Solution
-```js -// solution required +```html + + + + + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. + + + + +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
+ ``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.chinese.md index 4e386563c8..89c07b50f1 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.chinese.md @@ -2,15 +2,21 @@ id: bad87fee1348bd9aec908846 title: Create a Bootstrap Headline challengeType: 0 -videoUrl: '' -localeTitle: 创建一个Bootstrap标题 +forumTopicId: 16812 +localeTitle: 创建一个 Bootstrap 标题 --- ## Description -
现在让我们从头开始构建一些东西来练习我们的HTML，CSS和Bootstrap技能。我们将构建一个jQuery游戏，我们很快将在jQuery挑战中使用它。首先，使用文本jQuery Playground创建一个h3元素。使用text-primary Bootstrap类为h3元素着色，并将其与text-center Bootstrap类text-center 。
+
+现在，让我们运用 HTML，CSS 和 Bootstrap 从零开始做点东西。 +我们将会搭建一个 jQuery playground，以便在后续的 jQuery 课程中使用它。 +首先，创建一个包含 jQuery Playground 文本内容的 h3 元素。 +通过给你的 h3 元素设置 Bootstrap 的 class 属性 text-primary 来为其上色，然后添加 Bootstrap 的 class 属性 text-center 使其文本居中显示。 +
## Instructions -
+
+
## Tests @@ -18,15 +24,15 @@ localeTitle: 创建一个Bootstrap标题 ```yml tests: - - text: 在页面中添加h3元素。 + - text: 为你的页面添加一个 h3 元素。 testString: assert($("h3") && $("h3").length > 0); - - text: 确保您的h3元素具有结束标记。 + - text: 确保你的 h3 元素有一个闭合标签。 testString: assert(code.match(/<\/h3>/g) && code.match(/

/g).length === code.match(/

text-primary类来对你的h3元素进行着色 + - text: 为了确保成功上色，h3 元素应该具有 text-primary class。 testString: assert($("h3").hasClass("text-primary")); - - text: 应用类text-center应该使h3元素居中 + - text: 为了确保文本居中显示，你的 h3 元素应该具有 text-center class。 testString: assert($("h3").hasClass("text-center")); - - text: 你的h3元素应该有jQuery Playground文本。 + - text: h3 元素文本为 jQuery Playground。 testString: assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text())); ``` @@ -44,15 +50,13 @@ tests: - -

## Solution
-```js -// solution required +```html +

jQuery Playground

``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.chinese.md index 29bb2234f0..21b50de2f6 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-bootstrap-row.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9bec908846 title: Create a Bootstrap Row challengeType: 0 -videoUrl: '' -localeTitle: 创建一个Bootstrap行 +forumTopicId: 16813 +localeTitle: 创建一个 Bootstrap Row --- ## Description -
现在我们将为内联元素创建一个Bootstrap行。在h3标记下创建一个div元素，其中包含一个row类。
+
+这次让我们为内联元素创建一个 Bootstrap 栅格系统的 Row（行）。 +在 h3 标签下方创建一个 class 属性为 row 的 div 元素。 +
## Instructions -
+
+
## Tests @@ -18,13 +22,13 @@ localeTitle: 创建一个Bootstrap行 ```yml tests: - - text: 在h3元素下面添加一个div元素。 + - text: h3 元素下增加一个 div 元素。 testString: assert(($("div").length > 1) && ($("div.row h3.text-primary").length == 0) && ($("div.row + h3.text-primary").length == 0) && ($("h3.text-primary + div.row").length > 0)); - - text: 你的div元素应该有类row + - text: div 元素的 class 属性应为 row。 testString: assert($("div").hasClass("row")); - - text: 你的row div应该嵌套在container-fluid div + - text: row div 应该内嵌于 container-fluid div。 testString: assert($("div.container-fluid div.row").length > 0); - - text: 确保你的div元素有一个结束标记。 + - text: 确保所有 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
-```js -// solution required +```html +
+

jQuery Playground

+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.chinese.md index 9812a1d205..00cceef702 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9aec908852 title: Create a Class to Target with jQuery Selectors challengeType: 0 -videoUrl: '' -localeTitle: 使用jQuery选择器创建一个目标类 +forumTopicId: 16815 +localeTitle: 分别给每个目标元素的 class 属性添加一个 target 值 --- ## Description -
并非每个类都需要具有相应的CSS。有时我们创建类只是为了使用jQuery更容易地选择这些元素。为每个button元素提供类target 。
+
+并不是所有 class 属性都需要有对应的 CSS 样式。有时候我们设置 class 只是为了更方便地在 jQuery 中选中这些元素。 +为每一个 button 元素添加 target class。 +
## Instructions -
+
+
## Tests @@ -18,7 +22,7 @@ localeTitle: 使用jQuery选择器创建一个目标类 ```yml tests: - - text: 将target类应用于每个button元素。 + - text: 给你的每一个 button 元素设置 target class。 testString: assert($(".target").length > 5); ``` @@ -50,7 +54,6 @@ tests: - ``` @@ -62,8 +65,26 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+
+ + + +
+
+
+
+ + + +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.chinese.md index 9bb2c0fbbd..2baed4c993 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-a-custom-heading.chinese.md @@ -2,15 +2,21 @@ id: bad87fee1348bd9aede08845 title: Create a Custom Heading challengeType: 0 -videoUrl: '' +forumTopicId: 16816 localeTitle: 创建自定义标题 --- ## Description -
我们将通过将标题和放松的猫图像放在同一行中，为我们的Cat Photo App制作一个简单的标题。请记住，Bootstrap使用响应式网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大多数类都可以应用于div元素。将第一个图像和h2元素嵌套在一个<div class="row">元素中。将您的h2元素嵌套在<div class="col-xs-8">并将您的图像<div class="col-xs-4">以便它们位于同一行。请注意图像现在的大小是否适合文本？
+
+让我们来为 Cat Photo App 做一个导航吧，把标题和惬意的猫咪图片放在同一行。 +记住，由于 Bootstrap 使用了响应式栅格系统，使得我们可以很方便的放置元素并为元素指定相对的宽度。大部分的 Bootstrap 的 class 都能用在 div 元素上。 +把我们的第一张图片和 h2 元素用一个简单的 <div class="row"> 元素包裹起来。再用 <div class="col-xs-8"> 包裹我们的 h2 元素，用 <div class="col-xs-4"> 包裹我们的图片，这样它们就能位于同一行了。 +注意现在图片是否与文字大小一致呢？ +
## Instructions -
+
+
## Tests @@ -18,13 +24,13 @@ localeTitle: 创建自定义标题 ```yml tests: - - text: 你的h2元素和最顶层的img元素都应该在带有类row的div元素中嵌套在一起。 + - text: h2 元素和最上方的 img 元素应该一起内嵌于具有 row class 的 div 元素内。 testString: assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0); - - text: 使用类col-xs-4将最顶层的img元素嵌套在div 。 + - text: 最上方的 img 元素应该内嵌于含有 col-xs-4 class 的 div 元素中。 testString: assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0); - - text: 使用类col-xs-8将h2元素嵌套在div 。 + - text: h2 元素应该内嵌于含有 col-xs-8 class的 div 元素中。 testString: assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0); - - text: 确保每个div元素都有一个结束标记。 + - text: 确保每一个 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
Submit
- ```
@@ -103,8 +108,65 @@ tests: ## Solution
-```js -// solution required +```html + + + + +
+
+
+

CatPhotoApp

+
+
+ A cute orange cat lying on its back. +
+
+ Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.chinese.md index c1257a9d21..e787f296c9 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/create-bootstrap-wells.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9aec908848 title: Create Bootstrap Wells challengeType: 0 -videoUrl: '' -localeTitle: 创建Bootstrap Wells +forumTopicId: 16825 +localeTitle: 创建 Bootstrap Wells --- ## Description -
Bootstrap有一个名为well的类，可以为列创建视觉深度感。巢一个div与类元素well内每个的col-xs-6 div元素。
+
+Bootstrap 有一个叫做 well 的 class，作用是赋予列一种视觉上的深度感（视觉上的效果）。 +在每一个 class 属性为 col-xs-6 的 div 元素中都嵌入一个带有 well 的 div 元素。 +
## Instructions -
+
+
## Tests @@ -18,11 +22,11 @@ localeTitle: 创建Bootstrap Wells ```yml tests: - - text: 添加一个div与类元素well内部的每个的div与类元素"col-xs-6" + - text: "在每一个 class 属性为 'col-xs-6' 的 div 元素中都嵌入一个带有 well 的 div 元素。" testString: assert($("div.col-xs-6").not(":has(>div.well)").length < 1); - - text: 巢既您的div与类元素"col-xs-6"你中div与类元素"row" 。 + - text: "将你的两个 class 属性为 'col-xs-6' 的 div 元素都内嵌入一个带有 'row' 的 div 元素中。" testString: assert($("div.row > div.col-xs-6").length > 1); - - text: 确保所有div元素都有结束标记。 + - text: 确保你的 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
- ``` @@ -58,8 +61,18 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+
+
+
+
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.chinese.md index 4ed125062e..8053e20e55 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.chinese.md @@ -2,15 +2,22 @@ id: bad87fee1347bd9aedf08845 title: Ditch Custom CSS for Bootstrap challengeType: 0 -videoUrl: '' -localeTitle: Ditch Custom CSS for Bootstrap +forumTopicId: 17565 +localeTitle: 用 Bootstrap 来取代我们之前的自定义样式 --- ## Description -
我们可以使用Bootstrap的内置样式代替我们之前创建的自定义样式来清理代码并使我们的Cat Photo App看起来更加传统。别担心 - 以后会有足够的时间来定制CSS。从style元素中删除.smaller-image .red-text ， p和.smaller-image CSS声明，以便style元素中剩下的唯一声明是h2和thick-green-border 。然后删除包含死链接的p元素。然后从h2元素中删除red-text类，并将其替换为text-primary Bootstrap类。最后，从第一个img元素中删除“small-image”类，并将其替换为img-responsive类。
+
+现在我们可以清理一下之前代码，用 Bootstrap 的内置样式来替换我们之前定义的样式，这样会让我们的 Cat Photo App 看起来更简洁些。 +别担心————以后我们会有大把时间来自定义我们的 CSS 样式的。 +删除 style 元素里的 .red-text, p, 和 .smaller-image CSS 声明，使 style 元素留下的声明只有 h2 和 thick-green-border. +删除包含死链接的 p 元素。 然后将 h2 的 red-text class 替换为 Bootstrap 的 text-primary class. +最后, 将你第一个 img 元素的 "smaller-image" class 替换为 img-responsive class. +
## Instructions -
+
+
## Tests @@ -18,15 +25,15 @@ localeTitle: Ditch Custom CSS for Bootstrap ```yml tests: - - text: 你的h2元素不应该有red-text类。 + - text: h2 元素的 class 不应为 red-text。 testString: assert(!$("h2").hasClass("red-text")); - - text: 您的h2元素现在应该具有text-primary类。 + - text: h2 元素的 class 应为 text-primary。 testString: assert($("h2").hasClass("text-primary")); - - text: 您的段落元素不应再使用Monospace 。 + - text: 你的段落元素（p）应该不再使用 Monospace 字体。 testString: assert(!$("p").css("font-family").match(/monospace/i)); - - text: 从顶部图像中删除smaller-image类。 + - text: 移除你第一张图片的 class 属性 smaller-image。 testString: assert(!$("img").hasClass("smaller-image")); - - text: 将img-responsive类添加到您的顶部图像。 + - text: 给你的第一张图片添加 class 属性 img-responsive。 testString: assert($(".img-responsive").length > 1); ``` @@ -107,7 +114,6 @@ tests: - ``` @@ -119,8 +125,60 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.chinese.md index d741426d2b..31b2f76c51 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.chinese.md @@ -2,15 +2,20 @@ id: bad87fee1348bd9aec908855 title: Give Each Element a Unique id challengeType: 0 -videoUrl: '' -localeTitle: 为每个元素赋予唯一ID +forumTopicId: 18191 +localeTitle: 给每个元素一个唯一的 id --- ## Description -
我们还希望能够使用jQuery通过其唯一ID来定位每个按钮。每个按钮提供一个唯一的ID，从target1 ，结束时用target6 。确保target1到target3在#left-well ，而target4到target6在#right-well 。
+
+我们也可以通过 jQuery 根据每个按钮唯一的 id 来标识出它们。 +给你的每一个按钮设置唯一的 id，以 target1 开始，target6 结束。 +确保 target1 到 target3 在 #left-well 之中，target4 到 target6 在 #right-well 之中。 +
## Instructions -
+
+
## Tests @@ -18,17 +23,17 @@ localeTitle: 为每个元素赋予唯一ID ```yml tests: - - text: 一个button元素应该具有id target1 。 + - text: 其中一个 button 元素应该有 id target1。 testString: assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0); - - text: 一个button元素应该具有id target2 。 + - text: 其中一个 button 元素应该有 id target2。 testString: assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0); - - text: 一个button元素应该具有id target3 。 + - text: 其中一个 button 元素应该有 id target3。 testString: assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0); - - text: 一个button元素应该具有id target4 。 + - text: 其中一个 button 元素应该有 id target4。 testString: assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0); - - text: 一个button元素应该具有id target5 。 + - text: 其中一个 button 元素应该有 id target5。 testString: assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0); - - text: 一个button元素应该具有id target6 。 + - text: 其中一个 button 元素应该有 id target6。 testString: assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0); ``` @@ -62,7 +67,6 @@ tests: - ``` @@ -74,8 +78,28 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+

#left-well

+
+ + + +
+
+
+

#right-well

+
+ + + +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.chinese.md index 40483fe231..d62116741e 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9aec908746 title: House our page within a Bootstrap container-fluid div challengeType: 0 -videoUrl: '' -localeTitle: 将我们的页面放在Bootstrap容器 - 流体div中 +forumTopicId: 18198 +localeTitle: 将我们的页面放在 Fluid 容器中 --- ## Description -
现在让我们确保您网页上的所有内容都是移动响应式的。让我们使用类container-fluid将h3元素嵌套在div元素container-fluid 。
+
+现在让我们确保页面所有内容应该都是响应式的。 +将我们的 h3 元素内嵌进一个具有 container-fluid class 的div 元素中。 +
## Instructions -
+
+
## Tests @@ -18,11 +22,11 @@ localeTitle: 将我们的页面放在Bootstrap容器 - 流体div中 ```yml tests: - - text: 你的div元素应该有class container-fluid 。 + - text: div 元素 class 属性应该为 container-fluid。 testString: assert($("div").hasClass("container-fluid")); - - text: 确保每个div元素都有一个结束标记。 + - text: 确保每一个 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
h3元素div元素中。 + - text: h3 元素应该内嵌于 div 元素。 testString: assert($("div").children("h3").length >0); ``` @@ -48,8 +52,10 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.chinese.md index 27241c9b9d..d689e8a83f 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-buttons.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9aec908856 title: Label Bootstrap Buttons challengeType: 0 -videoUrl: '' -localeTitle: 标签引导按钮 +forumTopicId: 18222 +localeTitle: 给 Bootstrap 按钮贴标签 --- ## Description -
就像我们标记了我们的井，我们想要标记我们的按钮。为每个button元素提供与其id的选择器对应的文本。
+
+正如我们标注了每个 wells 一样，我们同样想要标注每一个按钮。 +为每一个 button 元素设置与其 id 选择器相同的文本。 +
## Instructions -
+
+
## Tests @@ -18,17 +22,17 @@ localeTitle: 标签引导按钮 ```yml tests: - - text: '给你的button元素id为target1文本#target1 。' + - text: 给 id 为 target1 的 button 元素设置文本 #target1。 testString: assert(new RegExp("#target1","gi").test($("#target1").text())); - - text: '给你的button元素id为target2文本#target2 。' + - text: 给 id 为 target2 的 button 元素设置文本 #target2。 testString: assert(new RegExp("#target2","gi").test($("#target2").text())); - - text: '给你的button元素id为target3文本#target3 。' + - text: 给 id 为 target3 的 button 元素设置文本 #target3。 testString: assert(new RegExp("#target3","gi").test($("#target3").text())); - - text: '给你的button元素id为target4文本#target4 。' + - text: 给 id 为 target4 的 button 元素设置文本 #target4。 testString: assert(new RegExp("#target4","gi").test($("#target4").text())); - - text: '给你的button元素id为target5文本#target5 。' + - text: 给 id 为 target5 的 button 元素设置文本 #target5。 testString: assert(new RegExp("#target5","gi").test($("#target5").text())); - - text: '使用id target6为您的button元素提供文本#target6 。' + - text: 给 id 为 target6 的 button 元素设置文本 #target6。 testString: assert(new RegExp("#target6","gi").test($("#target6").text())); ``` @@ -62,7 +66,6 @@ tests:
- ``` @@ -74,8 +77,28 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+

#left-well

+
+ + + +
+
+
+

#right-well

+
+ + + +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.chinese.md index 5d2849bd97..28e9c83384 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/label-bootstrap-wells.chinese.md @@ -2,15 +2,20 @@ id: bad87fee1348bd9aec908854 title: Label Bootstrap Wells challengeType: 0 -videoUrl: '' -localeTitle: 标签Bootstrap Wells +forumTopicId: 18223 +localeTitle: 给 Bootstrap Wells 贴标签 --- ## Description -
为了清楚起见，我们用它们的ID标记我们的两个井。在左侧井的上方，在其col-xs-6 div元素内，添加一个带有文本#left-well的h4元素。在右侧井上方，在其col-xs-6 div元素内，添加一个带有文本#right-well的h4元素。
+
+为了让我们页面逻辑更清晰，让我们为 wells 都标上它们的 id 吧。 +在 left-well 的上一层，class 属性为 col-xs-6 的 div 元素里面，增加一个文本为 #left-well 的 h4 元素。 +在 right-well 的上一层，class 属性为 col-xs-6 的 div 元素里面，增加一个文本为 #right-well 的 h4 元素。 +
## Instructions -
+
+
## Tests @@ -18,13 +23,13 @@ localeTitle: 标签Bootstrap Wells ```yml tests: - - text: 在每个<div class="col-xs-6">元素中添加一个h4元素。 + - text: "为每个 <div class='col-xs-6'> 元素添加一个 h4 元素。" testString: assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1); - - text: '一个h4元素应该有#left-well文本。' + - text: 其中一个 h4 元素应该含有文本内容 #left-well。 testString: assert(new RegExp("#left-well","gi").test($("h4").text())); - - text: '一个h4元素应该有#right-well文本。' + - text: 其中一个 h4 元素应该含有文本内容 #right-well。 testString: assert(new RegExp("#right-well","gi").test($("h4").text())); - - text: 确保所有h4元素都有结束标记。 + - text: 确保每个 h4 元素都有一个闭合标签。 testString: assert(code.match(/<\/h4>/g) && code.match(/

/g).length === code.match(/

- ``` @@ -70,8 +74,28 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+

#left-well

+
+ + + +
+
+
+

#right-well

+
+ + + +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.chinese.md index adb4e3478c..53df4962a7 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.chinese.md @@ -5,15 +5,20 @@ required: - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' raw: true challengeType: 0 -videoUrl: '' -localeTitle: 使用Bootstrap响应表单元素 +forumTopicId: 18225 +localeTitle: 使用 Bootstrap 响应式排列表单元素 --- ## Description -
现在让我们将您的表单input和提交button放在同一行。我们将做到这一点，我们以前有相同的方式：通过使用div元素带班row ，和其他div使用中它的元素col-xs-*类。将表单的文本input和提交button嵌套在具有类row的div 。将表单的文本input嵌套在具有col-xs-7类的div中。将表单的提交button div具有类col-xs-5的div 。这是我们目前为Cat Photo App所做的最后一项挑战。我们希望您喜欢学习Font Awesome，Bootstrap和响应式设计！
+
+现在让我们把你表单里的 input 元素和 submit button （提交按钮）放在同一行。跟着之前的做法来就行：准备好一个具有 row class 的 div 元素还有几个具有 col-xs-* class 的 div 元素。 +先把你表单的 text input （文本输入框）和 submit button （提交按钮）放进具有 row class 的 div 中。再用 col-xs-7 class 的 div 包裹表单的 text input （文本输入框），col-xs-5 class 的 div 包裹表单的 submit button （提交按钮）。 +这是我们到目前为止 Cat Photo App 的最后一个挑战了。我希望你能喜欢 Font Awesome， Bootstrap，和响应式设计！ +
## Instructions -
+
+
## Tests @@ -21,13 +26,13 @@ localeTitle: 使用Bootstrap响应表单元素 ```yml tests: - - text: 将表单提交按钮和文本输入嵌套在带有类row的div中。 + - text: 确保提交按钮和文本输入框都在同一个具有 class 属性 row 的 div 元素中。 testString: assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0); - - text: 将表单文本输入嵌套在具有类col-xs-7的div中。 + - text: 表单的文本输入框应该嵌入到具有 class 属性 col-xs-7 的 div 内。 testString: assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0); - - text: 将表单提交按钮嵌套在具有类col-xs-5的div中。 + - text: 表单的提交按钮应该嵌入到具有 class 属性 col-xs-5 的 div 内。 testString: assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0); - - text: 确保每个div元素都有一个结束标记。 + - text: 确保每一个 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
Submit
- ```
@@ -124,8 +128,85 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+
+
+

CatPhotoApp

+
+
+ A cute orange cat lying on its back. +
+
+ Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.chinese.md index 4a9af31b45..31bffd9d45 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/make-images-mobile-responsive.chinese.md @@ -2,15 +2,20 @@ id: bad87fee1348bd9acde08812 title: Make Images Mobile Responsive challengeType: 0 -videoUrl: '' -localeTitle: 使图像移动响应 +forumTopicId: 18232 +localeTitle: 使图片自适应移动端 --- ## Description -
首先，在现有图像下方添加新图像。将其src属性设置为https://bit.ly/fcc-running-cats 。如果这个图像可以正好是我们手机屏幕的宽度，那就太好了。幸运的是，使用Bootstrap，我们需要做的就是将img-responsive类添加到您的图像中。这样做，图像应完全适合您的页面宽度。
+
+首先，在已有的图片下面添加一张新的图片. 设置 src 属性为 https://bit.ly/fcc-running-cats。 +如果图片的大小恰恰和我们手机屏幕尺寸大小一样自然是最好的。 +幸运的是现在通过 Bootstrap，我们仅仅只需要为 image 标签上设置 class 属性为 img-responsive 就可以让它完美的适应你页面的宽度了。 +
## Instructions -
+
+
## Tests @@ -18,15 +23,15 @@ localeTitle: 使图像移动响应 ```yml tests: - - text: 你应该总共有两个图像。 + - text: 该页面拥有总计两个图片。 testString: assert($("img").length === 2); - - text: 您的新图像应该低于旧图像并且具有img-responsive类。 + - text: 新的图片应该在旧的图片下面并且含有 class 属性 img-responsive。 testString: assert($("img:eq(1)").hasClass("img-responsive")); - - text: 您的新图片不应该具有smaller-image类。 + - text: 新的图片不应该含有 class 属性 smaller-image。 testString: assert(!$("img:eq(1)").hasClass("smaller-image")); - - text: '您的新图片应该具有https://bit.ly/fcc-running-cats的src 。' + - text: 新图片的 src 属性应该为 https://bit.ly/fcc-running-cats。 testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats"); - - text: 确保新的img元素具有关闭角括号。 + - text: 确保新的 img 元素有一个闭合的右尖括号 “/>”。 testString: assert(code.match(//g).length === 2 && code.match(/Submit - ``` @@ -107,8 +111,64 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.chinese.md index f27f7b3e5e..9e0907f902 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-checkboxes.chinese.md @@ -5,15 +5,18 @@ required: - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' raw: true challengeType: 0 -videoUrl: '' -localeTitle: 响应式样式复选框 +forumTopicId: 18269 +localeTitle: 响应式风格的复选框 --- ## Description -
您也可以在form元素上使用Bootstrap的col-xs-*类！这样，无论屏幕分辨率有多宽，我们的复选框都会均匀分布在整个页面上。将所有三个复选框嵌套在<div class="row">元素中。然后将它们嵌套在<div class="col-xs-4">元素中。
+
+你还可以将 Bootstrap 的 col-xs-* 用在 form 元素上!这样我们就可以在不关心屏幕大小的情况下，将我们的复选框均匀的放在页面上了。 +
## Instructions -
+
+将所有复选框都放置于一个 <div class="row"> 元素中。然后分别把每个复选框都放置于一个 <div class="col-xs-4"> 元素中。
## Tests @@ -21,11 +24,11 @@ localeTitle: 响应式样式复选框 ```yml tests: - - text: 将所有复选框div带有类row div 。 + - text: 将所有的复选框嵌入一个含有 row class 的 div 元素中。 testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0); - - text: 使用类col-xs-4将每个复选框嵌入其自己的div 。 + - text: 每一个复选框应该嵌套于自己的 div 元素中，每个 div 元素都具有 col-xs-4 class。 testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2); - - text: 确保每个div元素都有一个结束标记。 + - text: 确保所有 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
Submit
- ```
@@ -114,8 +116,79 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+
+
+

CatPhotoApp

+
+
+ A cute orange cat lying on its back. +
+
+ Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.chinese.md index 043cc66d07..4617993eef 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.chinese.md @@ -5,15 +5,20 @@ required: - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' raw: true challengeType: 0 -videoUrl: '' -localeTitle: 响应样式单选按钮 +forumTopicId: 18270 +localeTitle: 响应式风格的单选按钮 --- ## Description -
您也可以在form元素上使用Bootstrap的col-xs-*类！这样，无论屏幕分辨率有多宽，我们的单选按钮都会均匀分布在整个页面上。将您的单选按钮嵌套在<div class="row">元素中。然后将它们嵌套在<div class="col-xs-6">元素中。 注意：作为提醒，单选按钮是radio类型的input元素。
+
+你还可以将 Bootstrap 的 col-xs-* class 用在 form 元素上！这样我们就可以在不关心屏幕大小的情况下，将我们的单选按钮均匀的平铺在页面上。 +将你的所有单选按钮放入 <div class="row"> 元素。再用 <div class="col-xs-6"> 元素包裹每一个单选按钮。 +记住： 提醒一句，单选按钮是 type 为 radio 的 input 元素。 +
## Instructions -
+
+
## Tests @@ -21,11 +26,11 @@ localeTitle: 响应样式单选按钮 ```yml tests: - - text: 将所有单选按钮div具有类row一个div 。 + - text: 把所有的单选按钮放置于具有 row class 的 div 元素中。 testString: assert($("div.row:has(input[type=\"radio\"])").length > 0); - - text: 使用类col-xs-6将每个单选按钮嵌套在自己的div 。 + - text: 每一个单选按钮应该嵌套于 div 元素之中，该 div 元素的 class 属性为 col-xs-6。 testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1); - - text: 确保每个div元素都有一个结束标记。 + - text: 确保所有 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
Submit
- ```
@@ -107,8 +111,70 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+
+
+

CatPhotoApp

+
+
+ A cute orange cat lying on its back. +
+
+ Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+
+
+ +
+
+ +
+
+ + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.chinese.md index 9dc19701dd..7f02e18154 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/split-your-bootstrap-row.chinese.md @@ -2,15 +2,19 @@ id: bad87fee1348bd9aec908847 title: Split Your Bootstrap Row challengeType: 0 -videoUrl: '' -localeTitle: 拆分你的Bootstrap行 +forumTopicId: 18306 +localeTitle: 分割你的 Bootstrap Row --- ## Description -
现在我们有了一个Bootstrap Row，让我们把它分成两列来容纳我们的元素。使用类col-xs-6在行中创建两个div元素。
+
+现在我们已经有了一个 Bootstrap Row，让我们把它分成两列来放置我们的元素。 +在行内创建两个 class 属性为 col-xs-6 的 div 元素。 +
## Instructions -
+
+
## Tests @@ -18,9 +22,9 @@ localeTitle: 拆分你的Bootstrap行 ```yml tests: - - text: 在div class="row"元素中嵌套两个div class="col-xs-6"元素。 + - text: "将两个 div class='col-xs-6' 元素内嵌入你的 div class='row' 元素中。" testString: assert($("div.row > div.col-xs-6").length > 1); - - text: 确保所有div元素都有结束标记。 + - text: 确保你的 div 元素都有一个闭合标签。 testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
- ```
@@ -52,8 +55,14 @@ tests: ## Solution
-```js -// solution required +```html +
+

jQuery Playground

+
+
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.chinese.md index 781819d689..91e9d6bfe0 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.chinese.md @@ -5,15 +5,20 @@ required: - link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css' raw: true challengeType: 0 -videoUrl: '' -localeTitle: 样式文本输入作为表单控件 +forumTopicId: 18312 +localeTitle: 给表单控件的输入框添加样式 --- ## Description -
您可以通过在提交button元素中添加<i class="fa fa-paper-plane"></i>来添加fa-paper-plane Font Awesome图标。为表单的文本输入字段提供一组form-control 。给你的表单提交按钮btn btn-primary 。同时为此按钮提供fa-paper-plane的Font Awesome图标。具有类.form-control所有文本<input> ， <textarea>和<select>元素的宽度均为100％。
+
+你可以通过在 submit button 内加上 <i class="fa fa-paper-plane"></i> 来添加 Font Awesome 的 fa-paper-plane 图标。 +为表单的文本输入框（text input）设置 form-control class。为表单的提交（submit）按钮设置 btn btn-primary class，并为它加上 Font Awesome 的 fa-paper-plane 图标。 +所有文本输入类的元素如 <input>，<textarea> 和 <select> 只要设置 .form-control class 就会占满100%的宽度。 +
## Instructions -
+
+
## Tests @@ -21,13 +26,13 @@ localeTitle: 样式文本输入作为表单控件 ```yml tests: - - text: 在表单中提交btn btn-primary类的提交按钮。 + - text: 给你的 submit 按钮添加 btn btn-primary class。 testString: assert($("button[type=\"submit\"]").hasClass("btn btn-primary")); - - text: 在提交button元素中添加<i class="fa fa-paper-plane"></i> 。 + - text: "在你的 submit button 元素嵌入 <i class='fa fa-paper-plane'></i>。" testString: assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0); - - text: 在表单中input文本input类form-control 。 + - text: 给表单中的 text input 元素添加 form-control class。 testString: assert($("input[type=\"text\"]").hasClass("form-control")); - - text: 确保每个i元素都有一个结束标记。 + - text: 确保每一个 i 元素都有一个闭合标签。 testString: assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3); ``` @@ -112,7 +117,6 @@ tests: - ``` @@ -124,8 +128,79 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+
+
+

CatPhotoApp

+
+
+ A cute orange cat lying on its back. +
+
+ Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.chinese.md index ff544260fe..b3ec51da7f 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.chinese.md @@ -2,15 +2,20 @@ id: bad87fee1348cd8acef08811 title: Taste the Bootstrap Button Color Rainbow challengeType: 0 -videoUrl: '' -localeTitle: 品尝Bootstrap按钮彩虹 +forumTopicId: 18323 +localeTitle: 体验 Bootstrap 彩虹色的按钮 --- ## Description -
btn-primary类是您将在应用中使用的主要颜色。它可用于突出显示您希望用户执行的操作。在按钮中用btn-primary替换Bootstrap的btn-default类。请注意，此按钮仍需要btn和btn-block类。
+
+btn-primary class 的颜色是你在应用中的主题色。这样 “突出显示” 是引导用户按步就班进行操作的有效办法。 +将按钮的 class 从 Bootstrap 的 btn-default 替换为 btn-primary。 +记住：你的按钮仍然需要 btn 和 btn-block class。 +
## Instructions -
+
+
## Tests @@ -18,11 +23,11 @@ localeTitle: 品尝Bootstrap按钮彩虹 ```yml tests: - - text: 你的按钮应该有btn-primary类。 + - text: 按钮的 class 属性应该有 btn-primary。 testString: assert($("button").hasClass("btn-primary")); - - text: 你的按钮应该仍然有btn和btn-block类。 + - text: 按钮的 class 属性应该仍有 btn 和 btn-block。 testString: assert($("button").hasClass("btn-block") && $("button").hasClass("btn")); - - text: 确保所有button元素都有一个结束标记。 + - text: 确保所有 button 元素都有一个闭合标签。 testString: assert(code.match(/<\/button>/g) && code.match(/ - ``` @@ -105,8 +109,65 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. + +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.chinese.md index 38099e7e0c..2f9ab99bfa 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.chinese.md @@ -2,15 +2,25 @@ id: bad87fee1348bd9aedf08845 title: Use a span to Target Inline Elements challengeType: 0 -videoUrl: '' -localeTitle: 使用跨度来定位内联元素 +forumTopicId: 18370 +localeTitle: 使用 span 创建行内元素 --- ## Description -
您可以使用跨度来创建内联元素。还记得我们使用btn-block类使按钮填满整行吗？ 说明“内联”元素和“块”元素之间的区别。通过使用内联span元素，您可以将多个元素放在同一行上，甚至可以不同地为同一行的不同部分设置样式。在span元素中的“Things cats love”元素中嵌入“love”这个词。然后给出span类text-danger以使文本变为红色。以下是你如何使用“猫讨厌的三件事”元素： <p>Top 3 things cats <span class="text-danger">hate:</span></p>
+
+你可以使用 span 标签来创建行内元素。还记得我们怎么使用 btn-block class 来创建填满整行的按钮吗？ + + +上面的例子就是 "inline" （行内）元素和 "block" （块级）元素的区别。 +通过使用行内元素 span，你可以把不同的元素放在同一行，甚至能为一个元素的不同部分指定样式。 +把 "Things cats love" 中的 "love" 放入 span 标签。然后为其添加 text-danger class 来使其文字变成红色。 +"Top 3 things cats hate" 元素的写法如下： +<p>Top 3 things cats <span class="text-danger">hate:</span></p> +
## Instructions -
+
+
## Tests @@ -18,13 +28,13 @@ localeTitle: 使用跨度来定位内联元素 ```yml tests: - - text: 你的span元素应该在你的p元素中。 + - text: span 元素应该在 p 元素内。 testString: assert($("p span") && $("p span").length > 0); - - text: 你的span元素应该只有文字love 。 + - text: span 元素应该只含有文本 love。 testString: assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i)); - - text: 你的span元素应该有class text-danger 。 + - text: span 元素应该含有 class text-danger。 testString: assert($("span").hasClass("text-danger")); - - text: 确保您的span元素具有结束标记。 + - text: 确保你的 span 元素有一个闭合标签。 testString: assert(code.match(/<\/span>/g) && code.match(//g).length === code.match(/Submit - ``` @@ -104,8 +113,62 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.chinese.md index 5120029201..602c2c25b0 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.chinese.md @@ -2,15 +2,21 @@ id: bad87fee1348bd9aec908857 title: Use Comments to Clarify Code challengeType: 0 -videoUrl: '' -localeTitle: 使用注释来澄清代码 +forumTopicId: 18347 +localeTitle: 使用注释来说明代码 --- ## Description -
当我们开始使用jQuery时，我们将修改HTML元素，而无需在HTML中实际更改它们。让我们确保每个人都知道他们不应该直接修改任何代码。请记住，您可以使用<!--开始发表评论并使用-->在HTML顶部添加评论“ Only change code above this line.
+
+当我们开始使用 jQuery，我们将修改HTML元素，但是实际上我们并不是直接在 HTML 文本中修改。 +我们必须确保让每个人都知道，他们不应该直接修改此页面上这些代码。 +记住，你可以在 <!-- 为开始，--> 为结束的地方进行评论注释（像这样，<!-- 我是一段注释 -->）。 +请你在你的 HTML 顶部加如下一段注释： Only change code above this line. 。 +
## Instructions -
+
+
## Tests @@ -18,13 +24,13 @@ localeTitle: 使用注释来澄清代码 ```yml tests: - - text: 在HTML的顶部用<!--开始评论。 + - text: 在添加注释前，在你的 HTML 顶部增加此代码 <!--。 testString: assert(code.match(/^\s*.*this line))\s*.*this line.*\s*-->/gi)); - - text: 请务必使用-->关闭您的评论。 + - text: 注释应该用 --> 进行闭合。 testString: assert(code.match(/-->.*\n+.+/g)); - - text: 你应该有相同数量的评论开启者和关闭者。 + - text: 注意，注释的开始标签和闭合标签数量应该一一对应，保持数量一致。 testString: assert(code.match(//g).length); ``` @@ -58,7 +64,6 @@ tests: - ``` @@ -70,8 +75,29 @@ tests: ## Solution
-```js -// solution required +```html + +
+

jQuery Playground

+
+
+

#left-well

+
+ + + +
+
+
+

#right-well

+
+ + + +
+
+
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.chinese.md index 9377deb4da..69dc184ba2 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.chinese.md @@ -2,15 +2,24 @@ id: bad87fee1348bd9acde08712 title: Use Responsive Design with Bootstrap Fluid Containers challengeType: 0 -videoUrl: '' -localeTitle: 使用具有Bootstrap Fluid Containers的响应式设计 +forumTopicId: 18362 +localeTitle: 使用 Fluid 容器实现响应式设计 --- ## Description -
在freeCodeCamp的HTML5和CSS部分，我们构建了一个Cat Photo App。现在让我们回到它。这一次，我们将使用流行的Bootstrap响应式CSS框架来设计它。 Bootstrap将通过调整HTML元素的大小来确定屏幕的宽度和响应 - 因此称为Responsive Design 。通过响应式设计，您无需设计网站的移动版本。在具有任何宽度的屏幕的设备上看起来都很好。您可以通过将以下代码添加到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标记是可以接受的。首先，我们应该将所有HTML（ link标签和style元素除外）嵌套在带有container-fluid类的div元素container-fluid 。
+
+之前，在 freeCodeCamp 的 HTML5 和 CSS 章节中我们构建了一个 Cat Photo App。这次我们将会使用最受欢迎的响应式 CSS 框架 Bootstrap 来美化它。 +Bootstrap 会根据你的屏幕大小来调节 HTML 元素的大小————因此称为 Responsive Design（响应式设计）。 +通过响应式设计，我们将无需额外设计一个手机版的网页，因为它在任何尺寸的屏幕上看起来都还不错。 +无论开发什么应用，你都可以通过将以下代码添加到你的 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 标签来保证引入成功。 +首先，我们应该把所有 HTML 标签放在 class 为 container-fluid 的 div 元素下（除了 link 标签和 style 标签）。 +
## Instructions -
+
+
## Tests @@ -18,11 +27,11 @@ localeTitle: 使用具有Bootstrap Fluid Containers的响应式设计 ```yml tests: - - text: 你的div元素应该有class container-fluid 。 + - text: div 元素的 class 属性应该为 container-fluid。 testString: assert($("div").hasClass("container-fluid")); - - text: 确保你的div元素有一个结束标记。 + - text: 确保你的 div 元素有闭合标签. testString: assert(code.match(/<\/div>/g) && code.match(/
/g).length === code.match(/
.container-fluid的结束style标记之后嵌套了所有HTML元素。 + - text: 确保你已经将所有 HTML 元素内嵌在闭合的 style 标签后的 .container-fluid 元素中。 testString: assert($(".container-fluid").children().length >= 8); ``` @@ -89,7 +98,6 @@ tests: - ```
@@ -101,8 +109,62 @@ tests: ## Solution
-```js -// solution required +```html + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ +A cute orange cat lying on its back. + +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.chinese.md index 153ca2715c..e9bebd557e 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.chinese.md @@ -2,15 +2,23 @@ id: bad88fee1348ce8acef08815 title: Use the Bootstrap Grid to Put Elements Side By Side challengeType: 0 -videoUrl: '' -localeTitle: 使用Bootstrap网格并排放置元素 +forumTopicId: 18371 +localeTitle: 使用 Bootstrap 网格并排放置元素 --- ## Description -
Bootstrap使用响应式12列网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大多数类都可以应用于div元素。 Bootstrap具有不同的列宽属性，具体取决于用户屏幕的宽度。例如，手机屏幕较窄，笔记本电脑屏幕较宽。以Bootstrap的col-md-*类为例。这里， md表示中等， *是指定元素应该有多少列的数字。在这种情况下，正在指定中型屏幕（例如笔记本电脑）上的元素的列宽。在我们正在构建的Cat照片应用程序中，我们将使用col-xs-* ，其中xs表示超小（如超小型手机屏幕）， *是指示列宽多少列的列数元素应该是。通过将所有三个嵌套在一个<div class="row">元素中，然后将它们中的每一个<div class="col-xs-4">元素中，将Like ， Info和Delete按钮并排放置。 row类应用于div ，按钮本身可以嵌套在其中。
+
+Bootstrap 具有一套基于 12 列的响应式栅格系统————可以轻松实现将多个元素放入一行并指定它们的相对宽度。 Bootstrap 的大部分 class 属性都可以应用在 div 元素上。 +Bootstrap 的列宽度属性取决于用户的屏幕宽度。 比如，手机有着窄屏幕而笔记本电脑有者更大的屏幕. +就拿 Bootstrap 的 col-md-* class 来说。 在这里， md 表示 medium （中等的）， 而 * 是一个数字，说明了这个元素占有多少个列宽度。这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。 +在我们创建的 Cat Photo App 中，我们将使用 col-xs-* ， 其中 xs 是 extra small 的缩写 (应用于较小的屏幕，比如手机屏幕)， * 是你填写的数字，代表一行中，你的元素该占多少列宽。 +将我们的 Like, Info 和 Delete 三个按钮并排放入一个 <div class="row"> 元素中，然后每个按钮都各用一个 <div class="col-xs-4"> 元素包裹起来。 +当 div 元素设置了 row class 之后，那几个按钮便会嵌入其中了。 +
## Instructions -
+
+
## Tests @@ -18,13 +26,13 @@ localeTitle: 使用Bootstrap网格并排放置元素 ```yml tests: - - text: 您的按钮应全部嵌套在具有类row的同一div元素中。 + - text: 所有按钮都需要嵌入到同一个 div 元素中， 并且该元素包含 class 属性 row。 testString: assert($("div.row:has(button)").length > 0); - - text: 每个Bootstrap按钮都应嵌套在自己的div元素中，类别为col-xs-4 。 + - text: 每个 Bootstrap 按钮都需要嵌入各自的 div 元素，并且该元素包含 class 属性 col-xs-4。 testString: assert($("div.col-xs-4:has(button)").length > 2); - - text: 确保每个button元素都有一个结束标记。 + - text: 确保每一个 button 元素都有一个闭合标签。 testString: assert(code.match(/<\/button>/g) && code.match(/
- ``` @@ -109,8 +116,76 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. +
+
+ +
+
+ +
+
+ +
+
+ +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +
diff --git a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.chinese.md b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.chinese.md index bd8759207b..6bc637b6cc 100644 --- a/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.chinese.md +++ b/curriculum/challenges/chinese/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.chinese.md @@ -2,15 +2,20 @@ id: bad87fee1348ce8acef08814 title: Warn Your Users of a Dangerous Action with btn-danger challengeType: 0 -videoUrl: '' -localeTitle: 用btn-danger警告你的危险行为用户 +forumTopicId: 18375 +localeTitle: 使用 btn-danger 提示危险操作 --- ## Description -
Bootstrap带有几种预定义的按钮颜色。 btn-danger类是用于通知用户按钮执行破坏性操作的按钮颜色，例如删除猫照片。创建一个带有“删除”文本的按钮，并为其提供类btn-danger 。请注意，这些按钮仍然需要btn和btn-block类。
+
+Bootstrap 有着丰富的预定义按钮颜色。 红色 btn-danger class 用来提醒用户此行为具有破坏性，比如删除一张猫的图片。 +创建一个包含文本 "Delete" 的按钮并为它设置 class 为 btn-danger。 +记住：你的这些按钮仍然需要 btn 和 btn-block class。 +
## Instructions -
+
+
## Tests @@ -18,13 +23,13 @@ localeTitle: 用btn-danger警告你的危险行为用户 ```yml tests: - - text: 创建一个带有“删除”文本的新button元素。 + - text: "创建一个包含文本 'Delete' 的 button 元素。" testString: assert(new RegExp("Delete","gi").test($("button").text())); - - text: 你的所有Bootstrap按钮都应该有btn和btn-block类。 + - text: 所有 Bootstrap 按钮的 class 属性都应该有 btn 和 btn-block。 testString: assert($("button.btn-block.btn").length > 2); - - text: 你的新按钮应该有类btn-danger 。 + - text: 新创建按钮的 class 属性应该有 btn-danger。 testString: assert($("button").hasClass("btn-danger")); - - text: 确保所有button元素都有一个结束标记。 + - text: 确保你所有的 button 元素都有一个闭合标签。 testString: assert(code.match(/<\/button>/g) && code.match(/ - ``` @@ -108,8 +112,67 @@ tests: ## Solution
-```js -// solution required +```html + + + +
+

CatPhotoApp

+ +

Click here for cat photos.

+ + A cute orange cat lying on its back. + + Three kittens running towards the camera. + + + +

Things cats love:

+
    +
  • cat nip
    • +
  • laser pointers
    • +
  • lasagna
    • +
+

Top 3 things cats hate:

+
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+
+ + + + + + + +
+
``` -/section> +