From 559c06d333944bb7d9e21afd5244e120b6323495 Mon Sep 17 00:00:00 2001 From: thewindsword Date: Tue, 31 Jul 2018 22:10:18 +0800 Subject: [PATCH 1/3] translate Bootstrap 100% --- 03-front-end-libraries/bootstrap.json | 647 +++++++++++++------------- 03-front-end-libraries/bootstrap.md | 14 +- 2 files changed, 331 insertions(+), 330 deletions(-) diff --git a/03-front-end-libraries/bootstrap.json b/03-front-end-libraries/bootstrap.json index cfb5441..b808794 100644 --- a/03-front-end-libraries/bootstrap.json +++ b/03-front-end-libraries/bootstrap.json @@ -13,26 +13,26 @@ "id": "bad87fee1348bd9acde08712", "title": "Use Responsive Design with Bootstrap Fluid Containers", "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.", - "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", - "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:", + "之前，在 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\"/>", - "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.", - "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." + "在该案例中，我们已经帮你把相应代码添加到页面中。记住使用 > 和 /> 闭合 link 标签来保证引入成功。", + "首先，我们应该把所有 HTML 标签放在 class 为 container-fluid 的 div 元素下（除了 link 标签和 style 标签）。" ], "tests": [ { - "text": "Your div element should have the class container-fluid.", - "testString": "assert($(\"div\").hasClass(\"container-fluid\"), 'Your div element should have the class container-fluid.');" + "text": "你的 div 元素应该具有属性 class 并且值为 container-fluid。", + "testString": "assert($(\"div\").hasClass(\"container-fluid\"), '你的 div 元素应该包含属性 class 并且值为 container-fluid。');" }, { - "text": "Make sure your div element has a closing tag.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div element has a closing tag.');" + "text": "确保你的 div 元素有闭合标签.", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素有闭合标签。');" }, { - "text": "Make sure you have nested all HTML elements after the closing style tag in .container-fluid.", - "testString": "assert($(\".container-fluid\").children().length >= 8, 'Make sure you have nested all HTML elements after the closing style tag in .container-fluid.');" + "text": "确保你已经将所有 HTML 元素内嵌在闭合的 style 标签后的 .container-fluid 元素中。", + "testString": "assert($(\".container-fluid\").children().length >= 8, '确保你已经将所有 HTML 元素内嵌在闭合的 style 标签后的 .container-fluid 元素中。');" } ], "challengeType": 0, @@ -106,30 +106,30 @@ "id": "bad87fee1348bd9acde08812", "title": "Make Images Mobile Responsive", "description": [ - "First, add a new image below the existing one. Set its src attribute to https://bit.ly/fcc-running-cats.", - "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." + "首先，在已有的图片下面添加一张新的图片. 设置 src 属性为 https://bit.ly/fcc-running-cats。", + "如果图片的大小恰恰和我们手机屏幕尺寸大小一样自然是最好的。", + "幸运的是现在通过 Bootstrap， 我们只需要为 image 标签上添加 class 为 img-responsive 就可以让它完美的适应你页面的宽度了。" ], "tests": [ { - "text": "You should have a total of two images.", - "testString": "assert($(\"img\").length === 2, 'You should have a total of two images.');" + "text": "该页面应该拥有总计两个图片。", + "testString": "assert($(\"img\").length === 2, '该页面应该拥有总计两个图片。');" }, { - "text": "Your new image should be below your old one and have the class img-responsive.", - "testString": "assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), 'Your new image should be below your old one and have the class img-responsive.');" + "text": "新的图片应该在旧的图片下面并且含有 img-responsive 的类（class）属性 。", + "testString": "assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), '新的图片应该在旧的图片下方并且含有 class 为 img-responsive。');" }, { - "text": "Your new image should not have the class smaller-image.", - "testString": "assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), 'Your new image should not have the class smaller-image.');" + "text": "你的新图片不应该含有 smaller-image 的类（class）属性。", + "testString": "assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), '你的新图片不应该含有 smaller-image 的类（class）属性。');" }, { - "text": "Your new image should have a src of https://bit.ly/fcc-running-cats.", - "testString": "assert($(\"img:eq(1)\").attr(\"src\") === \"https://bit.ly/fcc-running-cats\", 'Your new image should have a src of https://bit.ly/fcc-running-cats.');" + "text": "你的新图片的 src 属性应该为 https://bit.ly/fcc-running-cats。", + "testString": "assert($(\"img:eq(1)\").attr(\"src\") === \"https://bit.ly/fcc-running-cats\", '你的新图片的 src 属性应该为 https://bit.ly/fcc-running-cats。');" }, { - "text": "Make sure your new img element has a closing angle bracket.", - "testString": "assert(code.match(//g).length === 2 && code.match(/img element has a closing angle bracket.');" + "text": "确保你的新元素 img 有一个闭合的右尖括号 “/>”。", + "testString": "assert(code.match(//g).length === 2 && code.match(/img 有一个闭合的右尖括号 “/>”。');" } ], "challengeType": 0, @@ -205,18 +205,18 @@ "id": "bad87fee1348bd8acde08812", "title": "Center Text with Bootstrap", "description": [ - "Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center to our h2 element.", - "Remember that you can add several classes to the same element by separating each of them with a space, like this:", + "现在我们正在使用 Bootstrap，因此我们可以将头部元素居中来让页面看起来更棒。而我们需要做的仅仅是为我们的 h2 元素添加一个 text-center 的类（class）属性", + "记住：我们通过空格分隔不同的 class 可以为一个元素添加多个 class ，就像这样：", "<h2 class=\"red-text text-center\">your text</h2>" ], "tests": [ { - "text": "Your h2 element should be centered by applying the class text-center", - "testString": "assert($(\"h2\").hasClass(\"text-center\"), 'Your h2 element should be centered by applying the class text-center');" + "text": "你的 h2 元素应该居中且有一个 class 为 text-center", + "testString": "assert($(\"h2\").hasClass(\"text-center\"), '你的 h2 元素应该居中且有一个 class 为 text-center');" }, { - "text": "Your h2 element should still have the class red-text", - "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should still have the class red-text');" + "text": "你的 h2 元素应该还有一个 class 为 red-text", + "testString": "assert($(\"h2\").hasClass(\"red-text\"), '你的 h2 元素应该还有一个 class 为 red-text');" } ], "challengeType": 0, @@ -293,21 +293,21 @@ "id": "bad87fee1348cd8acdf08812", "title": "Create a Bootstrap Button", "description": [ - "Bootstrap has its own styles for button elements, which look much better than the plain HTML ones.", - "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\"." + "Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。", + "在大的小猫图片下方创建新的 button 元素。 给它添加 btn 与 btn-default 两个 class 和 \"Like\" 文本内容。" ], "tests": [ { - "text": "Create a new button element with the text \"Like\".", - "testString": "assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()) && ($(\"img.img-responsive + button.btn\").length > 0), 'Create a new button element with the text \"Like\".');" + "text": "创建新的 button 元素，其文本内容为 \"Like\"。", + "testString": "assert(new RegExp(\"like\",\"gi\").test($(\"button\").text()) && ($(\"img.img-responsive + button.btn\").length > 0), '创建新的 button 元素，其文本内容为 \"Like\"。');" }, { - "text": "Your new button should have two classes: btn and btn-default.", - "testString": "assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), 'Your new button should have two classes: btn and btn-default.');" + "text": "新的按钮元素应该有两个 class : btn 和 btn-default。", + "testString": "assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), '新的按钮元素应该有两个 class : btn 和 btn-default。');" }, { - "text": "Make sure all your button elements have a closing tag.", - "testString": "assert(code.match(/<\\/button>/g) && code.match(/", - "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>", - "This button would take up 100% of the available width.", + "这个按钮会 100% 占满所有的可用宽度。", "", - "Note that these buttons still need the btn class.", - "Add Bootstrap's btn-block class to your Bootstrap button." + "记住这些按钮仍然需要 btn 这个 class。", + "添加 Bootstrap 的 btn-block 类到你 Bootstrap 按钮上吧。" ], "tests": [ { - "text": "Your button should still have the btn and btn-default classes.", - "testString": "assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), 'Your button should still have the btn and btn-default classes.');" + "text": "你的按钮应该仍然拥有 btn 和 btn-default 两个类。", + "testString": "assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), '你的按钮应该仍然拥有 btn 和 btn-default 两个类。');" }, { - "text": "Your button should have the class btn-block.", - "testString": "assert($(\"button\").hasClass(\"btn-block\"), 'Your button should have the class btn-block.');" + "text": "你的按钮应该拥有 class btn-block。", + "testString": "assert($(\"button\").hasClass(\"btn-block\"), '你的按钮应该拥有 class btn-block。');" }, { - "text": "Make sure all your button elements have a closing tag.", - "testString": "assert(code.match(/<\\/button>/g) && code.match(/", "", - "That illustrates the difference between an \"inline\" element and a \"block\" element.", - "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.", - "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.", - "Here's how you would do this with the \"Top 3 things cats hate\" element:", + "上面的例子就是 \"inline\" （行内）元素和 \"block\" （块级）元素的区别。", + "通过使用行内（inline）元素 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>" ], "tests": [ { - "text": "Your span element should be inside your p element.", - "testString": "assert($(\"p span\") && $(\"p span\").length > 0, 'Your span element should be inside your p element.');" + "text": "你的 span 元素应该在 p 元素内。", + "testString": "assert($(\"p span\") && $(\"p span\").length > 0, '你的 span 元素应该在 p 元素内。');" }, { - "text": "Your span element should have just the text love.", - "testString": "assert($(\"p span\") && $(\"p span\").text().match(/love/i) && !$(\"p span\").text().match(/Things cats/i), 'Your span element should have just the text love.');" + "text": "你的 span 元素应该只含有文本 love。", + "testString": "assert($(\"p span\") && $(\"p span\").text().match(/love/i) && !$(\"p span\").text().match(/Things cats/i), '你的 span 元素应该只含有文本 love。');" }, { - "text": "Your span element should have class text-danger.", - "testString": "assert($(\"span\").hasClass(\"text-danger\"), 'Your span element should have class text-danger.');" + "text": "你的 span 元素应该含有 class text-danger。", + "testString": "assert($(\"span\").hasClass(\"text-danger\"), '你的 span 元素应该含有 class text-danger。');" }, { - "text": "Make sure your span element has a closing tag.", - "testString": "assert(code.match(/<\\/span>/g) && code.match(//g).length === code.match(/span element has a closing tag.');" + "text": "确保你的 span 元素有一个闭合标签。", + "testString": "assert(code.match(/<\\/span>/g) && code.match(//g).length === code.match(/span 元素有一个闭合标签。');" } ], "challengeType": 0, @@ -1087,27 +1087,27 @@ "id": "bad87fee1348bd9aede08845", "title": "Create a Custom Heading", "description": [ - "We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.", - "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.", - "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.", - "Notice how the image is now just the right size to fit along the text?" + "让我们来为 Cat Photo App 做一个导航吧，把标题和惬意的猫咪图片放在同一行。", + "记住，Bootstrap 使用了响应式栅格系统，这使得我们可以很方便的放置元素并为元素指定相对的宽度。大部分 Bootstrap 的 class 都能用在 div 元素上。", + "把我们的第一张图片和 h2 元素用一个简单的 <div class=\"row\"> 元素包裹起来。再用 <div class=\"col-xs-8\"> 包裹我们的 h2 元素，用 <div class=\"col-xs-4\"> 包裹我们的图片，这样它们就能位于同一行了。", + "注意现在图片是否与文字大小一致呢？" ], "tests": [ { - "text": "Your h2 element and topmost img element should both be nested together within a div element with the class row.", - "testString": "assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'Your h2 element and topmost img element should both be nested together within a div element with the class row.');" + "text": "你的 h2 元素和最上方的 img 元素应该一起内嵌于具有 row class 的 div 元素内。", + "testString": "assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, '你的 h2 元素和第一张 img 元素应该一起内嵌于具有 row class 的 div 元素内。');" }, { - "text": "Nest your topmost img element within a div with the class col-xs-4.", - "testString": "assert($(\"div.col-xs-4:has(img)\").length > 0 && $(\"div.col-xs-4:has(div)\").length === 0, 'Nest your topmost img element within a div with the class col-xs-4.');" + "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, '你最上方的 img 元素应该内嵌于含有 col-xs-4 class 的 div 元素中。');" }, { - "text": "Nest your h2 element within a div with the class col-xs-8.", - "testString": "assert($(\"div.col-xs-8:has(h2)\").length > 0 && $(\"div.col-xs-8:has(div)\").length === 0, 'Nest your h2 element within a div with the class col-xs-8.');" + "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, '你的 h2 元素应该内嵌于含有 col-xs-8 class的 div 元素中。');" }, { - "text": "Make sure each of your div elements has a closing tag.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');" + "text": "确保你的每一个 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1187,31 +1187,31 @@ } ], "description": [ - "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", - "You can include Font Awesome in any app by adding the following code to the top of your HTML:", + "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\">", - "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=\"fa fa-info-circle\"></i>", - "Note that the span element is also acceptable for use with icons.", - "Use Font Awesome to add a thumbs-up icon to your like button by giving it an i element with the classes fa and fa-thumbs-up; make sure to keep the text \"Like\" next to the icon." + "记住 span 元素也一样可以用于指代图标。", + "你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮上，方法时给与 i 元素 fa 和 fa-thumbs-up class；确保你的 \"Like\" 文本在图标旁边。" ], "tests": [ { - "text": "Add an i element with the classes fa and fa-thumbs-up.", - "testString": "assert($(\"i\").is(\".fa.fa-thumbs-up\") || $(\"span\").is(\".fa.fa-thumbs-up\"), 'Add an i element with the classes fa and fa-thumbs-up.');" + "text": "增加一个包含 fa 和 fa-thumbs-up class 的 i 元素。", + "testString": "assert($(\"i\").is(\".fa.fa-thumbs-up\") || $(\"span\").is(\".fa.fa-thumbs-up\"), '增加一个包含 fa 和 fa-thumbs-up class 的 i 元素。');" }, { - "text": "Your fa-thumbs-up icon should be located within the Like button.", - "testString": "assert(($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\")) || ($(\"span.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'Your fa-thumbs-up icon should be located within the Like button.');" + "text": "你的 fa-thumbs-up 图标应该放在 Like 按钮中。", + "testString": "assert(($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\")) || ($(\"span.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), '你的 fa-thumbs-up 图标应该放在 Like 按钮中。');" }, { - "text": "Nest your i element within your button element.", - "testString": "assert($(\"button\").children(\"i\").length > 0 || $(\"button\").children(\"span\").length > 0, 'Nest your i element within your button element.');" + "text": "将 i 元素放置在你的 button 元素中。", + "testString": "assert($(\"button\").children(\"i\").length > 0 || $(\"button\").children(\"span\").length > 0, '将 i 元素放置在你的 button 元素中。');" }, { - "text": "Make sure your icon element has a closing tag.", - "testString": "assert(code.match(/<\\/i>|<\\/span>/g), 'Make sure your icon element has a closing tag.');" + "text": "确保你的图标元素有一个闭合标签。", + "testString": "assert(code.match(/<\\/i>|<\\/span>/g), '确保你的图标元素有一个闭合标签。');" } ], "challengeType": 0, @@ -1294,22 +1294,22 @@ } ], "description": [ - "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", - "Use Font Awesome to add an info-circle icon to your info button and a trash icon to your delete button.", - "Note: The span element is an acceptable alternative to the i element for the directions below." + "Font Awesome 是一个便利的图标库。这些图标都是被保存在 .svg 的文件格式中的矢量图。这些图标就和字体一样，你能通过像素单位指定他们的大小，它们将会继承父级 HTML 元素的字体大小。", + "使用 Font Awesome 分别为你的 info 按钮添加 info-circle 图标，为你的 delete 按钮添加 trash 图标。", + "记住：下述要求中的 i 元素可以用 span 元素代替。" ], "tests": [ { - "text": "You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.", - "testString": "assert($(\".btn-info > i\").is(\".fa.fa-info-circle\") || $(\".btn-info > span\").is(\".fa.fa-info-circle\"), 'You should add a <i class=\"fa fa-info-circle\"></i> within your info button element.');" + "text": "你应该添加一个 <i class=\"fa fa-info-circle\"></i> 图标到你的 info 按钮元素中。", + "testString": "assert($(\".btn-info > i\").is(\".fa.fa-info-circle\") || $(\".btn-info > span\").is(\".fa.fa-info-circle\"), '你应该添加一个 <i class=\"fa fa-info-circle\"></i> 到你的 info 按钮元素中。');" }, { - "text": "You should add a <i class=\"fa fa-trash\"></i> within your delete button element.", - "testString": "assert($(\".btn-danger > i\").is(\".fa.fa-trash\") || $(\".btn-danger > span\").is(\".fa.fa-trash\"), 'You should add a <i class=\"fa fa-trash\"></i> within your delete button element.');" + "text": "你应该添加一个 <i class=\"fa fa-trash\"></i> 图标到你的 delete 按钮元素中。", + "testString": "assert($(\".btn-danger > i\").is(\".fa.fa-trash\") || $(\".btn-danger > span\").is(\".fa.fa-trash\"), '你应该添加一个 <i class=\"fa fa-trash\"></i> 图标到你的 delete 按钮元素中。');" }, { - "text": "Make sure each of your i elements has a closing tag and <i class=\"fa fa-thumbs-up\"></i> is in your like button element.", - "testString": "assert(code.match(/<\\/i>|<\\/span/g) && code.match(/<\\/i|<\\/span>/g).length > 2 && ($(\".btn-primary > i\").is(\".fa.fa-thumbs-up\") || $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'Make sure each of your i elements has a closing tag and <i class=\"fa fa-thumbs-up\"></i> is in your like button element.');" + "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(\".fa.fa-thumbs-up\") || $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), '确保你的每一个 i 元素都有一个闭合标签并且 <i class=\"fa fa-thumbs-up\"></i> 在你的 like 按钮元素中。');" } ], "challengeType": 0, @@ -1392,22 +1392,22 @@ } ], "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.", - "Nest both your radio buttons within a <div class=\"row\"> element. Then nest each of them within a <div class=\"col-xs-6\"> element.", - "Note: As a reminder, radio buttons are input elements of type radio." + "你还可以将 Bootstrap 的 col-xs-* class 用在 form 元素上！这样我们就可以在不关心屏幕大小的情况下，将我们的单选按钮均匀的放在页面上。", + "将你的所有单选按钮放入 <div class=\"row\"> 元素。再用 <div class=\"col-xs-6\"> 元素包裹每一个单选按钮。", + "记住： 提醒一句，单选按钮是 type 为 radio 的 input 元素。" ], "tests": [ { - "text": "Nest all of your radio buttons inside one div with the class row.", - "testString": "assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'Nest all of your radio buttons inside one div with the class row.');" + "text": "把你所有的单选按钮放置于具有 row class 的 div 元素中。", + "testString": "assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, '把你所有的单选按钮放置于具有 row class 的 div 元素中。');" }, { - "text": "Nest each of your radio buttons inside its own div with the class col-xs-6.", - "testString": "assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'Nest each of your radio buttons inside its own div with the class col-xs-6.');" + "text": "你的每一个单选按钮应该嵌套于自己的 div 元素中，每个 div 元素都具有 col-xs-6 class。", + "testString": "assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, '你的每一个单选按钮应该嵌套于自己的 div 元素中，每个 div 元素都具有 col-xs-6 class。');" }, { - "text": "Make sure each of your div elements has a closing tag.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');" + "text": "确保你所有 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1490,21 +1490,21 @@ } ], "description": [ - "You can use Bootstrap's col-xs-* classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.", - "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." + "你还可以将 Bootstrap 的 col-xs-* 用在 form 元素上!这样我们就可以在不关心屏幕大小的情况下，将我们的复选框均匀的放在页面上了。", + "将你的所有复选框都放置于一个 <div class=\"row\"> 元素中。然后分别把每个复选框都放置于一个 <div class=\"col-xs-4\"> 元素中。" ], "tests": [ { - "text": "Nest all of your checkboxes inside one div with the class row.", - "testString": "assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'Nest all of your checkboxes inside one div with the class row.');" + "text": "将你所有的复选框嵌入一个含有 row class 的 div 元素中。", + "testString": "assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, '将你所有的复选框嵌入一个含有 row class 的 div 元素中。');" }, { - "text": "Nest each of your checkboxes inside its own div with the class col-xs-4.", - "testString": "assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'Nest each of your checkboxes inside its own div with the class col-xs-4.');" + "text": "你的每一个复选框应该嵌套于自己的 div 元素中，每个 div 元素都具有 col-xs-4 class。", + "testString": "assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, '你的每一个复选框应该嵌套于自己的 div 元素中，每个 div 元素都具有 col-xs-4 class。');" }, { - "text": "Make sure each of your div elements has a closing tag.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');" + "text": "确保你所有 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1594,26 +1594,27 @@ } ], "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.", - "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.", + "你可以在你的 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 图标。", "All textual <input>, <textarea>, and <select> elements with the class .form-control have a width of 100%." + "所有文本输入类的元素如 <input>，<textarea> 和 <select> 只要添加上 .form-control class 就会占满100%的宽度。" ], "tests": [ { - "text": "Give the submit button in your form the classes btn btn-primary.", - "testString": "assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), 'Give the submit button in your form the classes btn btn-primary.');" + "text": "给你的 submit 按钮添加 btn btn-primary class。", + "testString": "assert($(\"button[type=\\\"submit\\\"]\").hasClass(\"btn btn-primary\"), '给你的 submit 按钮添加 btn btn-primary class。');" }, { - "text": "Add a <i class=\"fa fa-paper-plane\"></i> within your submit button element.", - "testString": "assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, 'Add a <i class=\"fa fa-paper-plane\"></i> within your submit button element.');" + "text": "在你的 submit button 元素嵌入 <i class=\"fa fa-paper-plane\"></i>。", + "testString": "assert($(\"button[type=\\\"submit\\\"]:has(i.fa.fa-paper-plane)\").length > 0, '在你的 submit button 元素嵌入 <i class=\"fa fa-paper-plane\"></i>。');" }, { - "text": "Give the text input in your form the class form-control.", - "testString": "assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), 'Give the text input in your form the class form-control.');" + "text": "给表单中的 text input 元素添加 form-control class。", + "testString": "assert($(\"input[type=\\\"text\\\"]\").hasClass(\"form-control\"), '给表单中的 text input 元素添加 form-control class。');" }, { - "text": "Make sure each of your i elements has a closing tag.", - "testString": "assert(code.match(/<\\/i>/g) && code.match(/<\\/i/g).length > 3, 'Make sure each of your i elements has a closing tag.');" + "text": "确保每一个 i 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/i>/g) && code.match(/<\\/i/g).length > 3, '确保每一个 i 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1711,26 +1712,26 @@ } ], "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.", - "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.", - "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!" + "现在让我们把你表单里的 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，和响应式设计！" ], "tests": [ { - "text": "Nest your form submission button and text input in a div with class row.", - "testString": "assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button and text input in a div with class row.');" + "text": "确保你的提交按钮和文本输入框都在同一个具有 row class 的 div 元素中。", + "testString": "assert($(\"div.row:has(input[type=\\\"text\\\"])\").length > 0 && $(\"div.row:has(button[type=\\\"submit\\\"])\").length > 0, '确保你的提交按钮和文本输入框都在同一个具有 row class 的 div 元素中。');" }, { - "text": "Nest your form text input in a div with the class col-xs-7.", - "testString": "assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, 'Nest your form text input in a div with the class col-xs-7.');" + "text": "表单的文本输入框应该嵌入到一个具有 col-xs-7 class 的 div 内。", + "testString": "assert($(\"div.col-xs-7:has(input[type=\\\"text\\\"])\").length > 0, '表单的文本输入框应该嵌入到一个具有 col-xs-7 class 的 div 内。');" }, { - "text": "Nest your form submission button in a div with the class col-xs-5.", - "testString": "assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, 'Nest your form submission button in a div with the class col-xs-5.');" + "text": "表单的提交按钮应该嵌入到一个具有 col-xs-5 class 的 div 内。", + "testString": "assert($(\"div.col-xs-5:has(button[type=\\\"submit\\\"])\").length > 0, '表单的提交按钮应该嵌入到一个具有 col-xs-5 class 的 div 内。');" }, { - "text": "Make sure each of your div elements has a closing tag.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');" + "text": "确保每一个 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1822,31 +1823,31 @@ "id": "bad87fee1348bd9aec908846", "title": "Create a Bootstrap Headline", "description": [ - "Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills.", - "We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges.", - "To start with, create an h3 element, with the text jQuery Playground.", - "Color your h3 element with the text-primary Bootstrap class, and center it with the text-center Bootstrap class." + "现在，让我们重新开始练习我们的 HTML，CSS 和 Bootstrap 技术。", + "我们将会搭建一个 jQuery playground，以便在后续的 jQuery 课程中使用它。", + "首先，创建一个包含 jQuery Playground 文本内容的 h3 元素。", + "通过给你的 h3 元素添加 Bootstrap 的 text-primary class 来为其上色，然后添加 Bootstrap 的 text-center class 使其文本居中显示。" ], "tests": [ { - "text": "Add a h3 element to your page.", - "testString": "assert($(\"h3\") && $(\"h3\").length > 0, 'Add a h3 element to your page.');" + "text": "为你的页面添加一个 h3 元素。", + "testString": "assert($(\"h3\") && $(\"h3\").length > 0, '为你的页面添加一个 h3 元素。');" }, { - "text": "Make sure your h3 element has a closing tag.", - "testString": "assert(code.match(/<\\/h3>/g) && code.match(/

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

h3 element has a closing tag.');" + "text": "确保你的 h3 元素有一个闭合标签。", + "testString": "assert(code.match(/<\\/h3>/g) && code.match(/

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

h3 元素有一个闭合标签。');" }, { - "text": "Your h3 element should be colored by applying the class text-primary", - "testString": "assert($(\"h3\").hasClass(\"text-primary\"), 'Your h3 element should be colored by applying the class text-primary');" + "text": "为了确保被上色，你的 h3 元素应该具有 text-primary class。", + "testString": "assert($(\"h3\").hasClass(\"text-primary\"), '为了确保被上色，你的 h3 元素应该具有 text-primary class。');" }, { - "text": "Your h3 element should be centered by applying the class text-center", - "testString": "assert($(\"h3\").hasClass(\"text-center\"), 'Your h3 element should be centered by applying the class text-center');" + "text": "为了确保文本居中显示，你的 h3 元素应该具有 text-center class。", + "testString": "assert($(\"h3\").hasClass(\"text-center\"), '为了确保文本居中显示，你的 h3 元素应该具有 text-center class。');" }, { - "text": "Your h3 element should have the text jQuery Playground.", - "testString": "assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), 'Your h3 element should have the text jQuery Playground.');" + "text": "你的 h3 元素需要有文本 jQuery Playground。", + "testString": "assert.isTrue((/jquery(\\s)+playground/gi).test($(\"h3\").text()), '你的 h3 元素需要有文本 jQuery Playground。');" } ], "challengeType": 0, @@ -1865,21 +1866,21 @@ "id": "bad87fee1348bd9aec908746", "title": "House our page within a Bootstrap container-fluid div", "description": [ - "Now let's make sure all the content on your page is mobile-responsive.", - "Let's nest your h3 element within a div element with the class container-fluid." + "现在让我们确保页面所有内容应该都是响应式的。", + "将我们的 h3 元素内嵌进一个具有 container-fluid class 的div 元素中。" ], "tests": [ { - "text": "Your div element should have the class container-fluid.", - "testString": "assert($(\"div\").hasClass(\"container-fluid\"), 'Your div element should have the class container-fluid.');" + "text": "你的 div 元素应该具有 container-fluid class。", + "testString": "assert($(\"div\").hasClass(\"container-fluid\"), '你的 div 元素应该具有 container-fluid class。');" }, { - "text": "Make sure each of your div elements has a closing tag.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements has a closing tag.');" + "text": "确保每一个 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" }, { - "text": "Nest your h3 element inside a div element.", - "testString": "assert($(\"div\").children(\"h3\").length >0, 'Nest your h3 element inside a div element.');" + "text": "你的 h3 元素应该内嵌于 div 元素。", + "testString": "assert($(\"div\").children(\"h3\").length >0, '你的 h3 元素应该内嵌于 div 元素。');" } ], "challengeType": 0, @@ -1902,25 +1903,25 @@ "id": "bad87fee1348bd9bec908846", "title": "Create a Bootstrap Row", "description": [ - "Now we'll create a Bootstrap row for our inline elements.", - "Create a div element below the h3 tag, with a class of row." + "这次我们会为我们的内联元素创建一个 Bootstrap 栅格系统的行（row）。", + "在我们的 h3 标签下方创建一个含有 row class 的 div 元素。" ], "tests": [ { - "text": "Add a div element below your h3 element.", - "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), 'Add a div element below your h3 element.');" + "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), '在你的 h3 元素下增加一个 div 元素。');" }, { - "text": "Your div element should have the class row", - "testString": "assert($(\"div\").hasClass(\"row\"), 'Your div element should have the class row');" + "text": "你的 div 元素应该拥有 row class。", + "testString": "assert($(\"div\").hasClass(\"row\"), '你的 div 元素应该拥有 row class。');" }, { - "text": "Your row div should be nested inside the container-fluid div", - "testString": "assert($(\"div.container-fluid div.row\").length > 0, 'Your row div should be nested inside the container-fluid div');" + "text": "你的 row div应该内嵌于 container-fluid div。", + "testString": "assert($(\"div.container-fluid div.row\").length > 0, '你的 row div应该内嵌于 container-fluid div。');" }, { - "text": "Make sure your div element has a closing tag.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div element has a closing tag.');" + "text": "确保你的 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1945,17 +1946,17 @@ "id": "bad87fee1348bd9aec908847", "title": "Split Your Bootstrap Row", "description": [ - "Now that we have a Bootstrap Row, let's split it into two columns to house our elements.", - "Create two div elements within your row, both with the class col-xs-6." + "既然我们已经有了一个 Bootstrap 行，就让我们把它分成两列来放置我们的元素。", + "在行内创建两个 div 元素，并为它们添加 col-xs-6 class。" ], "tests": [ { - "text": "Nest two div class=\"col-xs-6\" elements within your div class=\"row\" element.", - "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest two div class=\"col-xs-6\" elements within your div class=\"row\" element.');" + "text": "将两个 div class=\"col-xs-6\" 元素内潜入你的 div class=\"row\" 元素中。", + "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, '将两个 div class=\"col-xs-6\" 元素内潜入你的 div class=\"row\" 元素中。');" }, { - "text": "Make sure all your div elements have closing tags.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.');" + "text": "确保你的 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1982,21 +1983,21 @@ "id": "bad87fee1348bd9aec908848", "title": "Create Bootstrap Wells", "description": [ - "Bootstrap has a class called well that can create a visual sense of depth for your columns.", - "Nest one div element with the class well within each of your col-xs-6 div elements." + "Bootstrap 有一个 class 叫做 well，作用是赋予列一种视觉上的深度感（视觉上的效果）。", + "在你的每一个 class 为 col-xs-6 的 div 元素中都嵌入一个带有 well class 的 div 元素。" ], "tests": [ { - "text": "Add a div element with the class well inside each of your div elements with the class \"col-xs-6\"", - "testString": "assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, 'Add a div element with the class well inside each of your div elements with the class \"col-xs-6\"');" + "text": "在每一个 class 为 \"col-xs-6\" 的 div 元素中都嵌入一个 class 为 well 的 div 元素。", + "testString": "assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, '在每一个 class 为 \"col-xs-6\" 的 div 元素中都嵌入一个 class 为 well 的 div 元素。');" }, { - "text": "Nest both of your div elements with the class \"col-xs-6\" within your div element with the class \"row\".", - "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, 'Nest both of your div elements with the class \"col-xs-6\" within your div element with the class \"row\".');" + "text": "将你的两个 class 为 \"col-xs-6\" 的 div 元素都内嵌入 clas 为 \"row\" 的 div 元素中。", + "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, '将你的两个 class 为 \"col-xs-6\" 的 div 元素都内嵌入 clas 为 \"row\" 的 div 元素中。');" }, { - "text": "Make sure all your div elements have closing tags.", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div elements have closing tags.');" + "text": "确保你的 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -2027,21 +2028,21 @@ "id": "bad87fee1348bd9aec908849", "title": "Add Elements within Your Bootstrap Wells", "description": [ - "Now we're several div elements deep on each column of our row. This is as deep as we'll need to go. Now we can add our button elements.", - "Nest three button elements within each of your well div elements." + "现在我们已经在行内的每一列都嵌套了好几层 div 元素。这已经足够了，现在让我们添加 button 元素吧。", + "在每一个 well div 元素下放置三个 button 元素。" ], "tests": [ { - "text": "Nest three button elements within each of your div elements with class well.", - "testString": "assert($(\"div.well:eq(0)\").children(\"button\").length === 3 && $(\"div.well:eq(1)\").children(\"button\").length === 3, 'Nest three button elements within each of your div elements with class well.');" + "text": "在每一个 well class 的 div 元素内分别放置三个 button 元素。", + "testString": "assert($(\"div.well:eq(0)\").children(\"button\").length === 3 && $(\"div.well:eq(1)\").children(\"button\").length === 3, '在每一个 well class 的 div 元素内分别放置三个 button 元素。');" }, { - "text": "You should have a total of 6 button elements.", - "testString": "assert($(\"button\") && $(\"button\").length > 5, 'You should have a total of 6 button elements.');" + "text": "你应该总共有 6 个 button 元素。", + "testString": "assert($(\"button\") && $(\"button\").length > 5, '你应该总共有 6 个 button 元素。');" }, { - "text": "Make sure all your button elements have closing tags.", - "testString": "assert(code.match(/<\\/button>/g) && code.match(/", - "通过为按钮添加 class btn-block 使其称为块级元素，你的按钮会伸展并填满页面整个水平空间并让后续的元素流到这个块下方的 \"新的一行\" 。", + "通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面整个水平空间，后续的元素会流到这个块级元素的下方，即 \"新开一行\"。", "<button class=\"btn btn-default btn-block\">Submit</button>", "这个按钮会 100% 占满所有的可用宽度。", "", "记住这些按钮仍然需要 btn 这个 class。", - "添加 Bootstrap 的 btn-block 类到你 Bootstrap 按钮上吧。" + "添加 Bootstrap 的 btn-block class 到你 Bootstrap 按钮上吧。" ], "tests": [ { - "text": "你的按钮应该仍然拥有 btn 和 btn-default 两个类。", - "testString": "assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), '你的按钮应该仍然拥有 btn 和 btn-default 两个类。');" + "text": "按钮的 class 属性应该仍然具有 btn 和 btn-default。", + "testString": "assert($(\"button\").hasClass(\"btn\") && $(\"button\").hasClass(\"btn-default\"), '按钮的 class 属性应该仍然具有 btn 和 btn-default。');" }, { - "text": "你的按钮应该拥有 class btn-block。", - "testString": "assert($(\"button\").hasClass(\"btn-block\"), '你的按钮应该拥有 class btn-block。');" + "text": "按钮的 class 属性应该包含 btn-block。", + "testString": "assert($(\"button\").hasClass(\"btn-block\"), '按钮的 class 属性应该包含 btn-block。');" }, { - "text": "确保你所有的 button 元素都有一个闭合标签。", - "testString": "assert(code.match(/<\\/button>/g) && code.match(/", "", "上面的例子就是 \"inline\" （行内）元素和 \"block\" （块级）元素的区别。", - "通过使用行内（inline）元素 span，你可以把不同的元素放在同一行，甚至能为一个的元素不同部分指定样式。", + "通过使用行内元素 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>" ], "tests": [ { - "text": "你的 span 元素应该在 p 元素内。", - "testString": "assert($(\"p span\") && $(\"p span\").length > 0, '你的 span 元素应该在 p 元素内。');" + "text": "span 元素应该在 p 元素内。", + "testString": "assert($(\"p span\") && $(\"p span\").length > 0, 'span 元素应该在 p 元素内。');" }, { - "text": "你的 span 元素应该只含有文本 love。", - "testString": "assert($(\"p span\") && $(\"p span\").text().match(/love/i) && !$(\"p span\").text().match(/Things cats/i), '你的 span 元素应该只含有文本 love。');" + "text": "span 元素应该只含有文本 love。", + "testString": "assert($(\"p span\") && $(\"p span\").text().match(/love/i) && !$(\"p span\").text().match(/Things cats/i), 'span 元素应该只含有文本 love。');" }, { - "text": "你的 span 元素应该含有 class text-danger。", - "testString": "assert($(\"span\").hasClass(\"text-danger\"), '你的 span 元素应该含有 class text-danger。');" + "text": "span 元素应该含有 class text-danger。", + "testString": "assert($(\"span\").hasClass(\"text-danger\"), 'span 元素应该含有 class text-danger。');" }, { "text": "确保你的 span 元素有一个闭合标签。", @@ -1088,26 +1088,26 @@ "title": "Create a Custom Heading", "description": [ "让我们来为 Cat Photo App 做一个导航吧，把标题和惬意的猫咪图片放在同一行。", - "记住，Bootstrap 使用了响应式栅格系统，这使得我们可以很方便的放置元素并为元素指定相对的宽度。大部分 Bootstrap 的 class 都能用在 div 元素上。", + "记住，由于 Bootstrap 使用了响应式栅格系统，使得我们可以很方便的放置元素并为元素指定相对的宽度。大部分的 Bootstrap 的 class 都能用在 div 元素上。", "把我们的第一张图片和 h2 元素用一个简单的 <div class=\"row\"> 元素包裹起来。再用 <div class=\"col-xs-8\"> 包裹我们的 h2 元素，用 <div class=\"col-xs-4\"> 包裹我们的图片，这样它们就能位于同一行了。", "注意现在图片是否与文字大小一致呢？" ], "tests": [ { - "text": "你的 h2 元素和最上方的 img 元素应该一起内嵌于具有 row class 的 div 元素内。", - "testString": "assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, '你的 h2 元素和第一张 img 元素应该一起内嵌于具有 row class 的 div 元素内。');" + "text": "h2 元素和最上方的 img 元素应该一起内嵌于具有 row class 的 div 元素内。", + "testString": "assert($(\"div.row:has(h2)\").length > 0 && $(\"div.row:has(img)\").length > 0, 'h2 元素和第一张 img 元素应该一起内嵌于具有 row class 的 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, '你最上方的 img 元素应该内嵌于含有 col-xs-4 class 的 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, '最上方的 img 元素应该内嵌于含有 col-xs-4 class 的 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, '你的 h2 元素应该内嵌于含有 col-xs-8 class的 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, 'h2 元素应该内嵌于含有 col-xs-8 class的 div 元素中。');" }, { - "text": "确保你的每一个 div 元素都有一个闭合标签。", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" + "text": "确保每一个 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1187,23 +1187,23 @@ } ], "description": [ - "Font Awesome 是一个便利的图标库。这些图标都是被保存在 .svg 的文件格式中的矢量图。这些图标就和字体一样，你能通过像素单位指定他们的大小，它们将会继承父级 HTML 元素的字体大小。", + "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=\"fa fa-info-circle\"></i>", "记住 span 元素也一样可以用于指代图标。", - "你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮上，方法时给与 i 元素 fa 和 fa-thumbs-up class；确保你的 \"Like\" 文本在图标旁边。" + "你可以通过 Font Awesome 库增加一个 thumbs-up 图标到你的 like 按钮上，具体方法是给 i 元素添加 class 属性 fa 和 fa-thumbs-up；确保你的 \"Like\" 文本在图标旁边。" ], "tests": [ { - "text": "增加一个包含 fa 和 fa-thumbs-up class 的 i 元素。", + "text": "增加一个 class 为 fa 和 fa-thumbs-up 的 i 元素。", "testString": "assert($(\"i\").is(\".fa.fa-thumbs-up\") || $(\"span\").is(\".fa.fa-thumbs-up\"), '增加一个包含 fa 和 fa-thumbs-up class 的 i 元素。');" }, { - "text": "你的 fa-thumbs-up 图标应该放在 Like 按钮中。", - "testString": "assert(($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\")) || ($(\"span.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), '你的 fa-thumbs-up 图标应该放在 Like 按钮中。');" + "text": "fa-thumbs-up 图标应该放在 Like 按钮中。", + "testString": "assert(($(\"i.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > i\").is(\".fa.fa-thumbs-up\")) || ($(\"span.fa-thumbs-up\").parent().text().match(/Like/gi) && $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), 'fa-thumbs-up 图标应该放在 Like 按钮中。');" }, { "text": "将 i 元素放置在你的 button 元素中。", @@ -1294,22 +1294,22 @@ } ], "description": [ - "Font Awesome 是一个便利的图标库。这些图标都是被保存在 .svg 的文件格式中的矢量图。这些图标就和字体一样，你能通过像素单位指定他们的大小，它们将会继承父级 HTML 元素的字体大小。", + "Font Awesome 是一个非常便利的图标库。这些图标都是被保存在 .svg 的文件格式中的矢量图。这些图标就和字体一样，不仅能通过像素单位指定他们的大小，它们也同样会继承父级 HTML 元素的字体大小。", "使用 Font Awesome 分别为你的 info 按钮添加 info-circle 图标，为你的 delete 按钮添加 trash 图标。", "记住：下述要求中的 i 元素可以用 span 元素代替。" ], "tests": [ { - "text": "你应该添加一个 <i class=\"fa fa-info-circle\"></i> 图标到你的 info 按钮元素中。", - "testString": "assert($(\".btn-info > i\").is(\".fa.fa-info-circle\") || $(\".btn-info > span\").is(\".fa.fa-info-circle\"), '你应该添加一个 <i class=\"fa fa-info-circle\"></i> 到你的 info 按钮元素中。');" + "text": "添加一个 <i class=\"fa fa-info-circle\"></i> 图标到你的 info 按钮元素中。", + "testString": "assert($(\".btn-info > i\").is(\".fa.fa-info-circle\") || $(\".btn-info > span\").is(\".fa.fa-info-circle\"), '添加一个 <i class=\"fa fa-info-circle\"></i> 到你的 info 按钮元素中。');" }, { - "text": "你应该添加一个 <i class=\"fa fa-trash\"></i> 图标到你的 delete 按钮元素中。", - "testString": "assert($(\".btn-danger > i\").is(\".fa.fa-trash\") || $(\".btn-danger > span\").is(\".fa.fa-trash\"), '你应该添加一个 <i class=\"fa fa-trash\"></i> 图标到你的 delete 按钮元素中。');" + "text": "添加一个 <i class=\"fa fa-trash\"></i> 图标到你的 delete 按钮元素中。", + "testString": "assert($(\".btn-danger > i\").is(\".fa.fa-trash\") || $(\".btn-danger > span\").is(\".fa.fa-trash\"), '添加一个 <i class=\"fa fa-trash\"></i> 图标到你的 delete 按钮元素中。');" }, { - "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(\".fa.fa-thumbs-up\") || $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), '确保你的每一个 i 元素都有一个闭合标签并且 <i class=\"fa fa-thumbs-up\"></i> 在你的 like 按钮元素中。');" + "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(\".fa.fa-thumbs-up\") || $(\".btn-primary > span\").is(\".fa.fa-thumbs-up\")), '确保每一个 i 元素都有一个闭合标签并且 <i class=\"fa fa-thumbs-up\"></i> 在 like 按钮元素中。');" } ], "challengeType": 0, @@ -1596,7 +1596,7 @@ "description": [ "你可以在你的 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 图标。", - "All textual <input>, <textarea>, and <select> elements with the class .form-control have a width of 100%." + "All textual <input>, <textarea>, and <select> elements with the class .form-control have a width of 100%.", "所有文本输入类的元素如 <input>，<textarea> 和 <select> 只要添加上 .form-control class 就会占满100%的宽度。" ], "tests": [ @@ -1823,7 +1823,7 @@ "id": "bad87fee1348bd9aec908846", "title": "Create a Bootstrap Headline", "description": [ - "现在，让我们重新开始练习我们的 HTML，CSS 和 Bootstrap 技术。", + "现在，让我们运用 HTML，CSS 和 Bootstrap 从零开始做点东西。", "我们将会搭建一个 jQuery playground，以便在后续的 jQuery 课程中使用它。", "首先，创建一个包含 jQuery Playground 文本内容的 h3 元素。", "通过给你的 h3 元素添加 Bootstrap 的 text-primary class 来为其上色，然后添加 Bootstrap 的 text-center class 使其文本居中显示。" @@ -1908,20 +1908,20 @@ ], "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), '在你的 h3 元素下增加一个 div 元素。');" }, { - "text": "你的 div 元素应该拥有 row class。", - "testString": "assert($(\"div\").hasClass(\"row\"), '你的 div 元素应该拥有 row class。');" + "text": "div 元素的 class 应为 row。", + "testString": "assert($(\"div\").hasClass(\"row\"), 'div 元素的 class 应为 row。');" }, { - "text": "你的 row div应该内嵌于 container-fluid div。", - "testString": "assert($(\"div.container-fluid div.row\").length > 0, '你的 row div应该内嵌于 container-fluid div。');" + "text": "row div 应该内嵌于 container-fluid div。", + "testString": "assert($(\"div.container-fluid div.row\").length > 0, 'row div应该内嵌于 container-fluid div。');" }, { - "text": "确保你的 div 元素都有一个闭合标签。", - "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" + "text": "确保所有 div 元素都有一个闭合标签。", + "testString": "assert(code.match(/<\\/div>/g) && code.match(/
/g).length === code.match(/
div 元素都有一个闭合标签。');" } ], "challengeType": 0, @@ -1951,8 +1951,8 @@ ], "tests": [ { - "text": "将两个 div class=\"col-xs-6\" 元素内潜入你的 div class=\"row\" 元素中。", - "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, '将两个 div class=\"col-xs-6\" 元素内潜入你的 div class=\"row\" 元素中。');" + "text": "将两个 div class=\"col-xs-6\" 元素内嵌入你的 div class=\"row\" 元素中。", + "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, '将两个 div class=\"col-xs-6\" 元素内嵌入你的 div class=\"row\" 元素中。');" }, { "text": "确保你的 div 元素都有一个闭合标签。", @@ -1984,16 +1984,16 @@ "title": "Create Bootstrap Wells", "description": [ "Bootstrap 有一个 class 叫做 well，作用是赋予列一种视觉上的深度感（视觉上的效果）。", - "在你的每一个 class 为 col-xs-6 的 div 元素中都嵌入一个带有 well class 的 div 元素。" + "在每一个 class 为 col-xs-6 的 div 元素中都嵌入一个带有 well 的 div 元素。" ], "tests": [ { - "text": "在每一个 class 为 \"col-xs-6\" 的 div 元素中都嵌入一个 class 为 well 的 div 元素。", - "testString": "assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, '在每一个 class 为 \"col-xs-6\" 的 div 元素中都嵌入一个 class 为 well 的 div 元素。');" + "text": "在每一个 class 为 \"col-xs-6\" 的 div 元素中都嵌入一个带有 well 的 div 元素。", + "testString": "assert($(\"div.col-xs-6\").not(\":has(>div.well)\").length < 1, '在每一个 class 为 \"col-xs-6\" 的 div 元素中都嵌入带有 well 的 div 元素。');" }, { - "text": "将你的两个 class 为 \"col-xs-6\" 的 div 元素都内嵌入 clas 为 \"row\" 的 div 元素中。", - "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, '将你的两个 class 为 \"col-xs-6\" 的 div 元素都内嵌入 clas 为 \"row\" 的 div 元素中。');" + "text": "将你的两个 class 为 \"col-xs-6\" 的 div 元素都内嵌入一个带有 \"row\" 的 div 元素中。", + "testString": "assert($(\"div.row > div.col-xs-6\").length > 1, '将你的两个 class 为 \"col-xs-6\" 的 div 元素都内嵌入一个带有 \"row\" 的 div 元素中。');" }, { "text": "确保你的 div 元素都有一个闭合标签。", @@ -2028,7 +2028,7 @@ "id": "bad87fee1348bd9aec908849", "title": "Add Elements within Your Bootstrap Wells", "description": [ - "现在我们已经在行内的每一列都嵌套了好几层 div 元素。这已经足够了，现在让我们添加 button 元素吧。", + "现在我们已经每一行的每一列都有了 div 元素。这已经足够了，现在让我们添加 button 元素吧。", "在每一个 well div 元素下放置三个 button 元素。" ], "tests": [ @@ -2176,21 +2176,21 @@ "id": "bad87fee1348bd9aec908853", "title": "Add id Attributes to Bootstrap Elements", "description": [ - "回忆一下，除了可以给元素添加 class 属性，我们还可以给元素添加 id 属性。", + "回忆一下，除了可以给元素添加 class 属性，我们还可以给元素设置 id 属性。", "每个指定元素的 id 都是唯一的，并且在每个页面中都只能使用一次。", - "让我们为每个具有 well class 的 div 元素添加一个唯一的 id。", - "记住，你可以这样赋予 id 给一个元素。", + "让我们为每个 class 为 well 的 div 元素添加一个唯一的 id。", + "记住，你可以这样给一个元素设置 ID。", "<div class=\"well\" id=\"center-well\">", - "给左边的 well 赋予 id left-well。右边的 well 赋予 id right-well。" + "把左边 well 的 ID 设置为 left-well。右边的 well 的 ID 设置为 right-well。" ], "tests": [ { - "text": "给你左边的 well 赋予 left-well id。", - "testString": "assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, '给你左边的 well 赋予 left-well id。');" + "text": "把左边的 well 的 ID 设置为 left-well。", + "testString": "assert($(\".col-xs-6\").children(\"#left-well\") && $(\".col-xs-6\").children(\"#left-well\").length > 0, '把左边的 well 的 ID 设置为 left-well。');" }, { - "text": "给你右边的 well 赋予 right-well id。", - "testString": "assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, '给你右边的 well 赋予 right-well id。');" + "text": "把右边的 well 的 ID 设置为 right-well。", + "testString": "assert($(\".col-xs-6\").children(\"#right-well\") && $(\".col-xs-6\").children(\"#right-well\").length > 0, '把右边的 well 的 ID 设置为 right-well。');" } ], "challengeType": 0, @@ -2362,28 +2362,28 @@ ], "tests": [ { - "text": "为你的 id 为 target1 的 button 元素输入文本 #target1。", - "testString": "assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), '为你的 id 为 target1 的 button 元素输入文本 #target1。');" + "text": "给 id 为 target1 的 button 元素设置文本 #target1。", + "testString": "assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), '给 id 为 target1 的 button 元素设置文本 #target1。');" }, { - "text": "为你的 id 为 target2 的 button 元素输入文本 #target2。", - "testString": "assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), '为你的 id 为 target2 的 button 元素输入文本 #target2。');" + "text": "给 id 为 target2 的 button 元素设置文本 #target2。", + "testString": "assert(new RegExp(\"#target2\",\"gi\").test($(\"#target2\").text()), '给 id 为 target2 的 button 元素设置文本 #target2。');" }, { - "text": "为你的 id 为 target3 的 button 元素输入文本 #target3。", - "testString": "assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), '为你的 id 为 target3 的 button 元素输入文本 #target3。');" + "text": "给 id 为 target3 的 button 元素设置文本 #target3。", + "testString": "assert(new RegExp(\"#target3\",\"gi\").test($(\"#target3\").text()), '给 id 为 target3 的 button 元素设置文本 #target3。');" }, { - "text": "为你的 id 为 target4 的 button 元素输入文本 #target4。", - "testString": "assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), '为你的 id 为 target4 的 button 元素输入文本 #target4。');" + "text": "给 id 为 target4 的 button 元素设置文本 #target4。", + "testString": "assert(new RegExp(\"#target4\",\"gi\").test($(\"#target4\").text()), '给 id 为 target4 的 button 元素设置文本 #target4。');" }, { - "text": "为你的 id 为 target5 的 button 元素输入文本 #target5。", - "testString": "assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), '为你的 id 为 target5 的 button 元素输入文本 #target5。');" + "text": "给 id 为 target5 的 button 元素设置文本 #target5。", + "testString": "assert(new RegExp(\"#target5\",\"gi\").test($(\"#target5\").text()), '给 id 为 target5 的 button 元素设置文本 #target5。');" }, { - "text": "为你的 id 为 target6 的 button 元素输入文本 #target6。", - "testString": "assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), '为你的 id 为 target6 的 button 元素输入文本 #target6。');" + "text": "给 id 为 target6 的 button 元素设置文本 #target6。", + "testString": "assert(new RegExp(\"#target6\",\"gi\").test($(\"#target6\").text()), '给 id 为 target6 的 button 元素设置文本 #target6。');" } ], "challengeType": 0, @@ -2431,16 +2431,16 @@ ], "tests": [ { - "text": "在增加注释前，在你的 HTML 顶部增加此代码 <!--。", - "testString": "assert(code.match(/^\\s*.*this line))\\s*.*this line.*\\s*-->/gi), '你的注释内容应该为 Only change code above this line。');" }, { - "text": "确保你的注释有通过 --> 正确的闭合。", - "testString": "assert(code.match(/-->.*\\n+.+/g), '确保你的注释有通过 --> 正确的闭合。');" + "text": "注释应该用 --> 进行闭合。", + "testString": "assert(code.match(/-->.*\\n+.+/g), '注释应该用 --> 进行闭合。');" }, { "text": "注意，注释的开始标签和闭合标签数量应该一一对应，保持数量一致。", diff --git a/03-front-end-libraries/bootstrap.md b/03-front-end-libraries/bootstrap.md index 4ecceaa..1110703 100644 --- a/03-front-end-libraries/bootstrap.md +++ b/03-front-end-libraries/bootstrap.md @@ -6,6 +6,6 @@ Bootstrap 是一个用于设计响应式网页和网络应用的前端框架。 * 图片 * 表格 * 表单 -* 导航栏 +* 导航 -这个章节介绍了在网页项目中使用 Bootstrap 的一些方式。 +这个章节介绍了如何使用 Bootstrap 来设计响应式界面。