fix(i18n): update Chinese translation of bootstrap (#38560)
Co-authored-by: Zhicheng Chen <chenzhicheng@dayuwuxian.com>
This commit is contained in:
ZhichengChen
GitHub
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9aec908849
|
id: bad87fee1348bd9aec908849
|
||||||
title: Add Elements within Your Bootstrap Wells
|
title: Add Elements within Your Bootstrap Wells
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16636
|
||||||
localeTitle: 在Bootstrap Wells中添加元素
|
localeTitle: 在 Bootstrap Wells 中添加元素
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">现在，我们行的每一列都有几个<code>div</code>元素。这是我们需要去的深度。现在我们可以添加我们的<code>button</code>元素。在每个<code>well</code> <code>div</code>元素中嵌套三个<code>button</code>元素。 </section>
|
<section id='description'>
|
||||||
|
现在我们的每一行的每一列都已经有了 <code>div</code> 元素。这已经足够了，现在让我们添加 <code>button</code> 元素吧。
|
||||||
|
在每一个 <code>well</code> <code>div</code> 元素下放置三个 <code>button</code> 元素。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,11 +22,11 @@ localeTitle: 在Bootstrap Wells中添加元素
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 在每个<code>div</code>元素中嵌入三个<code>button</code>元素，并且类<code>well</code> 。
|
- text: 在每一个 class 属性为 <code>well</code> 的 <code>div</code> 元素内分别放置三个 <code>button</code> 元素。
|
||||||
testString: assert($("div.well:eq(0)").children("button").length === 3 && $("div.well:eq(1)").children("button").length === 3);
|
testString: assert($("div.well:eq(0)").children("button").length === 3 && $("div.well:eq(1)").children("button").length === 3);
|
||||||
- text: 你应该总共有6个<code>button</code>元素。
|
- text: 总共有 6 个 <code>button</code> 元素。
|
||||||
testString: assert($("button") && $("button").length > 5);
|
testString: assert($("button") && $("button").length > 5);
|
||||||
- text: 确保所有<code>button</code>元素都有结束标记。
|
- text: 确保 <code>button</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -54,7 +58,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -66,8 +69,26 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well">
|
||||||
|
<button></button>
|
||||||
|
<button></button>
|
||||||
|
<button></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well">
|
||||||
|
<button></button>
|
||||||
|
<button></button>
|
||||||
|
<button></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,18 +2,22 @@
|
|||||||
id: bad87fee1348bd9aedc08845
|
id: bad87fee1348bd9aedc08845
|
||||||
title: Add Font Awesome Icons to all of our Buttons
|
title: Add Font Awesome Icons to all of our Buttons
|
||||||
required:
|
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
|
raw: true
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
localeTitle: 将字体图标添加到我们所有的按钮上
|
||||||
localeTitle: 将Font Awesome Icons添加到我们所有的按钮中
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Font Awesome是一个方便的图标库。这些图标是矢量图形，以<code>.svg</code>文件格式存储。这些图标就像字体一样对待。您可以使用像素指定其大小，并且它们将采用其父HTML元素的字体大小。使用Font Awesome将<code>info-circle</code>图标添加到信息按钮，将<code>trash</code>图标添加到删除按钮。注意： <code>span</code>元素是下面方向的<code>i</code>元素的可接受替代方法。 </section>
|
<section id='description'>
|
||||||
|
Font Awesome 是一个非常便利的图标库。这些图标都是被保存在 <code>.svg</code> 的文件格式中的矢量图。这些图标就和字体一样，不仅能通过像素单位指定他们的大小，它们也同样会继承父级 HTML 元素的字体大小。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
使用 Font Awesome 分别为你的 info 按钮添加 <code>info-circle</code> 图标，为你的 delete 按钮添加 <code>trash</code> 图标。
|
||||||
|
|
||||||
|
<strong>记住：</strong>下述要求中的 <code>i</code> 元素可以用 <code>span</code> 元素代替。
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -21,11 +25,11 @@ localeTitle: 将Font Awesome Icons添加到我们所有的按钮中
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 您应该在info按钮元素中添加<code><i class="fa fa-info-circle"></i></code> 。
|
- text: "添加一个 <code><i class='fas fa-info-circle'></i></code> 图标到你的 info 按钮元素中。"
|
||||||
testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle"));
|
testString: assert($(".btn-info > i").is(".fas.fa-info-circle") || $(".btn-info > span").is(".fas.fa-info-circle"));
|
||||||
- text: 您应该在删除按钮元素中添加<code><i class="fa fa-trash"></i></code> 。
|
- text: "添加一个 <code><i class='fas fa-trash'></i></code> 图标到你的 delete 按钮元素中。"
|
||||||
testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash"));
|
testString: assert($(".btn-danger > i").is(".fas.fa-trash") || $(".btn-danger > span").is(".fas.fa-trash"));
|
||||||
- text: 确保每个<code>i</code>元素都有一个结束标记， <code><i class="fa fa-thumbs-up"></i></code>就在你的按钮元素中。
|
- text: "确保每一个 <code>i</code> 元素都有一个闭合标签并且 <code><i class='fa fa-thumbs-up'></i></code> 在 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")));
|
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:
|
|||||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-4">
|
<div class="col-xs-4">
|
||||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-4">
|
<div class="col-xs-4">
|
||||||
<button class="btn btn-block btn-info">Info</button>
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
@ -95,7 +99,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -107,8 +110,64 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i> Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger"><i class="fas fa-trash"></i> Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love:</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,18 +2,27 @@
|
|||||||
id: bad87fee1348bd9aedd08845
|
id: bad87fee1348bd9aedd08845
|
||||||
title: Add Font Awesome Icons to our Buttons
|
title: Add Font Awesome Icons to our Buttons
|
||||||
required:
|
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
|
raw: true
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16638
|
||||||
localeTitle: 添加字体真棒图标到我们的按钮
|
localeTitle: 将字体图标添加到我们的按钮中
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Font Awesome是一个方便的图标库。这些图标是矢量图形，以<code>.svg</code>文件格式存储。这些图标就像字体一样对待。您可以使用像素指定其大小，并且它们将采用其父HTML元素的字体大小。您可以在任何应用程序中包含Font Awesome，方法是在HTML的顶部添加以下代码： <code><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"></code>在这种情况下，我们已经在幕后为您添加了这个页面。 <code>i</code>元素最初用于使其他元素斜体，但现在通常用于图标。您可以将Font Awesome类添加到<code>i</code>元素以将其转换为图标，例如： <code><i class="fa fa-info-circle"></i></code>请注意， <code>span</code>元素也可用于图标。使用Font Awesome将一个<code>thumbs-up</code>图标添加到你喜欢的按钮，给它一个带有<code>fa</code>和<code>fa-thumbs-up</code>类的<code>i</code>元素;确保在图标旁边保留“赞”字样。 </section>
|
<section id='description'>
|
||||||
|
Font Awesome 是一个非常便利的图标库。这些图标都是被保存在 <code>.svg</code> 的文件格式中的矢量图。这些图标就和字体一样，不仅能通过像素单位指定他们的大小，它们也同样会继承父级 HTML 元素的字体大小。
|
||||||
|
你可以将 Font Awesome 图标库添加至任何一个 app 中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：
|
||||||
|
<code><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"></code>
|
||||||
|
不过在这里，我们已经预先为此页面添加了上述代码。
|
||||||
|
<code>i</code> 元素起初用于让其它元素具有斜体（italic）的效果，不过现在一般用于指代图标。你可以把 Font Awesome 中的 class 属性添加到 i 元素中，让它变成一个图标，比如：
|
||||||
|
<code><i class="fas fa-info-circle"></i></code>
|
||||||
|
记住 <code>span</code> 元素也一样可以用于指代图标。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
通过 Font Awesome 库增加一个 <code>thumbs-up</code> 图标到你的 like 按钮上，具体方法是给 i 元素添加 class 属性 <code>fas</code> 和 <code>fa-thumbs-up</code>；确保你的 "Like" 文本在图标旁边。
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -21,13 +30,13 @@ localeTitle: 添加字体真棒图标到我们的按钮
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 使用<code>fa</code>和<code>fa-thumbs-up</code>类添加<code>i</code>元素。
|
- text: 增加一个 class 为 <code>fas</code> 和 <code>fa-thumbs-up</code> 的 <code>i</code> 元素。
|
||||||
testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up"));
|
testString: assert($("i").is(".fas.fa-thumbs-up") || $("span").is(".fas.fa-thumbs-up"));
|
||||||
- text: 您的<code>fa-thumbs-up</code>图标应位于Like按钮内。
|
- text: <code>fa-thumbs-up</code> 图标应该放在 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")));
|
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: 将您的<code>i</code>元素嵌套在<code>button</code>元素中。
|
- text: 将 <code>i</code> 元素放置在你的 <code>button</code> 元素中。
|
||||||
testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0);
|
testString: assert($("button").children("i").length > 0 || $("button").children("span").length > 0);
|
||||||
- text: 确保您的图标元素具有结束标记。
|
- text: 确保你的图标元素有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/i>|<\/span>/g));
|
testString: assert(code.match(/<\/i>|<\/span>/g));
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -97,7 +106,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -109,8 +117,64 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love:</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,23 @@
|
|||||||
id: bad87fee1348bd9aec908853
|
id: bad87fee1348bd9aec908853
|
||||||
title: Add id Attributes to Bootstrap Elements
|
title: Add id Attributes to Bootstrap Elements
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16639
|
||||||
localeTitle: 将id属性添加到Bootstrap元素
|
localeTitle: 给 Bootstrap 元素添加id属性
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">回想一下，除了类属性之外，您还可以为每个元素赋予一个<code>id</code>属性。每个id必须对特定元素是唯一的，并且每页只使用一次。让我们给一个唯一的ID给我们每一个的<code>div</code>类的元素<code>well</code> 。请记住，你可以给一个元素这样的id： <code><div class="well" id="center-well"></code>给<code>left-well</code> 。给<code>right-well</code> 。 </section>
|
<section id='description'>
|
||||||
|
回忆一下，除了可以给元素添加 class 属性，我们还可以给元素设置 <code>id</code> 属性。
|
||||||
|
每个指定元素的 id 都是唯一的，并且在每个页面中都只能使用一次。
|
||||||
|
让我们为每个 class 为 <code>well</code> 的 <code>div</code> 元素添加一个唯一的 id。
|
||||||
|
记住，你可以这样给一个元素设置 ID。
|
||||||
|
<code><div class="well" id="center-well"></code>
|
||||||
|
把左边 well 的 ID 设置为 <code>left-well</code>。右边的 well 的 ID 设置为 <code>right-well</code>。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,9 +26,9 @@ localeTitle: 将id属性添加到Bootstrap元素
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 给你留下<code>well</code>的id <code>left-well</code> 。
|
- text: 把左边的 <code>well</code> 的 ID 设置为 <code>left-well</code>。
|
||||||
testString: assert($(".col-xs-6").children("#left-well") && $(".col-xs-6").children("#left-well").length > 0);
|
testString: assert($(".col-xs-6").children("#left-well") && $(".col-xs-6").children("#left-well").length > 0);
|
||||||
- text: 给您的权利<code>well</code>的ID <code>right-well</code> 。
|
- text: 把右边的 <code>well</code> 的 ID 设置为 <code>right-well</code>。
|
||||||
testString: assert($(".col-xs-6").children("#right-well") && $(".col-xs-6").children("#right-well").length > 0);
|
testString: assert($(".col-xs-6").children("#right-well") && $(".col-xs-6").children("#right-well").length > 0);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -52,7 +60,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -64,8 +71,26 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well" id="left-well">
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well" id="right-well">
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9aec908850
|
id: bad87fee1348bd9aec908850
|
||||||
title: Apply the Default Bootstrap Button Style
|
title: Apply the Default Bootstrap Button Style
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16657
|
||||||
localeTitle: 应用默认引导按钮样式
|
localeTitle: 给 Bootstrap 按钮添加默认样式
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Bootstrap有另一个名为<code>btn-default</code>按钮类。将<code>btn</code>和<code>btn-default</code>类同时应用于每个<code>button</code>元素。 </section>
|
<section id='description'>
|
||||||
|
Bootstrap 还有另外一种属于按钮的 class 属性叫做 <code>btn-default</code>。
|
||||||
|
为 <code>button</code> 元素增加两个 class： <code>btn</code> 和 <code>btn-default</code>。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,9 +22,9 @@ localeTitle: 应用默认引导按钮样式
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 将<code>btn</code>类应用于每个<code>button</code>元素。
|
- text: 将 <code>btn</code> class 添加到所有的 <code>button</code> 元素中。
|
||||||
testString: assert($(".btn").length > 5);
|
testString: assert($(".btn").length > 5);
|
||||||
- text: 将<code>btn-default</code>类应用于每个<code>button</code>元素。
|
- text: 将 <code>btn-default</code> class 添加到每一个 <code>button</code> 元素中。
|
||||||
testString: assert($(".btn-default").length > 5);
|
testString: assert($(".btn-default").length > 5);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -52,7 +56,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -64,8 +67,26 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well">
|
||||||
|
<button class="btn btn-default"></button>
|
||||||
|
<button class="btn btn-default"></button>
|
||||||
|
<button class="btn btn-default"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well">
|
||||||
|
<button class="btn btn-default"></button>
|
||||||
|
<button class="btn btn-default"></button>
|
||||||
|
<button class="btn btn-default"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,20 @@
|
|||||||
id: bad87fee1348cd8acef08813
|
id: bad87fee1348cd8acef08813
|
||||||
title: Call out Optional Actions with btn-info
|
title: Call out Optional Actions with btn-info
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16770
|
||||||
localeTitle: 使用btn-info调出可选操作
|
localeTitle: 使用 btn-info 调出可选操作
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Bootstrap带有几种预定义的按钮颜色。 <code>btn-info</code>类用于引起对用户可以采取的可选操作的注意。使用文本“Info”在“Like”按钮下创建一个新的块级Bootstrap按钮，并向其添加Bootstrap的<code>btn-info</code>和<code>btn-block</code>类。请注意，这些按钮仍然需要<code>btn</code>和<code>btn-block</code>类。 </section>
|
<section id='description'>
|
||||||
|
Bootstrap 有着丰富的预定义按钮颜色。浅蓝色 <code>btn-info</code> class 通常用在用户可能采取的操作上。
|
||||||
|
在你的 "Like" 按钮下方创建包含文本 "Info" 的块级 Bootstrap 按钮， 然后为该按钮添加 Bootstrap 的 <code>btn-info</code> 和 <code>btn-block</code> class。
|
||||||
|
记住：你的这些按钮仍然需要 <code>btn</code> 和 <code>btn-block</code> class。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +23,13 @@ localeTitle: 使用btn-info调出可选操作
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 使用文本“Info”创建一个新的<code>button</code>元素。
|
- text: "创建包含文本 'Info' 的 <code>button</code> 元素。"
|
||||||
testString: assert(new RegExp("info","gi").test($("button").text()));
|
testString: assert(new RegExp("info","gi").test($("button").text()));
|
||||||
- text: 两个Bootstrap按钮都应该有<code>btn</code>和<code>btn-block</code>类。
|
- text: 两个按钮的 class 属性应该仍然具有 <code>btn</code> 和 <code>btn-block</code>。
|
||||||
testString: assert($("button.btn-block.btn").length > 1);
|
testString: assert($("button.btn-block.btn").length > 1);
|
||||||
- text: 你的新按钮应该有类<code>btn-info</code> 。
|
- text: 新按钮的 class 属性应该含有 <code>btn-info</code>。
|
||||||
testString: assert($("button").hasClass("btn-info"));
|
testString: assert($("button").hasClass("btn-info"));
|
||||||
- text: 确保所有<code>button</code>元素都有一个结束标记。
|
- text: 确保你所有的 <code>button</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -95,7 +100,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -107,8 +111,67 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<button class="btn btn-block btn-primary">Like</button>
|
||||||
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
|
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,20 @@
|
|||||||
id: bad87fee1348bd8acde08812
|
id: bad87fee1348bd8acde08812
|
||||||
title: Center Text with Bootstrap
|
title: Center Text with Bootstrap
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16771
|
||||||
localeTitle: 中心文本与引导程序
|
localeTitle: 用 Bootstrap 居中文本
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">现在我们正在使用Bootstrap，我们可以将我们的标题元素集中在一起，使其看起来更好。我们需要做的就是将类<code>text-center</code>添加到我们的<code>h2</code>元素中。请记住，您可以通过用空格分隔每个类来为同一个元素添加几个类，如下所示： <code><h2 class="red-text text-center">your text</h2></code> </section>
|
<section id='description'>
|
||||||
|
我们可以使用 Bootstrap 将顶部的元素居中来美化页面。只需要将 <code>h2</code> 元素的 class 属性设置为 <code>text-center</code> 就可以实现。
|
||||||
|
记住：我们通过空格分隔不同的 class 可以为一个元素添加多个 class ，就像这样：
|
||||||
|
<code><h2 class="red-text text-center">your text</h2></code>
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,9 +23,9 @@ localeTitle: 中心文本与引导程序
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 应用类<code>text-center</code>应该使<code>h2</code>元素居中
|
- text: 你的 <code>h2</code> 元素应该居中且有一个 class 为 <code>text-center</code>
|
||||||
testString: assert($("h2").hasClass("text-center"));
|
testString: assert($("h2").hasClass("text-center"));
|
||||||
- text: 您的<code>h2</code>元素仍应具有类<code>red-text</code>
|
- text: 你的 <code>h2</code> 元素应该还有另一个 class 为 <code>red-text</code>
|
||||||
testString: assert($("h2").hasClass("red-text"));
|
testString: assert($("h2").hasClass("red-text"));
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -90,7 +95,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -102,8 +106,64 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,27 @@
|
|||||||
id: bad87fee1348cd8acef08812
|
id: bad87fee1348cd8acef08812
|
||||||
title: Create a Block Element Bootstrap Button
|
title: Create a Block Element Bootstrap Button
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16810
|
||||||
localeTitle: 创建一个块元素引导按钮
|
localeTitle: 创建一个 Bootstrap 块级元素
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">通常，具有<code>btn</code>和<code>btn-default</code>类的<code>button</code>元素仅与它们包含的文本一样宽。例如： <code><button class="btn btn-default">Submit</button></code>此按钮只能与“提交”一词一样宽。 <button class="btn btn-default">提交</button>通过使用附加的<code>btn-block</code>类来阻止元素，您的按钮将拉伸以填充页面的整个水平空间，其后面的任何元素将流到块下方的“新行”。 <code><button class="btn btn-default btn-block">Submit</button></code>此按钮占用可用宽度的100％。 <button class="btn btn-default btn-block">提交</button>请注意，这些按钮仍需要<code>btn</code>类。将Bootstrap的<code>btn-block</code>类添加到Bootstrap按钮。 </section>
|
<section id='description'>
|
||||||
|
一般情况下，具有 <code>btn</code> 和 <code>btn-default</code> 两个 class 的 <code>button</code> 元素宽度与它包含的文本相同，举个例子：
|
||||||
|
<code><button class="btn btn-default">Submit</button></code>
|
||||||
|
这个按钮的宽度应该和文本 "Submit" 相同
|
||||||
|
<button class='btn btn-default'>Submit</button>
|
||||||
|
通过为按钮添加 class 属性 <code>btn-block</code> 使其成为块级元素，按钮会伸展并填满页面整个水平空间，后续的元素会流到这个块级元素的下方，即 "新开一行"。
|
||||||
|
<code><button class="btn btn-default btn-block">Submit</button></code>
|
||||||
|
这个按钮会 100% 占满所有的可用宽度。
|
||||||
|
<button class='btn btn-default btn-block'>Submit</button>
|
||||||
|
记住这些按钮仍然需要 <code>btn</code> 这个 class。
|
||||||
|
添加 Bootstrap 的 <code>btn-block</code> class 到你 Bootstrap 按钮上吧。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,11 +30,11 @@ localeTitle: 创建一个块元素引导按钮
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你的按钮应该仍然有<code>btn</code>和<code>btn-default</code>类。
|
- text: 按钮的 class 属性应该仍然具有 <code>btn</code> 和 <code>btn-default</code>。
|
||||||
testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default"));
|
testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default"));
|
||||||
- text: 你的按钮应该有类<code>btn-block</code> 。
|
- text: 按钮的 class 属性应该包含 <code>btn-block</code>。
|
||||||
testString: assert($("button").hasClass("btn-block"));
|
testString: assert($("button").hasClass("btn-block"));
|
||||||
- text: 确保所有<code>button</code>元素都有一个结束标记。
|
- text: 确保所有的 <code>button</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -93,7 +105,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -105,8 +116,65 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<button class="btn btn-block btn-default">Like</button>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348cd8acdf08812
|
id: bad87fee1348cd8acdf08812
|
||||||
title: Create a Bootstrap Button
|
title: Create a Bootstrap Button
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16811
|
||||||
localeTitle: 创建一个Bootstrap按钮
|
localeTitle: 创建一个 Bootstrap 按钮
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Bootstrap有自己的<code>button</code>元素样式，看起来比纯HTML样式好得多。在您的大型小猫照片下方创建一个新的<code>button</code>元素。给它<code>btn</code>和<code>btn-default</code>类，以及“Like”的文本。 </section>
|
<section id='description'>
|
||||||
|
Bootstrap 的 <code>button</code> 元素有着独有的、比默认 HTML 按钮更好的样式风格。
|
||||||
|
在较大的小猫图片下方创建新的 <code>button</code> 元素。 为它添加 <code>btn</code> 与 <code>btn-default</code> 两个 class 和 "Like" 文本。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,11 +22,11 @@ localeTitle: 创建一个Bootstrap按钮
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 使用文本“Like”创建一个新的<code>button</code>元素。
|
- text: "创建新的 <code>button</code> 元素，设置文本为 'Like'。"
|
||||||
testString: assert(new RegExp("like","gi").test($("button").text()) && ($("img.img-responsive + button.btn").length > 0));
|
testString: assert(new RegExp("like","gi").test($("button").text()) && ($("img.img-responsive + button.btn").length > 0));
|
||||||
- text: 你的新按钮应该有两个类： <code>btn</code>和<code>btn-default</code> 。
|
- text: '新的按钮元素应该有两个 class : <code>btn</code> 和 <code>btn-default</code>。'
|
||||||
testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default"));
|
testString: assert($("button").hasClass("btn") && $("button").hasClass("btn-default"));
|
||||||
- text: 确保所有<code>button</code>元素都有一个结束标记。
|
- text: 保证所有 <code>button</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -93,7 +97,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -105,8 +108,73 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
|
||||||
|
<!-- ADD Bootstrap Styled Button -->
|
||||||
|
<button class="btn btn-default">Like</button>
|
||||||
|
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,21 @@
|
|||||||
id: bad87fee1348bd9aec908846
|
id: bad87fee1348bd9aec908846
|
||||||
title: Create a Bootstrap Headline
|
title: Create a Bootstrap Headline
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16812
|
||||||
localeTitle: 创建一个Bootstrap标题
|
localeTitle: 创建一个 Bootstrap 标题
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">现在让我们从头开始构建一些东西来练习我们的HTML，CSS和Bootstrap技能。我们将构建一个jQuery游戏，我们很快将在jQuery挑战中使用它。首先，使用文本<code>jQuery Playground</code>创建一个<code>h3</code>元素。使用<code>text-primary</code> Bootstrap类为<code>h3</code>元素着色，并将其与<code>text-center</code> Bootstrap类<code>text-center</code> 。 </section>
|
<section id='description'>
|
||||||
|
现在，让我们运用 HTML，CSS 和 Bootstrap 从零开始做点东西。
|
||||||
|
我们将会搭建一个 jQuery playground，以便在后续的 jQuery 课程中使用它。
|
||||||
|
首先，创建一个包含 <code>jQuery Playground</code> 文本内容的 <code>h3</code> 元素。
|
||||||
|
通过给你的 <code>h3</code> 元素设置 Bootstrap 的 class 属性 <code>text-primary</code> 来为其上色，然后添加 Bootstrap 的 class 属性 <code>text-center</code> 使其文本居中显示。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,15 +24,15 @@ localeTitle: 创建一个Bootstrap标题
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 在页面中添加<code>h3</code>元素。
|
- text: 为你的页面添加一个 <code>h3</code> 元素。
|
||||||
testString: assert($("h3") && $("h3").length > 0);
|
testString: assert($("h3") && $("h3").length > 0);
|
||||||
- text: 确保您的<code>h3</code>元素具有结束标记。
|
- text: 确保你的 <code>h3</code> 元素有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/h3>/g) && code.match(/<h3/g) && code.match(/<\/h3>/g).length === code.match(/<h3/g).length);
|
testString: assert(code.match(/<\/h3>/g) && code.match(/<h3/g) && code.match(/<\/h3>/g).length === code.match(/<h3/g).length);
|
||||||
- text: 应该使用<code>text-primary</code>类来对你的<code>h3</code>元素进行着色
|
- text: 为了确保成功上色，<code>h3</code> 元素应该具有 <code>text-primary</code> class。
|
||||||
testString: assert($("h3").hasClass("text-primary"));
|
testString: assert($("h3").hasClass("text-primary"));
|
||||||
- text: 应用类<code>text-center</code>应该使<code>h3</code>元素居中
|
- text: 为了确保文本居中显示，你的 <code>h3</code> 元素应该具有 <code>text-center</code> class。
|
||||||
testString: assert($("h3").hasClass("text-center"));
|
testString: assert($("h3").hasClass("text-center"));
|
||||||
- text: 你的<code>h3</code>元素应该有<code>jQuery Playground</code>文本。
|
- text: <code>h3</code> 元素文本为 <code>jQuery Playground</code>。
|
||||||
testString: assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()));
|
testString: assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()));
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -44,15 +50,13 @@ tests:
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9bec908846
|
id: bad87fee1348bd9bec908846
|
||||||
title: Create a Bootstrap Row
|
title: Create a Bootstrap Row
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16813
|
||||||
localeTitle: 创建一个Bootstrap行
|
localeTitle: 创建一个 Bootstrap Row
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">现在我们将为内联元素创建一个Bootstrap行。在<code>h3</code>标记下创建一个<code>div</code>元素，其中包含一个<code>row</code>类。 </section>
|
<section id='description'>
|
||||||
|
这次让我们为内联元素创建一个 Bootstrap 栅格系统的 Row（行）。
|
||||||
|
在 <code>h3</code> 标签下方创建一个 class 属性为 <code>row</code> 的 <code>div</code> 元素。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +22,13 @@ localeTitle: 创建一个Bootstrap行
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 在<code>h3</code>元素下面添加一个<code>div</code>元素。
|
- text: <code>h3</code> 元素下增加一个 <code>div</code> 元素。
|
||||||
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));
|
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: 你的<code>div</code>元素应该有类<code>row</code>
|
- text: <code>div</code> 元素的 class 属性应为 <code>row</code>。
|
||||||
testString: assert($("div").hasClass("row"));
|
testString: assert($("div").hasClass("row"));
|
||||||
- text: 你的<code>row div</code>应该嵌套在<code>container-fluid div</code>
|
- text: <code>row div</code> 应该内嵌于 <code>container-fluid div</code>。
|
||||||
testString: assert($("div.container-fluid div.row").length > 0);
|
testString: assert($("div.container-fluid div.row").length > 0);
|
||||||
- text: 确保你的<code>div</code>元素有一个结束标记。
|
- text: 确保所有 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -53,8 +57,11 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row"></div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9aec908852
|
id: bad87fee1348bd9aec908852
|
||||||
title: Create a Class to Target with jQuery Selectors
|
title: Create a Class to Target with jQuery Selectors
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16815
|
||||||
localeTitle: 使用jQuery选择器创建一个目标类
|
localeTitle: 分别给每个目标元素的 class 属性添加一个 target 值
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">并非每个类都需要具有相应的CSS。有时我们创建类只是为了使用jQuery更容易地选择这些元素。为每个<code>button</code>元素提供类<code>target</code> 。 </section>
|
<section id='description'>
|
||||||
|
并不是所有 class 属性都需要有对应的 CSS 样式。有时候我们设置 class 只是为了更方便地在 jQuery 中选中这些元素。
|
||||||
|
为每一个 <code>button</code> 元素添加 <code>target</code> class。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,7 +22,7 @@ localeTitle: 使用jQuery选择器创建一个目标类
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 将<code>target</code>类应用于每个<code>button</code>元素。
|
- text: 给你的每一个 <code>button</code> 元素设置 <code>target</code> class。
|
||||||
testString: assert($(".target").length > 5);
|
testString: assert($(".target").length > 5);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -50,7 +54,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -62,8 +65,26 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well">
|
||||||
|
<button class="target btn btn-default"></button>
|
||||||
|
<button class="target btn btn-default"></button>
|
||||||
|
<button class="target btn btn-default"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well">
|
||||||
|
<button class="target btn btn-default"></button>
|
||||||
|
<button class="target btn btn-default"></button>
|
||||||
|
<button class="target btn btn-default"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,21 @@
|
|||||||
id: bad87fee1348bd9aede08845
|
id: bad87fee1348bd9aede08845
|
||||||
title: Create a Custom Heading
|
title: Create a Custom Heading
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16816
|
||||||
localeTitle: 创建自定义标题
|
localeTitle: 创建自定义标题
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">我们将通过将标题和放松的猫图像放在同一行中，为我们的Cat Photo App制作一个简单的标题。请记住，Bootstrap使用响应式网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大多数类都可以应用于<code>div</code>元素。将第一个图像和<code>h2</code>元素嵌套在一个<code><div class="row"></code>元素中。将您的<code>h2</code>元素嵌套在<code><div class="col-xs-8"></code>并将您的图像<code><div class="col-xs-4"></code>以便它们位于同一行。请注意图像现在的大小是否适合文本？ </section>
|
<section id='description'>
|
||||||
|
让我们来为 Cat Photo App 做一个导航吧，把标题和惬意的猫咪图片放在同一行。
|
||||||
|
记住，由于 Bootstrap 使用了响应式栅格系统，使得我们可以很方便的放置元素并为元素指定相对的宽度。大部分的 Bootstrap 的 class 都能用在 <code>div</code> 元素上。
|
||||||
|
把我们的第一张图片和 <code>h2</code> 元素用一个简单的 <code><div class="row"></code> 元素包裹起来。再用 <code><div class="col-xs-8"></code> 包裹我们的 <code>h2</code> 元素，用 <code><div class="col-xs-4"></code> 包裹我们的图片，这样它们就能位于同一行了。
|
||||||
|
注意现在图片是否与文字大小一致呢？
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +24,13 @@ localeTitle: 创建自定义标题
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你的<code>h2</code>元素和最顶层的<code>img</code>元素都应该在带有类<code>row</code>的<code>div</code>元素中嵌套在一起。
|
- text: <code>h2</code> 元素和最上方的 <code>img</code> 元素应该一起内嵌于具有 <code>row</code> class 的 <code>div</code> 元素内。
|
||||||
testString: assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0);
|
testString: assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0);
|
||||||
- text: 使用类<code>col-xs-4</code>将最顶层的<code>img</code>元素嵌套在<code>div</code> 。
|
- text: 最上方的 <code>img</code> 元素应该内嵌于含有 <code>col-xs-4</code> class 的 <code>div</code> 元素中。
|
||||||
testString: assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0);
|
testString: assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0);
|
||||||
- text: 使用类<code>col-xs-8</code>将<code>h2</code>元素嵌套在<code>div</code> 。
|
- text: <code>h2</code> 元素应该内嵌于含有 <code>col-xs-8</code> class的 <code>div</code> 元素中。
|
||||||
testString: assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0);
|
testString: assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0);
|
||||||
- text: 确保每个<code>div</code>元素都有一个结束标记。
|
- text: 确保每一个 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -91,7 +97,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -103,8 +108,65 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary">Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love:</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9aec908848
|
id: bad87fee1348bd9aec908848
|
||||||
title: Create Bootstrap Wells
|
title: Create Bootstrap Wells
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 16825
|
||||||
localeTitle: 创建Bootstrap Wells
|
localeTitle: 创建 Bootstrap Wells
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Bootstrap有一个名为<code>well</code>的类，可以为列创建视觉深度感。巢一个<code>div</code>与类元素<code>well</code>内每个的<code>col-xs-6</code> <code>div</code>元素。 </section>
|
<section id='description'>
|
||||||
|
Bootstrap 有一个叫做 <code>well</code> 的 class，作用是赋予列一种视觉上的深度感（视觉上的效果）。
|
||||||
|
在每一个 class 属性为 <code>col-xs-6</code> 的 <code>div</code> 元素中都嵌入一个带有 <code>well</code> 的 <code>div</code> 元素。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,11 +22,11 @@ localeTitle: 创建Bootstrap Wells
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 添加一个<code>div</code>与类元素<code>well</code>内部的每个的<code>div</code>与类元素<code>"col-xs-6"</code>
|
- text: "在每一个 class 属性为 <code>'col-xs-6'</code> 的 <code>div</code> 元素中都嵌入一个带有 <code>well</code> 的 <code>div</code> 元素。"
|
||||||
testString: assert($("div.col-xs-6").not(":has(>div.well)").length < 1);
|
testString: assert($("div.col-xs-6").not(":has(>div.well)").length < 1);
|
||||||
- text: 巢既您的<code>div</code>与类元素<code>"col-xs-6"</code>你中<code>div</code>与类元素<code>"row"</code> 。
|
- text: "将你的两个 class 属性为 <code>'col-xs-6'</code> 的 <code>div</code> 元素都内嵌入一个带有 <code>'row'</code> 的 <code>div</code> 元素中。"
|
||||||
testString: assert($("div.row > div.col-xs-6").length > 1);
|
testString: assert($("div.row > div.col-xs-6").length > 1);
|
||||||
- text: 确保所有<code>div</code>元素都有结束标记。
|
- text: 确保你的 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -46,7 +50,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -58,8 +61,18 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<div class="well"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,22 @@
|
|||||||
id: bad87fee1347bd9aedf08845
|
id: bad87fee1347bd9aedf08845
|
||||||
title: Ditch Custom CSS for Bootstrap
|
title: Ditch Custom CSS for Bootstrap
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 17565
|
||||||
localeTitle: Ditch Custom CSS for Bootstrap
|
localeTitle: 用 Bootstrap 来取代我们之前的自定义样式
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">我们可以使用Bootstrap的内置样式代替我们之前创建的自定义样式来清理代码并使我们的Cat Photo App看起来更加传统。别担心 - 以后会有足够的时间来定制CSS。从<code>style</code>元素中删除<code>.smaller-image</code> <code>.red-text</code> ， <code>p</code>和<code>.smaller-image</code> CSS声明，以便<code>style</code>元素中剩下的唯一声明是<code>h2</code>和<code>thick-green-border</code> 。然后删除包含死链接的<code>p</code>元素。然后从<code>h2</code>元素中删除<code>red-text</code>类，并将其替换为<code>text-primary</code> Bootstrap类。最后，从第一个<code>img</code>元素中删除“small-image”类，并将其替换为<code>img-responsive</code>类。 </section>
|
<section id='description'>
|
||||||
|
现在我们可以清理一下之前代码，用 Bootstrap 的内置样式来替换我们之前定义的样式，这样会让我们的 Cat Photo App 看起来更简洁些。
|
||||||
|
别担心————以后我们会有大把时间来自定义我们的 CSS 样式的。
|
||||||
|
删除 <code>style</code> 元素里的 <code>.red-text</code>, <code>p</code>, 和 <code>.smaller-image</code> CSS 声明，使 <code>style</code> 元素留下的声明只有 <code>h2</code> 和 <code>thick-green-border</code>.
|
||||||
|
删除包含死链接的 <code>p</code> 元素。 然后将 <code>h2</code> 的 <code>red-text</code> class 替换为 Bootstrap 的 <code>text-primary</code> class.
|
||||||
|
最后, 将你第一个 <code>img</code> 元素的 "smaller-image" class 替换为 <code>img-responsive</code> class.
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,15 +25,15 @@ localeTitle: Ditch Custom CSS for Bootstrap
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你的h2元素不应该有<code>red-text</code>类。
|
- text: h2 元素的 class 不应为 <code>red-text</code>。
|
||||||
testString: assert(!$("h2").hasClass("red-text"));
|
testString: assert(!$("h2").hasClass("red-text"));
|
||||||
- text: 您的h2元素现在应该具有<code>text-primary</code>类。
|
- text: h2 元素的 class 应为 <code>text-primary</code>。
|
||||||
testString: assert($("h2").hasClass("text-primary"));
|
testString: assert($("h2").hasClass("text-primary"));
|
||||||
- text: 您的段落元素不应再使用<code>Monospace</code> 。
|
- text: 你的段落元素（p）应该不再使用 <code>Monospace</code> 字体。
|
||||||
testString: assert(!$("p").css("font-family").match(/monospace/i));
|
testString: assert(!$("p").css("font-family").match(/monospace/i));
|
||||||
- text: 从顶部图像中删除<code>smaller-image</code>类。
|
- text: 移除你第一张图片的 class 属性 <code>smaller-image</code>。
|
||||||
testString: assert(!$("img").hasClass("smaller-image"));
|
testString: assert(!$("img").hasClass("smaller-image"));
|
||||||
- text: 将<code>img-responsive</code>类添加到您的顶部图像。
|
- text: 给你的第一张图片添加 class 属性 <code>img-responsive</code>。
|
||||||
testString: assert($(".img-responsive").length > 1);
|
testString: assert($(".img-responsive").length > 1);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -107,7 +114,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -119,8 +125,60 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary">Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,20 @@
|
|||||||
id: bad87fee1348bd9aec908855
|
id: bad87fee1348bd9aec908855
|
||||||
title: Give Each Element a Unique id
|
title: Give Each Element a Unique id
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18191
|
||||||
localeTitle: 为每个元素赋予唯一ID
|
localeTitle: 给每个元素一个唯一的 id
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">我们还希望能够使用jQuery通过其唯一ID来定位每个按钮。每个按钮提供一个唯一的ID，从<code>target1</code> ，结束时用<code>target6</code> 。确保<code>target1</code>到<code>target3</code>在<code>#left-well</code> ，而<code>target4</code>到<code>target6</code>在<code>#right-well</code> 。 </section>
|
<section id='description'>
|
||||||
|
我们也可以通过 jQuery 根据每个按钮唯一的 id 来标识出它们。
|
||||||
|
给你的每一个按钮设置唯一的 id，以 <code>target1</code> 开始，<code>target6</code> 结束。
|
||||||
|
确保 <code>target1</code> 到 <code>target3</code> 在 <code>#left-well</code> 之中，<code>target4</code> 到 <code>target6</code> 在 <code>#right-well</code> 之中。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,17 +23,17 @@ localeTitle: 为每个元素赋予唯一ID
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 一个<code>button</code>元素应该具有id <code>target1</code> 。
|
- text: 其中一个 <code>button</code> 元素应该有 id <code>target1</code>。
|
||||||
testString: assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0);
|
testString: assert($("#left-well").children("#target1") && $("#left-well").children("#target1").length > 0);
|
||||||
- text: 一个<code>button</code>元素应该具有id <code>target2</code> 。
|
- text: 其中一个 <code>button</code> 元素应该有 id <code>target2</code>。
|
||||||
testString: assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0);
|
testString: assert($("#left-well").children("#target2") && $("#left-well").children("#target2").length > 0);
|
||||||
- text: 一个<code>button</code>元素应该具有id <code>target3</code> 。
|
- text: 其中一个 <code>button</code> 元素应该有 id <code>target3</code>。
|
||||||
testString: assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0);
|
testString: assert($("#left-well").children("#target3") && $("#left-well").children("#target3").length > 0);
|
||||||
- text: 一个<code>button</code>元素应该具有id <code>target4</code> 。
|
- text: 其中一个 <code>button</code> 元素应该有 id <code>target4</code>。
|
||||||
testString: assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0);
|
testString: assert($("#right-well").children("#target4") && $("#right-well").children("#target4").length > 0);
|
||||||
- text: 一个<code>button</code>元素应该具有id <code>target5</code> 。
|
- text: 其中一个 <code>button</code> 元素应该有 id <code>target5</code>。
|
||||||
testString: assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0);
|
testString: assert($("#right-well").children("#target5") && $("#right-well").children("#target5").length > 0);
|
||||||
- text: 一个<code>button</code>元素应该具有id <code>target6</code> 。
|
- text: 其中一个 <code>button</code> 元素应该有 id <code>target6</code>。
|
||||||
testString: assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0);
|
testString: assert($("#right-well").children("#target6") && $("#right-well").children("#target6").length > 0);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -62,7 +67,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -74,8 +78,28 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#left-well</h4>
|
||||||
|
<div class="well" id="left-well">
|
||||||
|
<button class="btn btn-default target" id="target1"></button>
|
||||||
|
<button class="btn btn-default target" id="target2"></button>
|
||||||
|
<button class="btn btn-default target" id="target3"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#right-well</h4>
|
||||||
|
<div class="well" id="right-well">
|
||||||
|
<button class="btn btn-default target" id="target4"></button>
|
||||||
|
<button class="btn btn-default target" id="target5"></button>
|
||||||
|
<button class="btn btn-default target" id="target6"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9aec908746
|
id: bad87fee1348bd9aec908746
|
||||||
title: House our page within a Bootstrap container-fluid div
|
title: House our page within a Bootstrap container-fluid div
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18198
|
||||||
localeTitle: 将我们的页面放在Bootstrap容器 - 流体div中
|
localeTitle: 将我们的页面放在 Fluid 容器中
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">现在让我们确保您网页上的所有内容都是移动响应式的。让我们使用类<code>container-fluid</code>将<code>h3</code>元素嵌套在<code>div</code>元素<code>container-fluid</code> 。 </section>
|
<section id='description'>
|
||||||
|
现在让我们确保页面所有内容应该都是响应式的。
|
||||||
|
将我们的 <code>h3</code> 元素内嵌进一个具有 <code>container-fluid</code> class 的<code>div</code> 元素中。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,11 +22,11 @@ localeTitle: 将我们的页面放在Bootstrap容器 - 流体div中
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你的<code>div</code>元素应该有class <code>container-fluid</code> 。
|
- text: <code>div</code> 元素 class 属性应该为 <code>container-fluid</code>。
|
||||||
testString: assert($("div").hasClass("container-fluid"));
|
testString: assert($("div").hasClass("container-fluid"));
|
||||||
- text: 确保每个<code>div</code>元素都有一个结束标记。
|
- text: 确保每一个 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
- text: 将<code>h3</code>元素<code>div</code>元素中。
|
- text: <code>h3</code> 元素应该内嵌于 <code>div</code> 元素。
|
||||||
testString: assert($("div").children("h3").length >0);
|
testString: assert($("div").children("h3").length >0);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -48,8 +52,10 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9aec908856
|
id: bad87fee1348bd9aec908856
|
||||||
title: Label Bootstrap Buttons
|
title: Label Bootstrap Buttons
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18222
|
||||||
localeTitle: 标签引导按钮
|
localeTitle: 给 Bootstrap 按钮贴标签
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">就像我们标记了我们的井，我们想要标记我们的按钮。为每个<code>button</code>元素提供与其<code>id</code>的选择器对应的文本。 </section>
|
<section id='description'>
|
||||||
|
正如我们标注了每个 wells 一样，我们同样想要标注每一个按钮。
|
||||||
|
为每一个 <code>button</code> 元素设置与其 <code>id</code> 选择器相同的文本。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,17 +22,17 @@ localeTitle: 标签引导按钮
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: '给你的<code>button</code>元素id为<code>target1</code>文本<code>#target1</code> 。'
|
- text: 给 id 为 <code>target1</code> 的 <code>button</code> 元素设置文本 <code>#target1</code>。
|
||||||
testString: assert(new RegExp("#target1","gi").test($("#target1").text()));
|
testString: assert(new RegExp("#target1","gi").test($("#target1").text()));
|
||||||
- text: '给你的<code>button</code>元素id为<code>target2</code>文本<code>#target2</code> 。'
|
- text: 给 id 为 <code>target2</code> 的 <code>button</code> 元素设置文本 <code>#target2</code>。
|
||||||
testString: assert(new RegExp("#target2","gi").test($("#target2").text()));
|
testString: assert(new RegExp("#target2","gi").test($("#target2").text()));
|
||||||
- text: '给你的<code>button</code>元素id为<code>target3</code>文本<code>#target3</code> 。'
|
- text: 给 id 为 <code>target3</code> 的 <code>button</code> 元素设置文本 <code>#target3</code>。
|
||||||
testString: assert(new RegExp("#target3","gi").test($("#target3").text()));
|
testString: assert(new RegExp("#target3","gi").test($("#target3").text()));
|
||||||
- text: '给你的<code>button</code>元素id为<code>target4</code>文本<code>#target4</code> 。'
|
- text: 给 id 为 <code>target4</code> 的 <code>button</code> 元素设置文本 <code>#target4</code>。
|
||||||
testString: assert(new RegExp("#target4","gi").test($("#target4").text()));
|
testString: assert(new RegExp("#target4","gi").test($("#target4").text()));
|
||||||
- text: '给你的<code>button</code>元素id为<code>target5</code>文本<code>#target5</code> 。'
|
- text: 给 id 为 <code>target5</code> 的 <code>button</code> 元素设置文本 <code>#target5</code>。
|
||||||
testString: assert(new RegExp("#target5","gi").test($("#target5").text()));
|
testString: assert(new RegExp("#target5","gi").test($("#target5").text()));
|
||||||
- text: '使用id <code>target6</code>为您的<code>button</code>元素提供文本<code>#target6</code> 。'
|
- text: 给 id 为 <code>target6</code> 的 <code>button</code> 元素设置文本 <code>#target6</code>。
|
||||||
testString: assert(new RegExp("#target6","gi").test($("#target6").text()));
|
testString: assert(new RegExp("#target6","gi").test($("#target6").text()));
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -62,7 +66,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -74,8 +77,28 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#left-well</h4>
|
||||||
|
<div class="well" id="left-well">
|
||||||
|
<button class="btn btn-default target" id="target1">#target1</button>
|
||||||
|
<button class="btn btn-default target" id="target2">#target2</button>
|
||||||
|
<button class="btn btn-default target" id="target3">#target3</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#right-well</h4>
|
||||||
|
<div class="well" id="right-well">
|
||||||
|
<button class="btn btn-default target" id="target4">#target4</button>
|
||||||
|
<button class="btn btn-default target" id="target5">#target5</button>
|
||||||
|
<button class="btn btn-default target" id="target6">#target6</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,20 @@
|
|||||||
id: bad87fee1348bd9aec908854
|
id: bad87fee1348bd9aec908854
|
||||||
title: Label Bootstrap Wells
|
title: Label Bootstrap Wells
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18223
|
||||||
localeTitle: 标签Bootstrap Wells
|
localeTitle: 给 Bootstrap Wells 贴标签
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">为了清楚起见，我们用它们的ID标记我们的两个井。在左侧井的上方，在其<code>col-xs-6</code> <code>div</code>元素内，添加一个带有文本<code>#left-well</code>的<code>h4</code>元素。在右侧井上方，在其<code>col-xs-6</code> <code>div</code>元素内，添加一个带有文本<code>#right-well</code>的<code>h4</code>元素。 </section>
|
<section id='description'>
|
||||||
|
为了让我们页面逻辑更清晰，让我们为 wells 都标上它们的 id 吧。
|
||||||
|
在 left-well 的上一层，class 属性为 <code>col-xs-6</code> 的 <code>div</code> 元素里面，增加一个文本为 <code>#left-well</code> 的 <code>h4</code> 元素。
|
||||||
|
在 right-well 的上一层，class 属性为 <code>col-xs-6</code> 的 <code>div</code> 元素里面，增加一个文本为 <code>#right-well</code> 的 <code>h4</code> 元素。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +23,13 @@ localeTitle: 标签Bootstrap Wells
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 在每个<code><div class="col-xs-6"></code>元素中添加一个<code>h4</code>元素。
|
- text: "为每个 <code><div class='col-xs-6'></code> 元素添加一个 <code>h4</code> 元素。"
|
||||||
testString: assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1);
|
testString: assert($(".col-xs-6").children("h4") && $(".col-xs-6").children("h4").length > 1);
|
||||||
- text: '一个<code>h4</code>元素应该有<code>#left-well</code>文本。'
|
- text: 其中一个 <code>h4</code> 元素应该含有文本内容 <code>#left-well</code>。
|
||||||
testString: assert(new RegExp("#left-well","gi").test($("h4").text()));
|
testString: assert(new RegExp("#left-well","gi").test($("h4").text()));
|
||||||
- text: '一个<code>h4</code>元素应该有<code>#right-well</code>文本。'
|
- text: 其中一个 <code>h4</code> 元素应该含有文本内容 <code>#right-well</code>。
|
||||||
testString: assert(new RegExp("#right-well","gi").test($("h4").text()));
|
testString: assert(new RegExp("#right-well","gi").test($("h4").text()));
|
||||||
- text: 确保所有<code>h4</code>元素都有结束标记。
|
- text: 确保每个 <code>h4</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/h4>/g) && code.match(/<h4/g) && code.match(/<\/h4>/g).length === code.match(/<h4/g).length);
|
testString: assert(code.match(/<\/h4>/g) && code.match(/<h4/g) && code.match(/<\/h4>/g).length === code.match(/<h4/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -58,7 +63,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -70,8 +74,28 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#left-well</h4>
|
||||||
|
<div class="well" id="left-well">
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#right-well</h4>
|
||||||
|
<div class="well" id="right-well">
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
<button class="btn btn-default target"></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -5,15 +5,20 @@ required:
|
|||||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
||||||
raw: true
|
raw: true
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18225
|
||||||
localeTitle: 使用Bootstrap响应表单元素
|
localeTitle: 使用 Bootstrap 响应式排列表单元素
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">现在让我们将您的表单<code>input</code>和提交<code>button</code>放在同一行。我们将做到这一点，我们以前有相同的方式：通过使用<code>div</code>元素带班<code>row</code> ，和其他<code>div</code>使用中它的元素<code>col-xs-*</code>类。将表单的文本<code>input</code>和提交<code>button</code>嵌套在具有类<code>row</code>的<code>div</code> 。将表单的文本<code>input</code>嵌套在具有<code>col-xs-7</code>类的div中。将表单的提交<code>button</code> <code>div</code>具有类<code>col-xs-5</code>的<code>div</code> 。这是我们目前为Cat Photo App所做的最后一项挑战。我们希望您喜欢学习Font Awesome，Bootstrap和响应式设计！ </section>
|
<section id='description'>
|
||||||
|
现在让我们把你表单里的 <code>input</code> 元素和 submit <code>button</code> （提交按钮）放在同一行。跟着之前的做法来就行：准备好一个具有 <code>row</code> class 的 <code>div</code> 元素还有几个具有 <code>col-xs-*</code> class 的 <code>div</code> 元素。
|
||||||
|
先把你表单的 text <code>input</code> （文本输入框）和 submit <code>button</code> （提交按钮）放进具有 <code>row</code> class 的 <code>div</code> 中。再用 <code>col-xs-7</code> class 的 div 包裹表单的 text <code>input</code> （文本输入框），<code>col-xs-5</code> class 的 div 包裹表单的 submit <code>button</code> （提交按钮）。
|
||||||
|
这是我们到目前为止 Cat Photo App 的最后一个挑战了。我希望你能喜欢 Font Awesome， Bootstrap，和响应式设计！
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -21,13 +26,13 @@ localeTitle: 使用Bootstrap响应表单元素
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 将表单提交按钮和文本输入嵌套在带有类<code>row</code>的div中。
|
- text: 确保提交按钮和文本输入框都在同一个具有 class 属性 <code>row</code> 的 div 元素中。
|
||||||
testString: assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0);
|
testString: assert($("div.row:has(input[type=\"text\"])").length > 0 && $("div.row:has(button[type=\"submit\"])").length > 0);
|
||||||
- text: 将表单文本输入嵌套在具有类<code>col-xs-7</code>的div中。
|
- text: 表单的文本输入框应该嵌入到具有 class 属性 <code>col-xs-7</code> 的 div 内。
|
||||||
testString: assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0);
|
testString: assert($("div.col-xs-7:has(input[type=\"text\"])").length > 0);
|
||||||
- text: 将表单提交按钮嵌套在具有类<code>col-xs-5</code>的div中。
|
- text: 表单的提交按钮应该嵌入到具有 class 属性 <code>col-xs-5</code> 的 div 内。
|
||||||
testString: assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0);
|
testString: assert($("div.col-xs-5:has(button[type=\"submit\"])").length > 0);
|
||||||
- text: 确保每个<code>div</code>元素都有一个结束标记。
|
- text: 确保每一个 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -112,7 +117,6 @@ tests:
|
|||||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -124,8 +128,85 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love:</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-7">
|
||||||
|
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-5">
|
||||||
|
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,20 @@
|
|||||||
id: bad87fee1348bd9acde08812
|
id: bad87fee1348bd9acde08812
|
||||||
title: Make Images Mobile Responsive
|
title: Make Images Mobile Responsive
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18232
|
||||||
localeTitle: 使图像移动响应
|
localeTitle: 使图片自适应移动端
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">首先，在现有图像下方添加新图像。将其<code>src</code>属性设置为<code>https://bit.ly/fcc-running-cats</code> 。如果这个图像可以正好是我们手机屏幕的宽度，那就太好了。幸运的是，使用Bootstrap，我们需要做的就是将<code>img-responsive</code>类添加到您的图像中。这样做，图像应完全适合您的页面宽度。 </section>
|
<section id='description'>
|
||||||
|
首先，在已有的图片下面添加一张新的图片. 设置 <code>src</code> 属性为 <code>https://bit.ly/fcc-running-cats</code>。
|
||||||
|
如果图片的大小恰恰和我们手机屏幕尺寸大小一样自然是最好的。
|
||||||
|
幸运的是现在通过 Bootstrap，我们仅仅只需要为 image 标签上设置 class 属性为 <code>img-responsive</code> 就可以让它完美的适应你页面的宽度了。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,15 +23,15 @@ localeTitle: 使图像移动响应
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你应该总共有两个图像。
|
- text: 该页面拥有总计两个图片。
|
||||||
testString: assert($("img").length === 2);
|
testString: assert($("img").length === 2);
|
||||||
- text: 您的新图像应该低于旧图像并且具有<code>img-responsive</code>类。
|
- text: 新的图片应该在旧的图片下面并且含有 class 属性 <code>img-responsive</code>。
|
||||||
testString: assert($("img:eq(1)").hasClass("img-responsive"));
|
testString: assert($("img:eq(1)").hasClass("img-responsive"));
|
||||||
- text: 您的新图片不应该具有<code>smaller-image</code>类。
|
- text: 新的图片不应该含有 class 属性 <code>smaller-image</code>。
|
||||||
testString: assert(!$("img:eq(1)").hasClass("smaller-image"));
|
testString: assert(!$("img:eq(1)").hasClass("smaller-image"));
|
||||||
- text: '您的新图片应该具有<code>https://bit.ly/fcc-running-cats</code>的<code>src</code> 。'
|
- text: 新图片的 <code>src</code> 属性应该为 <code>https://bit.ly/fcc-running-cats</code>。
|
||||||
testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats");
|
testString: assert($("img:eq(1)").attr("src") === "https://bit.ly/fcc-running-cats");
|
||||||
- text: 确保新的<code>img</code>元素具有关闭角括号。
|
- text: 确保新的 <code>img</code> 元素有一个闭合的右尖括号 “/>”。
|
||||||
testString: assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2);
|
testString: assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -95,7 +100,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -107,8 +111,64 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive">
|
||||||
|
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -5,15 +5,18 @@ required:
|
|||||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
||||||
raw: true
|
raw: true
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18269
|
||||||
localeTitle: 响应式样式复选框
|
localeTitle: 响应式风格的复选框
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">您也可以在<code>form</code>元素上使用Bootstrap的<code>col-xs-*</code>类！这样，无论屏幕分辨率有多宽，我们的复选框都会均匀分布在整个页面上。将所有三个复选框嵌套在<code><div class="row"></code>元素中。然后将它们嵌套在<code><div class="col-xs-4"></code>元素中。 </section>
|
<section id='description'>
|
||||||
|
你还可以将 Bootstrap 的 <code>col-xs-*</code> 用在 <code>form</code> 元素上!这样我们就可以在不关心屏幕大小的情况下，将我们的复选框均匀的放在页面上了。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
将所有复选框都放置于一个 <code><div class="row"></code> 元素中。然后分别把每个复选框都放置于一个 <code><div class="col-xs-4"></code> 元素中。
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -21,11 +24,11 @@ localeTitle: 响应式样式复选框
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 将所有复选框<code>div</code>带有类<code>row</code> <code>div</code> 。
|
- text: 将所有的复选框嵌入一个含有 <code>row</code> class 的 <code>div</code> 元素中。
|
||||||
testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0);
|
testString: assert($("div.row:has(input[type=\"checkbox\"])").length > 0);
|
||||||
- text: 使用类<code>col-xs-4</code>将每个复选框嵌入其自己的<code>div</code> 。
|
- text: 每一个复选框应该嵌套于自己的 <code>div</code> 元素中，每个 <code>div</code> 元素都具有 <code>col-xs-4</code> class。
|
||||||
testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2);
|
testString: assert($("div.col-xs-4:has(input[type=\"checkbox\"])").length > 2);
|
||||||
- text: 确保每个<code>div</code>元素都有一个结束标记。
|
- text: 确保所有 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -102,7 +105,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -114,8 +116,79 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love:</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -5,15 +5,20 @@ required:
|
|||||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
||||||
raw: true
|
raw: true
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18270
|
||||||
localeTitle: 响应样式单选按钮
|
localeTitle: 响应式风格的单选按钮
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">您也可以在<code>form</code>元素上使用Bootstrap的<code>col-xs-*</code>类！这样，无论屏幕分辨率有多宽，我们的单选按钮都会均匀分布在整个页面上。将您的单选按钮嵌套在<code><div class="row"></code>元素中。然后将它们嵌套在<code><div class="col-xs-6"></code>元素中。 <strong>注意：</strong>作为提醒，单选按钮是<code>radio</code>类型的<code>input</code>元素。 </section>
|
<section id='description'>
|
||||||
|
你还可以将 Bootstrap 的 <code>col-xs-*</code> class 用在 <code>form</code> 元素上！这样我们就可以在不关心屏幕大小的情况下，将我们的单选按钮均匀的平铺在页面上。
|
||||||
|
将你的所有单选按钮放入 <code><div class="row"></code> 元素。再用 <code><div class="col-xs-6"></code> 元素包裹每一个单选按钮。
|
||||||
|
<strong>记住：</strong> 提醒一句，单选按钮是 type 为 <code>radio</code> 的 <code>input</code> 元素。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -21,11 +26,11 @@ localeTitle: 响应样式单选按钮
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 将所有单选按钮<code>div</code>具有类<code>row</code>一个<code>div</code> 。
|
- text: 把所有的单选按钮放置于具有 <code>row</code> class 的 <code>div</code> 元素中。
|
||||||
testString: assert($("div.row:has(input[type=\"radio\"])").length > 0);
|
testString: assert($("div.row:has(input[type=\"radio\"])").length > 0);
|
||||||
- text: 使用类<code>col-xs-6</code>将每个单选按钮嵌套在自己的<code>div</code> 。
|
- text: 每一个单选按钮应该嵌套于 <code>div</code> 元素之中，该 <code>div</code> 元素的 class 属性为 <code>col-xs-6</code>。
|
||||||
testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1);
|
testString: assert($("div.col-xs-6:has(input[type=\"radio\"])").length > 1);
|
||||||
- text: 确保每个<code>div</code>元素都有一个结束标记。
|
- text: 确保所有 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -95,7 +100,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -107,8 +111,70 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love:</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,19 @@
|
|||||||
id: bad87fee1348bd9aec908847
|
id: bad87fee1348bd9aec908847
|
||||||
title: Split Your Bootstrap Row
|
title: Split Your Bootstrap Row
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18306
|
||||||
localeTitle: 拆分你的Bootstrap行
|
localeTitle: 分割你的 Bootstrap Row
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">现在我们有了一个Bootstrap Row，让我们把它分成两列来容纳我们的元素。使用类<code>col-xs-6</code>在行中创建两个<code>div</code>元素。 </section>
|
<section id='description'>
|
||||||
|
现在我们已经有了一个 Bootstrap Row，让我们把它分成两列来放置我们的元素。
|
||||||
|
在行内创建两个 class 属性为 <code>col-xs-6</code> 的 <code>div</code> 元素。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,9 +22,9 @@ localeTitle: 拆分你的Bootstrap行
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 在<code>div class="row"</code>元素中嵌套两个<code>div class="col-xs-6"</code>元素。
|
- text: "将两个 <code>div class='col-xs-6'</code> 元素内嵌入你的 <code>div class='row'</code> 元素中。"
|
||||||
testString: assert($("div.row > div.col-xs-6").length > 1);
|
testString: assert($("div.row > div.col-xs-6").length > 1);
|
||||||
- text: 确保所有<code>div</code>元素都有结束标记。
|
- text: 确保你的 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -40,7 +44,6 @@ tests:
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -52,8 +55,14 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6"></div>
|
||||||
|
<div class="col-xs-6"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -5,15 +5,20 @@ required:
|
|||||||
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
- link: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css'
|
||||||
raw: true
|
raw: true
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18312
|
||||||
localeTitle: 样式文本输入作为表单控件
|
localeTitle: 给表单控件的输入框添加样式
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">您可以通过在提交<code>button</code>元素中添加<code><i class="fa fa-paper-plane"></i></code>来添加<code>fa-paper-plane</code> Font Awesome图标。为表单的文本输入字段提供一组<code>form-control</code> 。给你的表单提交按钮<code>btn btn-primary</code> 。同时为此按钮提供<code>fa-paper-plane</code>的Font Awesome图标。具有类<code>.form-control</code>所有文本<code><input></code> ， <code><textarea></code>和<code><select></code>元素的宽度均为100％。 </section>
|
<section id='description'>
|
||||||
|
你可以通过在 submit <code>button</code> 内加上 <code><i class="fa fa-paper-plane"></i></code> 来添加 Font Awesome 的 <code>fa-paper-plane</code> 图标。
|
||||||
|
为表单的文本输入框（text input）设置 <code>form-control</code> class。为表单的提交（submit）按钮设置 <code>btn btn-primary</code> class，并为它加上 Font Awesome 的 <code>fa-paper-plane</code> 图标。
|
||||||
|
所有文本输入类的元素如 <code><input></code>，<code><textarea></code> 和 <code><select></code> 只要设置 <code>.form-control</code> class 就会占满100%的宽度。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -21,13 +26,13 @@ localeTitle: 样式文本输入作为表单控件
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 在表单中提交<code>btn btn-primary</code>类的提交按钮。
|
- text: 给你的 submit 按钮添加 <code>btn btn-primary</code> class。
|
||||||
testString: assert($("button[type=\"submit\"]").hasClass("btn btn-primary"));
|
testString: assert($("button[type=\"submit\"]").hasClass("btn btn-primary"));
|
||||||
- text: 在提交<code>button</code>元素中添加<code><i class="fa fa-paper-plane"></i></code> 。
|
- text: "在你的 submit <code>button</code> 元素嵌入 <code><i class='fa fa-paper-plane'></i></code>。"
|
||||||
testString: assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0);
|
testString: assert($("button[type=\"submit\"]:has(i.fa.fa-paper-plane)").length > 0);
|
||||||
- text: 在表单中<code>input</code>文本<code>input</code>类<code>form-control</code> 。
|
- text: 给表单中的 text <code>input</code> 元素添加 <code>form-control</code> class。
|
||||||
testString: assert($("input[type=\"text\"]").hasClass("form-control"));
|
testString: assert($("input[type=\"text\"]").hasClass("form-control"));
|
||||||
- text: 确保每个<code>i</code>元素都有一个结束标记。
|
- text: 确保每一个 <code>i</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
|
testString: assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -112,7 +117,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -124,8 +128,79 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-8">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love:</span></p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,20 @@
|
|||||||
id: bad87fee1348cd8acef08811
|
id: bad87fee1348cd8acef08811
|
||||||
title: Taste the Bootstrap Button Color Rainbow
|
title: Taste the Bootstrap Button Color Rainbow
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18323
|
||||||
localeTitle: 品尝Bootstrap按钮彩虹
|
localeTitle: 体验 Bootstrap 彩虹色的按钮
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> <code>btn-primary</code>类是您将在应用中使用的主要颜色。它可用于突出显示您希望用户执行的操作。在按钮中用<code>btn-primary</code>替换Bootstrap的<code>btn-default</code>类。请注意，此按钮仍需要<code>btn</code>和<code>btn-block</code>类。 </section>
|
<section id='description'>
|
||||||
|
<code>btn-primary</code> class 的颜色是你在应用中的主题色。这样 “突出显示” 是引导用户按步就班进行操作的有效办法。
|
||||||
|
将按钮的 class 从 Bootstrap 的 <code>btn-default</code> 替换为 <code>btn-primary</code>。
|
||||||
|
记住：你的按钮仍然需要 <code>btn</code> 和 <code>btn-block</code> class。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,11 +23,11 @@ localeTitle: 品尝Bootstrap按钮彩虹
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你的按钮应该有<code>btn-primary</code>类。
|
- text: 按钮的 class 属性应该有 <code>btn-primary</code>。
|
||||||
testString: assert($("button").hasClass("btn-primary"));
|
testString: assert($("button").hasClass("btn-primary"));
|
||||||
- text: 你的按钮应该仍然有<code>btn</code>和<code>btn-block</code>类。
|
- text: 按钮的 class 属性应该仍有 <code>btn</code> 和 <code>btn-block</code>。
|
||||||
testString: assert($("button").hasClass("btn-block") && $("button").hasClass("btn"));
|
testString: assert($("button").hasClass("btn-block") && $("button").hasClass("btn"));
|
||||||
- text: 确保所有<code>button</code>元素都有一个结束标记。
|
- text: 确保所有 <code>button</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -93,7 +98,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -105,8 +109,65 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<button class="btn btn-primary btn-block">Like</button>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,25 @@
|
|||||||
id: bad87fee1348bd9aedf08845
|
id: bad87fee1348bd9aedf08845
|
||||||
title: Use a span to Target Inline Elements
|
title: Use a span to Target Inline Elements
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18370
|
||||||
localeTitle: 使用跨度来定位内联元素
|
localeTitle: 使用 span 创建行内元素
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">您可以使用跨度来创建内联元素。还记得我们使用<code>btn-block</code>类使按钮填满整行吗？ <button class="btn" style="background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);">普通按钮</button> <button class="btn btn-block" style="background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);">btn-block按钮</button>说明“内联”元素和“块”元素之间的区别。通过使用内联<code>span</code>元素，您可以将多个元素放在同一行上，甚至可以不同地为同一行的不同部分设置样式。在<code>span</code>元素中的“Things cats love”元素中嵌入“love”这个词。然后给出<code>span</code>类<code>text-danger</code>以使文本变为红色。以下是你如何使用“猫讨厌的三件事”元素： <code><p>Top 3 things cats <span class="text-danger">hate:</span></p></code> </section>
|
<section id='description'>
|
||||||
|
你可以使用 span 标签来创建行内元素。还记得我们怎么使用 <code>btn-block</code> class 来创建填满整行的按钮吗？
|
||||||
|
<button class='btn' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>normal button</button>
|
||||||
|
<button class='btn btn-block' style='background-color: rgb(0, 100, 0); color: rgb(255, 255, 255);'>btn-block button</button>
|
||||||
|
上面的例子就是 "inline" （行内）元素和 "block" （块级）元素的区别。
|
||||||
|
通过使用行内元素 <code>span</code>，你可以把不同的元素放在同一行，甚至能为一个元素的不同部分指定样式。
|
||||||
|
把 "Things cats love" 中的 "love" 放入 <code>span</code> 标签。然后为其添加 <code>text-danger</code> class 来使其文字变成红色。
|
||||||
|
"Top 3 things cats hate" 元素的写法如下：
|
||||||
|
<code><p>Top 3 things cats <span class="text-danger">hate:</span></p></code>
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +28,13 @@ localeTitle: 使用跨度来定位内联元素
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你的<code>span</code>元素应该在你的<code>p</code>元素中。
|
- text: <code>span</code> 元素应该在 <code>p</code> 元素内。
|
||||||
testString: assert($("p span") && $("p span").length > 0);
|
testString: assert($("p span") && $("p span").length > 0);
|
||||||
- text: 你的<code>span</code>元素应该只有文字<code>love</code> 。
|
- text: <code>span</code> 元素应该只含有文本 <code>love</code>。
|
||||||
testString: assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i));
|
testString: assert($("p span") && $("p span").text().match(/love/i) && !$("p span").text().match(/Things cats/i));
|
||||||
- text: 你的<code>span</code>元素应该有class <code>text-danger</code> 。
|
- text: <code>span</code> 元素应该含有 class <code>text-danger</code>。
|
||||||
testString: assert($("span").hasClass("text-danger"));
|
testString: assert($("span").hasClass("text-danger"));
|
||||||
- text: 确保您的<code>span</code>元素具有结束标记。
|
- text: 确保你的 <code>span</code> 元素有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/span>/g) && code.match(/<span/g) && code.match(/<\/span>/g).length === code.match(/<span/g).length);
|
testString: assert(code.match(/<\/span>/g) && code.match(/<span/g) && code.match(/<\/span>/g).length === code.match(/<span/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -92,7 +102,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -104,8 +113,62 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary">Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>Things cats <span class="text-danger">love</span>:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,21 @@
|
|||||||
id: bad87fee1348bd9aec908857
|
id: bad87fee1348bd9aec908857
|
||||||
title: Use Comments to Clarify Code
|
title: Use Comments to Clarify Code
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18347
|
||||||
localeTitle: 使用注释来澄清代码
|
localeTitle: 使用注释来说明代码
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">当我们开始使用jQuery时，我们将修改HTML元素，而无需在HTML中实际更改它们。让我们确保每个人都知道他们不应该直接修改任何代码。请记住，您可以使用<code><!--</code>开始发表评论并使用<code>--></code>在HTML顶部添加评论“ <code>Only change code above this line.</code> </section>
|
<section id='description'>
|
||||||
|
当我们开始使用 jQuery，我们将修改HTML元素，但是实际上我们并不是直接在 HTML 文本中修改。
|
||||||
|
我们必须确保让每个人都知道，他们不应该直接修改此页面上这些代码。
|
||||||
|
记住，你可以在 <code><!--</code> 为开始，<code>--></code> 为结束的地方进行评论注释（像这样，<code><!-- 我是一段注释 --></code>）。
|
||||||
|
请你在你的 HTML 顶部加如下一段注释： <code>Only change code above this line.</code> 。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +24,13 @@ localeTitle: 使用注释来澄清代码
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 在HTML的顶部用<code><!--</code>开始评论。
|
- text: 在添加注释前，在你的 HTML 顶部增加此代码 <code><!--</code>。
|
||||||
testString: assert(code.match(/^\s*<!--/));
|
testString: assert(code.match(/^\s*<!--/));
|
||||||
- text: 您的评论应该包含<code>Only change code above this line</code>的文本。
|
- text: 注释内容应该为 <code>Only change code above this line</code>。
|
||||||
testString: assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
testString: assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
|
||||||
- text: 请务必使用<code>--></code>关闭您的评论。
|
- text: 注释应该用 <code>--></code> 进行闭合。
|
||||||
testString: assert(code.match(/-->.*\n+.+/g));
|
testString: assert(code.match(/-->.*\n+.+/g));
|
||||||
- text: 你应该有相同数量的评论开启者和关闭者。
|
- text: 注意，注释的开始标签和闭合标签数量应该一一对应，保持数量一致。
|
||||||
testString: assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
testString: assert(code.match(/<!--/g).length === code.match(/-->/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -58,7 +64,6 @@ tests:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -70,8 +75,29 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<!-- Only change code above this line. -->
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#left-well</h4>
|
||||||
|
<div class="well" id="left-well">
|
||||||
|
<button class="btn btn-default target" id="target1">#target1</button>
|
||||||
|
<button class="btn btn-default target" id="target2">#target2</button>
|
||||||
|
<button class="btn btn-default target" id="target3">#target3</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-6">
|
||||||
|
<h4>#right-well</h4>
|
||||||
|
<div class="well" id="right-well">
|
||||||
|
<button class="btn btn-default target" id="target4">#target4</button>
|
||||||
|
<button class="btn btn-default target" id="target5">#target5</button>
|
||||||
|
<button class="btn btn-default target" id="target6">#target6</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,24 @@
|
|||||||
id: bad87fee1348bd9acde08712
|
id: bad87fee1348bd9acde08712
|
||||||
title: Use Responsive Design with Bootstrap Fluid Containers
|
title: Use Responsive Design with Bootstrap Fluid Containers
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18362
|
||||||
localeTitle: 使用具有Bootstrap Fluid Containers的响应式设计
|
localeTitle: 使用 Fluid 容器实现响应式设计
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description">在freeCodeCamp的HTML5和CSS部分，我们构建了一个Cat Photo App。现在让我们回到它。这一次，我们将使用流行的Bootstrap响应式CSS框架来设计它。 Bootstrap将通过调整HTML元素的大小来确定屏幕的宽度和响应 - 因此称为<code>Responsive Design</code> 。通过响应式设计，您无需设计网站的移动版本。在具有任何宽度的屏幕的设备上看起来都很好。您可以通过将以下代码添加到HTML顶部来将Bootstrap添加到任何应用程序： <code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/></code>在这种情况下，我们已经在幕后为您添加了这个页面。请注意，使用<code>></code>或<code>/></code>关闭<code>link</code>标记是可以接受的。首先，我们应该将所有HTML（ <code>link</code>标签和<code>style</code>元素除外）嵌套在带有<code>container-fluid</code>类的<code>div</code>元素<code>container-fluid</code> 。 </section>
|
<section id='description'>
|
||||||
|
之前，在 freeCodeCamp 的 HTML5 和 CSS 章节中我们构建了一个 Cat Photo App。这次我们将会使用最受欢迎的响应式 CSS 框架 Bootstrap 来美化它。
|
||||||
|
Bootstrap 会根据你的屏幕大小来调节 HTML 元素的大小————因此称为 <code>Responsive Design</code>（响应式设计）。
|
||||||
|
通过响应式设计，我们将无需额外设计一个手机版的网页，因为它在任何尺寸的屏幕上看起来都还不错。
|
||||||
|
无论开发什么应用，你都可以通过将以下代码添加到你的 HTML 顶部来引入 Bootstrap 。
|
||||||
|
<code><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/></code>
|
||||||
|
在该案例中，我们已经帮你把相应代码添加到页面中。记住使用 <code>></code> 和 <code>/></code> 闭合 <code>link</code> 标签来保证引入成功。
|
||||||
|
首先，我们应该把所有 HTML 标签放在 class 为 <code>container-fluid</code> 的 <code>div</code> 元素下（除了 <code>link</code> 标签和 <code>style</code> 标签）。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,11 +27,11 @@ localeTitle: 使用具有Bootstrap Fluid Containers的响应式设计
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 你的<code>div</code>元素应该有class <code>container-fluid</code> 。
|
- text: <code>div</code> 元素的 class 属性应该为 <code>container-fluid</code>。
|
||||||
testString: assert($("div").hasClass("container-fluid"));
|
testString: assert($("div").hasClass("container-fluid"));
|
||||||
- text: 确保你的<code>div</code>元素有一个结束标记。
|
- text: 确保你的 <code>div</code> 元素有闭合标签.
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
- text: 确保在<code>.container-fluid</code>的结束<code>style</code>标记之后嵌套了所有HTML元素。
|
- text: 确保你已经将所有 HTML 元素内嵌在闭合的 <code>style</code> 标签后的 <code>.container-fluid</code> 元素中。
|
||||||
testString: assert($(".container-fluid").children().length >= 8);
|
testString: assert($(".container-fluid").children().length >= 8);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -89,7 +98,6 @@ tests:
|
|||||||
<input type="text" placeholder="cat photo URL" required>
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -101,8 +109,62 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,23 @@
|
|||||||
id: bad88fee1348ce8acef08815
|
id: bad88fee1348ce8acef08815
|
||||||
title: Use the Bootstrap Grid to Put Elements Side By Side
|
title: Use the Bootstrap Grid to Put Elements Side By Side
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18371
|
||||||
localeTitle: 使用Bootstrap网格并排放置元素
|
localeTitle: 使用 Bootstrap 网格并排放置元素
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Bootstrap使用响应式12列网格系统，可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap的大多数类都可以应用于<code>div</code>元素。 Bootstrap具有不同的列宽属性，具体取决于用户屏幕的宽度。例如，手机屏幕较窄，笔记本电脑屏幕较宽。以Bootstrap的<code>col-md-*</code>类为例。这里， <code>md</code>表示中等， <code>*</code>是指定元素应该有多少列的数字。在这种情况下，正在指定中型屏幕（例如笔记本电脑）上的元素的列宽。在我们正在构建的Cat照片应用程序中，我们将使用<code>col-xs-*</code> ，其中<code>xs</code>表示超小（如超小型手机屏幕）， <code>*</code>是指示列宽多少列的列数元素应该是。通过将所有三个嵌套在一个<code><div class="row"></code>元素中，然后将它们中的每一个<code><div class="col-xs-4"></code>元素中，将<code>Like</code> ， <code>Info</code>和<code>Delete</code>按钮并排放置。 <code>row</code>类应用于<code>div</code> ，按钮本身可以嵌套在其中。 </section>
|
<section id='description'>
|
||||||
|
Bootstrap 具有一套基于 12 列的响应式栅格系统————可以轻松实现将多个元素放入一行并指定它们的相对宽度。 Bootstrap 的大部分 class 属性都可以应用在 <code>div</code> 元素上。
|
||||||
|
Bootstrap 的列宽度属性取决于用户的屏幕宽度。 比如，手机有着窄屏幕而笔记本电脑有者更大的屏幕.
|
||||||
|
就拿 Bootstrap 的 <code>col-md-*</code> class 来说。 在这里， <code>md</code> 表示 medium （中等的）， 而 <code>*</code> 是一个数字，说明了这个元素占有多少个列宽度。这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。
|
||||||
|
在我们创建的 Cat Photo App 中，我们将使用 <code>col-xs-*</code> ， 其中 <code>xs</code> 是 extra small 的缩写 (应用于较小的屏幕，比如手机屏幕)， <code>*</code> 是你填写的数字，代表一行中，你的元素该占多少列宽。
|
||||||
|
将我们的 <code>Like</code>, <code>Info</code> 和 <code>Delete</code> 三个按钮并排放入一个 <code><div class="row"></code> 元素中，然后每个按钮都各用一个 <code><div class="col-xs-4"></code> 元素包裹起来。
|
||||||
|
当 <code>div</code> 元素设置了 <code>row</code> class 之后，那几个按钮便会嵌入其中了。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +26,13 @@ localeTitle: 使用Bootstrap网格并排放置元素
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 您的按钮应全部嵌套在具有类<code>row</code>的同一<code>div</code>元素中。
|
- text: 所有按钮都需要嵌入到同一个 <code>div</code> 元素中， 并且该元素包含 class 属性 <code>row</code>。
|
||||||
testString: assert($("div.row:has(button)").length > 0);
|
testString: assert($("div.row:has(button)").length > 0);
|
||||||
- text: 每个Bootstrap按钮都应嵌套在自己的<code>div</code>元素中，类别为<code>col-xs-4</code> 。
|
- text: 每个 Bootstrap 按钮都需要嵌入各自的 <code>div</code> 元素，并且该元素包含 class 属性 <code>col-xs-4</code>。
|
||||||
testString: assert($("div.col-xs-4:has(button)").length > 2);
|
testString: assert($("div.col-xs-4:has(button)").length > 2);
|
||||||
- text: 确保每个<code>button</code>元素都有一个结束标记。
|
- text: 确保每一个 <code>button</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||||
- text: 确保每个<code>div</code>元素都有一个结束标记。
|
- text: 确保每一个 <code>div</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g) && code.match(/<\/div>/g).length === code.match(/<div/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -97,7 +105,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -109,8 +116,76 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-primary">Like</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-4">
|
||||||
|
<button class="btn btn-block btn-danger">Delete</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
@ -2,15 +2,20 @@
|
|||||||
id: bad87fee1348ce8acef08814
|
id: bad87fee1348ce8acef08814
|
||||||
title: Warn Your Users of a Dangerous Action with btn-danger
|
title: Warn Your Users of a Dangerous Action with btn-danger
|
||||||
challengeType: 0
|
challengeType: 0
|
||||||
videoUrl: ''
|
forumTopicId: 18375
|
||||||
localeTitle: 用btn-danger警告你的危险行为用户
|
localeTitle: 使用 btn-danger 提示危险操作
|
||||||
---
|
---
|
||||||
|
|
||||||
## Description
|
## Description
|
||||||
<section id="description"> Bootstrap带有几种预定义的按钮颜色。 <code>btn-danger</code>类是用于通知用户按钮执行破坏性操作的按钮颜色，例如删除猫照片。创建一个带有“删除”文本的按钮，并为其提供类<code>btn-danger</code> 。请注意，这些按钮仍然需要<code>btn</code>和<code>btn-block</code>类。 </section>
|
<section id='description'>
|
||||||
|
Bootstrap 有着丰富的预定义按钮颜色。 红色 <code>btn-danger</code> class 用来提醒用户此行为具有破坏性，比如删除一张猫的图片。
|
||||||
|
创建一个包含文本 "Delete" 的按钮并为它设置 class 为 <code>btn-danger</code>。
|
||||||
|
记住：你的这些按钮仍然需要 <code>btn</code> 和 <code>btn-block</code> class。
|
||||||
|
</section>
|
||||||
|
|
||||||
## Instructions
|
## Instructions
|
||||||
<section id="instructions">
|
<section id='instructions'>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
@ -18,13 +23,13 @@ localeTitle: 用btn-danger警告你的危险行为用户
|
|||||||
|
|
||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 创建一个带有“删除”文本的新<code>button</code>元素。
|
- text: "创建一个包含文本 'Delete' 的 <code>button</code> 元素。"
|
||||||
testString: assert(new RegExp("Delete","gi").test($("button").text()));
|
testString: assert(new RegExp("Delete","gi").test($("button").text()));
|
||||||
- text: 你的所有Bootstrap按钮都应该有<code>btn</code>和<code>btn-block</code>类。
|
- text: 所有 Bootstrap 按钮的 class 属性都应该有 <code>btn</code> 和 <code>btn-block</code>。
|
||||||
testString: assert($("button.btn-block.btn").length > 2);
|
testString: assert($("button.btn-block.btn").length > 2);
|
||||||
- text: 你的新按钮应该有类<code>btn-danger</code> 。
|
- text: 新创建按钮的 class 属性应该有 <code>btn-danger</code>。
|
||||||
testString: assert($("button").hasClass("btn-danger"));
|
testString: assert($("button").hasClass("btn-danger"));
|
||||||
- text: 确保所有<code>button</code>元素都有一个结束标记。
|
- text: 确保你所有的 <code>button</code> 元素都有一个闭合标签。
|
||||||
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
testString: assert(code.match(/<\/button>/g) && code.match(/<button/g) && code.match(/<\/button>/g).length === code.match(/<button/g).length);
|
||||||
|
|
||||||
```
|
```
|
||||||
@ -96,7 +101,6 @@ tests:
|
|||||||
<button type="submit">Submit</button>
|
<button type="submit">Submit</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -108,8 +112,67 @@ tests:
|
|||||||
## Solution
|
## Solution
|
||||||
<section id='solution'>
|
<section id='solution'>
|
||||||
|
|
||||||
```js
|
```html
|
||||||
// solution required
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||||
|
<style>
|
||||||
|
.red-text {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-family: Lobster, Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: Monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thick-green-border {
|
||||||
|
border-color: green;
|
||||||
|
border-width: 10px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smaller-image {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container-fluid">
|
||||||
|
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||||
|
|
||||||
|
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||||
|
|
||||||
|
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||||
|
|
||||||
|
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||||
|
<button class="btn btn-block btn-primary">Like</button>
|
||||||
|
<button class="btn btn-block btn-info">Info</button>
|
||||||
|
<button class="btn btn-block btn-danger">Delete</button>
|
||||||
|
<p>Things cats love:</p>
|
||||||
|
<ul>
|
||||||
|
<li>cat nip</li>
|
||||||
|
<li>laser pointers</li>
|
||||||
|
<li>lasagna</li>
|
||||||
|
</ul>
|
||||||
|
<p>Top 3 things cats hate:</p>
|
||||||
|
<ol>
|
||||||
|
<li>flea treatment</li>
|
||||||
|
<li>thunder</li>
|
||||||
|
<li>other cats</li>
|
||||||
|
</ol>
|
||||||
|
<form action="/submit-cat-photo">
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||||
|
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Loving</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||||
|
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||||
|
<input type="text" placeholder="cat photo URL" required>
|
||||||
|
<button type="submit">Submit</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
/section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user