前端学习，Bootstrap实战总结

使用Bootstrap设计响应式页面

还记得在学习HTML5和CSS的时候,我们创建过一个猫咪照片(Cat Photo)的小应用吗?现在,让我们回头继续完善这个应用吧。这次,我们将使用非常主流的响应式CSS框架Bootstrap来完善它。

Bootstrap会自动获取使用者屏幕的大小,并根据屏幕的大小自动调整HTML元素的宽度和高度来适配屏幕,因此称之为–响应式布局。

通过响应式布局,你不再需要为你的Web站点重新设计一个手机版的页面,Bootstrap会自动帮你调整好在手机页上的页面显示,事实上,Bootstrap在任何宽度的设备上都能适应得很好。

使用Bootstrap也非常简单,你只需要把下面的链接添加到你需要使用Bootstrap来进行布局的应用的头部：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap /3.3.1/css/bootstrap.min.css"/>

不过,考虑到接下来的学习中都需要使用该样式,所以我们已经默认帮你们都加载好了,你不需要再添加这个样式链接了。

那么,接下来让我们开始学习Bootstrap吧。
任务：首先，我们需要把所有的HTML内容放在一个包含有container-fluidclass名称的div下。

<div class="container-fluid">
<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>

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

**bootstrap如何区别container和container-fluid
container：随着屏幕宽度的变化而变化的
如果屏幕小于768的话，最大宽度是自动的(满屏)

如果屏幕大于768小于992的话，最大宽度是750

如果屏幕大于992小于1200的话，最大宽度是970

如果屏幕大于1200，最大宽度是1170

因此，屏幕分辨率小于768，container的最大宽度是None自动的，它基本上是占满整个屏幕。

系统Bootstrap会自动识别你这个浏览器的分辨率，来帮你设置这个div的宽度是多少，这就是container会帮你做的事情**
container-fluid：占满全屏的不管是在哪种分辨率下
随便你屏幕大小，它就是100%的宽
///
所以说如果你一定要占满全屏的话，代码中可以用container-fluid，但是两者都是自适应的，都很好用。下面看看bootstrap中的源代码可以更利于我们理解：

/*0-768px以上宽度container为100%*/
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/*768-992px以上宽度container为750px*/
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
/*992-1200px以上宽度container为970px*/
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
/*1200px以上宽度container为1170px*/
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/*container-fluid为100%*/
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

通过Bootstrap使图片适配手机显示

请在示例图片的下方添加一张新的图片。图片的src 路径为: /statics/codecamp/images/running-cat.jpg。

是不是觉得图片太大了?是不是觉得如果图片的尺寸刚好能适应手机屏幕宽度就好棒棒?

其实很简单的，通过Bootstrap，我们只要给图片添加 img-responsive
的class属性,图片的宽度就能自动适配你手机屏幕的宽度啦。

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

通过Bootstrap使文本居中

Bootstrap除了可以使图片自适应以外,还可以很简单的让头部标题的文字居中,使标题看起来更美观。我们只需要给h2标签添加text-center的class属性,标题文字就可以居中了。

友情提醒：你可以使用空格给标签定义多个class,就像下面这样：

<h2 class="red-text text-center">your text</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">
<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>

通过Bootstrap添加一个按钮

Bootstrap也有很多非常好看的button 按钮标签可以使用,比起HTML自定义的按钮好看很多。

在大张猫咪的图片下面添加一个 button 标签,并且为它添加 btn 这个class,按钮的文本为"Like"。

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

添加一个Bootstrap块级元素按钮

通常情况下，button 标签的宽度会与标签内包含的文字长度一致

如果你想是你的button
标签的宽度充满整个屏幕,你可以使用btn-block这个class讲按钮升级为块级元素,使button标签的宽度充满整个屏幕,并且该元素后面的所有元素都会浮动到下一行。

友情提醒:这些按钮仍然需要 btn class。

任务：添加Bootstrap的 btn-block class 到你的按钮。

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

尝试给一个Bootstrap按钮添加颜色

btn-primary类是该应用的主要颜色类，这个类的颜色对于那些你希望高亮提示用户的操作上非常有用。

任务：为按钮添加btn-primaryclass属性。

友情提醒：这个按钮仍然需要 btn 和 btn-block 来两个属性！

<link href="//fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">