Front End Development Libraries(一)
freeCodeCamp —- Front End Development Libraries
Bootstrap
1. 使用Bootstrap Fluid 容器实现响应式设计
Bootstrap 会根据屏幕大小来动态调整 HTML 元素的大小————因此称为 Responsive Design（响应式设计）。
通过响应式设计，我们将无需额外设计一个手机版的网页， 因为它在任何尺寸的屏幕上看起来都很棒。
任何 Web 应用，都可以通过添加如下代码到 HTML 顶部来引入 Bootstrap 。
1 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> |
不过在这里，已经预先为此页面添加了上述代码。 注意使用 > 或者 /> 两种方式闭合 link 标签都是可行的。
首先，我们应该将所有 HTML（ link 标签和 style 元素除外）嵌套在带有 container-fluid class 的 div 元素里面。
2. 使图片自适应移动端
首先，在已有的图片下面添加一张新的图片。 将新图片的 src 属性设置为 https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg。
如果图片的大小恰恰和我们手机屏幕尺寸大小一样自然是最好的。
幸运的是，现在通过 Bootstrap，我们仅仅只需要为 image 标签上设置 class 属性为 img-responsive ， 就可以让它完美地适应你的页面的宽度了。
3. 用 Bootstrap 居中文本
可以使用 Bootstrap 将顶部的元素居中来美化页面。 只需要将 h2 元素的 class 属性设置为 text-center 就可以实现。
记住：可以为一个元素添加多个 classes ，class 间通过空格分隔，就像这样：
1 | <h2 class="red-text text-center">your text</h2> |
4. 创建一个 Bootstrap 按钮
Bootstrap 的 button 元素有着独有的、比默认 HTML 按钮更好的样式风格。
在较大的小猫图片下方创建新的 button 元素。 为它添加 btn 与 btn-default 两个 classes 和 Like 文本。
5. 创建一个 Bootstrap 块级元素按钮
一般情况下，btn 和 btn-default 两个 classes 修饰的 button 元素宽度与它包含的文本相同， 举个例子：
1 | <button class="btn btn-default">Submit</button> |
这个按钮的宽度应该和文本 Submit 的宽度相同。
提交
通过为按钮添加 class 属性 btn-block 使其成为块级元素，按钮会伸展并填满页面的整个水平空间，后续的元素会流到这个块级元素的下方，即 “另起一行”。
1 | <button class="btn btn-default btn-block">Submit</button> |
这个按钮会 100% 占满所有的可用宽度。
6. 体验 Bootstrap 按钮的不同主题
btn-primary class 的颜色是应用的主要颜色。 这样 “突出显示” 是引导用户按部就班进行操作的有效办法。
将按钮的 class 从 Bootstrap 的 btn-default 替换为 btn-primary。
注意：按钮仍然需要 btn 和 btn-block classes。
7. 可选操作样式 btn-info
Bootstrap 有着丰富的预定义按钮颜色。 浅蓝色的 btn-info class 通常用在备选操作上。
在 Like 按钮下方使用文本 Info 创建一个新的块级 Bootstrap 按钮，并向其中添加 Bootstrap 的 btn-info 类。
注意：这些按钮仍然需要 btn 和 btn-block class。
8. 使用 btn-danger 提示危险操作
Bootstrap 有着丰富的预定义按钮颜色。 红色 btn-danger class 用来提醒用户此行为具有破坏性，比如删除一张猫的图片。
创建一个带有文本 Delete 的按钮，给它设置 class btn-danger。
注意：这些按钮仍然需要 btn 和 btn-block class。
9. 使用 Bootstrap Grid 并排放置元素
Bootstrap 具有一套 12 列的响应式栅格系统，可以轻松地将多个元素放入一行并指定它们的相对宽度。 Bootstrap 的大部分 class 属性都可以应用在 div 元素上。
Bootstrap 有不同的列宽属性，它根据用户的屏幕宽度来使用相应的宽度。 比如，手机的屏幕窄，而笔记本电脑的屏幕更宽。
以 Bootstrap 的 col-md-* class 为例， 在这里， md 表示 medium （中等的）， 而 * 是一个数字，说明了这个元素占有多少个列宽度。 这个例子就是指定了中等大小屏幕（例如笔记本电脑）下元素所占的列宽度。
在 Cat Photo App 中，将使用 col-xs-* ， 其中 xs 是 extra small 的缩写 (比如窄屏手机屏幕)， * 是填写的数字，代表一行中的元素该占多少列宽。
将 Like、Info 和 Delete 三个按钮并排放入一个 <div class="row"> 元素中，然后将每个按钮都各用一个 <div class="col-xs-4"> 元素包裹起来。
当 div 元素设置了 row class 之后，那几个按钮便会嵌入其中了。
10. 替换自定义的 Bootstrap 样式
现在可以清理一下之前代码，用 Bootstrap 的内置样式来替换之前定义的样式，这样 Cat Photo App 看起来更简洁些。
别担心——以后会有大把时间来自定义 CSS 样式的。
删除 style 元素里的 .red-text、p 和 .smaller-image CSS 声明，使 style 元素只留下 h2 和 thick-green-border。
删除包含死链接的 p 元素。 然后将 h2 的 red-text class 替换为 Bootstrap 的 text-primary class。
最后，从第一个 img 元素中删除 smaller-image class，并将其替换为 img-responsive class。
11. 使用 span 创建行内元素
通过使用行内元素 span，可以把不同的元素放在同一行，甚至能为一行的不同部分指定不同样式。
使用一个 span 元素，将文本 love 嵌入现在包含文本 Things cats love 的 p 元素中。 然后给 span 元素设置 class text-danger，使文本变成红色。
对含有文本 Top 3 things cats hate 的 p 元素这样处理：
1 | <p>Top 3 things cats <span class="text-danger">hate:</span></p> |
12. 创建自定义标题
为 Cat Photo App 做一个简单的头部，把标题和惬意的猫咪图片放在同一行。
记住，由于 Bootstrap 使用了响应式栅格系统，可以很方便地把元素放到一行以及指定元素的相对宽度。 大部分的 Bootstrap 的 class 都能被用在 div 元素上。
把第一张图片和 h2 元素用一个简单的 <div class="row"> 元素包裹起来。 再用 <div class="col-xs-8"> 包裹 h2 元素，用 <div class="col-xs-4"> 包裹我们的图片，这样它们就能位于同一行了。
注意现在图片是否与文字大小一致呢？
13. 在按钮中添加字体图标
Font Awesome 是一个非常便利的图标库。 我们可以通过 webfont 或矢量图的方式来使用这些图标。 这些图标就和字体一样， 不仅能通过像素单位指定它们的大小，它们也同样会继承父级 HTML 元素的字号。
可以将 Font Awesome 图标库添加至任何一个 web app 中，方法很简单，只需要在 HTML head 标签中添加以下代码即可：
1 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> |
在这个挑战中，我们已经为你在页面上添加好了 Font Awesome 图标库。
i 元素原本是用来表示斜体文字内容的；不过现在，用它来表示图标也很常见。 只需要为 i 元素添加相应的 class 就可以让它展示图标，比如：
1 | <i class="fas fa-info-circle"></i> |
同时，我们也可以使用 span 元素来展示图标。
请使用 Font Awesome 来为我们的点赞按钮添加一个 thumbs-up 图标，只需添加一个 class 包含 fas 和 fa-thumbs-up 的 i 元素即可。 同时，请记得保留图标之后的文字内容 Like。
14.将字体图标添加到所有的按钮上
为 info 按钮添加 Font Awesome info-circle 图标，delete 按钮添加 trash 图标。
Note: You can use either i or span elements to complete this challenge.
15. 响应式风格的单选按钮
Bootstrap 的 col-xs-* class 也可以用在 form 元素上！ 这样就可以在不关心屏幕大小的情况下，将的单选按钮均匀的平铺在页面上。
将所有单选按钮放入 <div class="row"> 元素中。 再用 <div class="col-xs-6"> 元素包裹每一个单选按钮。
注意： 提醒一句，单选按钮是 type 为 radio 的 input 元素。
16. 响应式风格的复选框
Bootstrap 的 col-xs-* 可应用于所有的 form 元素上，包括复选框！ 这样就可以不必关注屏幕大小，均匀地把复选框放在页面上了。
将所有三个复选框都放置于一个 <div class="row"> 元素中。 然后分别把每个复选框都放置于一个 <div class="col-xs-4"> 元素中。
17. 给表单输入框添加样式
可以在 submit button 元素内加上 <i class="fa fa-paper-plane"></i>，来添加 Font Awesome 的 fa-paper-plane 图标。
为表单的文本输入框（text input）设置 form-control class。 为表单的提交（submit）按钮设置 btn btn-primary class， 并为它加上 Font Awesome 的 fa-paper-plane 图标。
所有文本输入类的元素如 <input>，<textarea> 和 <select> 只要设置 .form-control class 就会占满100%的宽度。
18. 使用 Bootstrap 响应式排列表单元素
现在把表单里的 input 元素和 submit button （提交按钮）放在同一行。 跟着之前的做法来就行：准备好一个具有 row class 的 div 元素还有几个具有 col-xs-* class 的 div 元素。
先把表单的 text input （文本输入框）和 submit button （提交按钮）放进具有 row class 的 div 中。 再用 col-xs-7 class 的 div 包裹表单的 text input （文本输入框）， col-xs-5 class 的 div 包裹表单的 submit button （提交按钮）。
这是我们到目前为止 Cat Photo App 的最后一个挑战了。 祝你编码愉快。
1 | <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> |
19. 创建一个 Bootstrap 标题
现在，来运用 HTML、CSS 和 Bootstrap 从头开始做点东西。
接下来将会搭建一个 jQuery playground，以便在后续的 jQuery 课程中使用它。
首先，创建一个包含 jQuery Playground 文本内容的 h3 元素。
通过给 h3 元素设置 Bootstrap 的 text-primary class 属性来为其上色，然后添加 Bootstrap 的 text-center class 属性使其文本居中显示。
20. 将页面放在 container-fluid div 中
现在确保页面所有内容都可以响应移动端。
将的 h3 元素内嵌进一个具有 container-fluid class 的div 元素中。
21. 将页面放在 container-fluid div 中
现在确保页面所有内容都可以响应移动端。
将的 h3 元素内嵌进一个具有 container-fluid class 的div 元素中。
22. 分割 Bootstrap Row
现在已经有了一个 Bootstrap Row，把它分成两列。
在行内创建两个 class 属性为 col-xs-6 的 div 元素。
23. 创建 Bootstrap Wells
Bootstrap 有一个叫作 well 的 class，作用是使界面更具层次感。
在每一个 class 属性为 col-xs-6 的 div 元素中都嵌入一个带有 well class 的 div 元素。
24. 在 Bootstrap Wells 中添加元素
现在的每一行的列都已经有了 div 元素。 这已经足够了， 现在让我们添加 button 元素吧。
每一个 class 属性为 well 的 div 元素内都应该放三个 button 元素。
25. 给 Bootstrap 按钮添加默认样式
Bootstrap 还有另外一种按钮 class 属性叫做 btn-default。
为所有的 button 元素增加两个 class： btn 和 btn-default。
26. 用 jQuery 选择器给目标元素的添加 class
并不是所有 class 属性都需要有对应的 CSS 样式。 有时候我们设置 class 只是为了更方便地在 jQuery 中选中这些元素。
为每一个 button 元素添加 target class。
27. 给 Bootstrap 元素添加 id 属性
回忆一下，除了可以给元素添加 class 属性，我们还可以给元素设置 id 属性。
每个元素的 id 都必须是唯一的，并且在一个页面中只能使用一次。
让我们为每个 class 为 well 的 div 元素添加一个唯一的 id。
记住，可以这样给一个元素设置 id：
1 | <div class="well" id="center-well"> |
给左边的块设置 id 为 left-well。 给右边的块设置 id 为 right-well。
28. 给 Bootstrap Wells 设置标签
为了让页面逻辑更清晰，每个 wells 都标上它们的 id 吧。
在 left-well 的上一层，class 属性为 col-xs-6 的 div 元素里面，增加一个文本为 #left-well 的 h4 元素。
在 right-well 的上一层，class 属性为 col-xs-6 的 div 元素里面，增加一个文本为 #right-well 的 h4 元素。
29. 给每个元素一个唯一的 id
也可以通过 jQuery 根据每个按钮唯一的 id 来定位出它们。
给每一个按钮设置唯一的 id，以 target1 开始，target6 结束。
确保 target1 到 target3 在 #left-well 之中，target4 到 target6 在 #right-well 之中。
30. 给 Bootstrap 按钮设置标签
正如标注了每个 wells 一样，同样可以标注每一个按钮。
为每个 button 元素设置与其 id 选择器对应的文本。
31. 使用注释来说明代码
使用 jQuery 时，修改 HTML 元素时并不需要直接修改 HTML 代码。
必须确保让每个人都知道不应该直接修改此页面上的这些代码。
记住，可以在 <!-- 为开始，--> 为结束的地方进行评论注释。
请你在 HTML 顶部加如下一段注释： Code below this line should not be changed 。
1 | <!--Code below this line should not be changed--> |