W3CSchool闯关笔记(Bootstrap)

该闯关内容与JS闯关衔接.

每一题的答案均在注释处,

第一关:把所有的HTML内容放在一个包含有container-fluid的class名称的div下(注意,是所有的HTML内容,style标签属于CSS,为了代码可读性尽量不要把style标签内容放在div内,需要添加代码的地方已经用注释标注出来了)

 <link href="//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起始标签-->
 <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="/statics/codecamp/images/relaxing-cat.jpg"></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闭合标签-->
 </div>      

第一关

第二关:在示例图片下方再添加一张图片,并使之适应设备屏幕宽度

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <!--下面的是添加图片并设置class属性的语句-->
 <a herf="#"><img class="img-responsive" src="/statics/codecamp/images/running-cat.jpg"></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>

第二关

第三关:使h2的标题文字居中

 <link href="//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">
     <!--在下面语句的class中添加text-center即可-->
 <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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" 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>

第三关

第四关:在大的猫咪图片下添加指定要求的按钮,按钮默认长度与按钮文本相同

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <!--下面这行添加按钮,别忘了按钮文本为'Like'-->
 <button class="btn">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>

第四关

第五关:为按钮添加新的属性使按钮长度适应屏幕

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <!--在btn属性后加空格,然后加入btn-block属性即可-->
 <button class="btn 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>

第五关

第六关:为按钮添加新属性

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <!--遇上一题几乎相同-->
 <button class="btn btn-block btn-primary">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>

第六关

第七关:添加新按钮,要符合要求

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <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>

第七关

第八关:添加新按钮

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <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>

第八关

第九关:为按钮设置外框,方便进行按钮布局

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <!--添加的代码在下面-->
 <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>

第九关

第十关:删除多余的没用的标签和样式,注意:CSS样式中删掉的,HTML元素中如果有引用该样式的元素应该也删掉该样式

 <link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
 <style>
 <!--red-text删除-->

 h2 {
 font-family: Lobster, Monospace;
 }

 <!--p删除-->

 .thick-green-border {
 border-color: green;
 border-width: 10px;
 border-style: solid;
 border-radius: 50%;
 }

 <!--smaller-image删除-->

 </style>

 <div class="container-fluid">

 <!--下面的h2中的red-text删除,并添加text-primary属性-->
 <h2 class="text-center text-primary">CatPhotoApp</h2>

 <!--下面的p标签删除-->

 <!--下面的a标签里的image中的smaller-image属性删除,并添加img-responsive属性-->
 <a href="#"><img class="img-responsive thick-green-border" src="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
 <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>

第十关

第十一关:添加span标签,设置样式

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
 <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>

第十一关

第十二关:图片个标题合并到一个块区域

 <link href="//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 = "/statics/codecamp/images/relaxing-cat.jpg"></a>
     </div>
 </div>
 <!--要修改的代码在这儿结束-->

 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
 <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>

第十二关

第十三关:给按钮添加图标

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>
 </div>
 </div>
 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <div class="row">
 <div class="col-xs-4">
 <button class="btn btn-block btn-primary">
     <i class="fa fa-thumbs-up"></i>  <!--添加的i标签在这儿-->
     Like</button>
 </div>
 <div class="col-xs-4">
 <button class="btn btn-block btn-info">
     <i class="fa fa-info-circle"></i> <!--添加的i标签在这儿-->
     Info</button>
 </div>
 <div class="col-xs-4">
 <button class="btn btn-block btn-danger">  <!--添加的i标签在这儿-->
     <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">
 <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>

第十三关

第十四关:与上一关相同

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>
 </div>
 </div>
 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">

 <div class="row">
     <div class="col-xs-4">
         <button class="btn btn-block btn-primary">
             <i class="fa fa-thumbs-up"></i>   <!--添加的i标签在这儿-->
             Like
         </button>
     </div>
     <div class="col-xs-4">
         <button class="btn btn-block btn-info">
             <i class="fa fa-info-circle"></i>  <!--添加的i标签在这儿-->
             Info
         </button>
     </div>
     <div class="col-xs-4">
         <button class="btn btn-block btn-danger">
             <i class="fa fa-trash"></i>  <!--添加的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>

第十四关

第十五关:给单选按钮添加div块组件

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>
 </div>
 </div>
 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
 <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>

第十五关

第十六关:给复选框加div块

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>
 </div>
 </div>
 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
 <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>

第十六关

第十七关:给文本框加表格控制属性,给提交按钮加图标

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>
 </div>
 </div>
 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
 <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>

第十七关

第十八关:输入框和提交按钮放到一个块组件里

 <link href="//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="/statics/codecamp/images/relaxing-cat.jpg"></a>
 </div>
 </div>
 <img src="/statics/codecamp/images/running-cat.jpg" class="img-responsive">
 <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>

第十八关

第十九关:开始做游乐场项目

<h3 class="text-primary text-center">jQuery Playground</h3>

第二十关:

<div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
</div>

第二十一关:

 <div class="container-fluid">
     <h3 class="text-primary text-center">jQuery Playground</h3>
     <div class="row">

     </div>
 </div>

第二十一关

第二十二关:

 <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>

第二十二关

第二十三关:

 <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>

第二十三关

第二十四关:

 <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>

第二十四关

第二十五关:

 <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>

第二十五关

第二十六关:

 <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 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">
 <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>

第二十六关

第二十七关:

 <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>

第二十七关

第二十八关:

 <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>

第二十八关

第二十九关:

 <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 id="target1" class="btn btn-default target"></button>
 <button id="target2" class="btn btn-default target"></button>
 <button id="target3" class="btn btn-default target"></button>
 </div>
 </div>
 <div class="col-xs-6">
 <h4>#right-well</h4>
 <div class="well" id="right-well">
 <button id="target4" class="btn btn-default target"></button>
 <button id="target5" class="btn btn-default target"></button>
 <button id="target6" class="btn btn-default target"></button>
 </div>
 </div>
 </div>
 </div>

第二十九关

第三十关:

 <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>

第三十关

第三十一关:写注释