FreeCodeCamp - Responsive Design with Bootstrap
Use Responsive Design with Bootstrap Fluid Containers
現(xiàn)在讓我們回到我們的Cat Photo應(yīng)用。這次，我們將用流行的響應(yīng)式框架Bootstrap來(lái)美化它。
Bootstrap將會(huì)根據(jù)你的屏幕的大小來(lái)調(diào)整HTML元素的大小 —— 強(qiáng)調(diào) 響應(yīng)式設(shè)計(jì)的概念。
通過(guò)響應(yīng)式設(shè)計(jì)，你無(wú)需再為你的網(wǎng)站設(shè)計(jì)一個(gè)手機(jī)版的。它在任何尺寸的屏幕上看起來(lái)都會(huì)不錯(cuò)。
你僅需要通過(guò)添加下列代碼到你的HTML開(kāi)頭來(lái)將Bootstrap添加到任意應(yīng)用中：
<link rel="stylesheet" />
在此案例中，我們已經(jīng)幫你把上述代碼添加到頁(yè)面中。
首先，我們需要把所有的HTML內(nèi)容放在class為container-fluid的div下。
<link 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="#"></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>
Make Images Mobile Responsive
首先，在已有的圖片下方添加一張新的圖片。將它的 src屬性設(shè)置為 /images/running-cat.jpg。
如果圖片的尺寸剛好等于我們手機(jī)的尺寸，那想必是極好的。
謝天謝地，通過(guò)Bootstrap，我們要做的只是給圖片添加 img-responsive class屬性。這樣圖片的寬度就能完美地適配你的頁(yè)面的寬度了。
<link 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="#"></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>
Center Text with Bootstrap
既然我們?cè)谑褂肂ootstrap，我們可以通過(guò)居中頭部元素來(lái)使它看起來(lái)更棒。 我們所要做的只是把text-center class屬性添加給 h2 元素。
記?。耗憧梢杂每崭穹珠_(kāi)多個(gè)class來(lái)為同一個(gè)元素添加多個(gè) class 屬性， 就像這樣：
<h2 class="red-text text-center">your text</h2>
<link 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="#"></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>
Create a Bootstrap Button
Bootstrap有它自己的 button 按鈕風(fēng)格， 看起來(lái)要比默認(rèn)的按鈕好看得多。
在三只貓咪圖片下面創(chuàng)建一個(gè)新的 button 元素。給它添加 btn class 屬性以及"Like"文本。
<link 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="#"></a>
<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>
Create a Block Element Bootstrap Button
通常情況下，你的 button 元素僅與它所包含的文本一樣寬。通過(guò)使其成為塊級(jí)元素，你的按鈕將會(huì)伸展并填滿頁(yè)面整個(gè)水平空間，任何在它之下的元素都會(huì)跟著浮動(dòng)至該區(qū)塊的下一行。
這張圖闡述了行內(nèi)元素與塊級(jí)元素的區(qū)別：
注意，這些按鈕仍然需要 btn class。
添加Bootstrap的 btn-block class 到你的按鈕。
<link 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="#"></a>
<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>
Taste the Bootstrap Button Color Rainbow
深藍(lán)色btn-primary是你的應(yīng)用的主要顏色，被用在那些用戶主要采取的操作上。
添加Bootstrap的 btn-primary class 屬性到按鈕標(biāo)簽上。
注意：這個(gè)按鈕仍然需要 btn 和 btn-block 屬性！
<link 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="#"></a>
<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>
Call out Optional Actions with Button Info
Bootstrap自帶了一些預(yù)定義的按鈕顏色。淺藍(lán)色 btn-info被用在那些用戶可能會(huì)采取的操作上。
在你的 "Like" 按鈕下面添加一個(gè)文本為 "Info" 的塊級(jí)Bootstrap按鈕，并為其添加 btn-info 和 btn-block class屬性。
注意：這些按鈕仍然需要 btn 和 btn-block class屬性
<link 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="#"></a>
<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>
Warn your Users of a Dangerous Action
Bootstrap自帶了一些預(yù)定義的按鈕顏色。紅色btn-danger被用來(lái)提醒用戶該操作具有“破壞性”，例如刪除一張貓的圖片。
創(chuàng)建一個(gè)文本為 "Delete" 的按鈕，并且給它添加 class btn-danger。
注意：這些標(biāo)簽仍然需要 btn 與 btn-block class。
<link 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="#"></a>
<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>
Use the Bootstrap Grid to Put Elements Side By Side
Bootstrap 使用一種響應(yīng)式網(wǎng)格布局——可輕松實(shí)現(xiàn)將多個(gè)元素放入一行并指定各個(gè)元素的相對(duì)寬度的需求。Bootstrap 中大多數(shù)的class屬性都可以設(shè)置于 div 元素中。
下面這張圖表顯示了 Bootstraps 的12列網(wǎng)格布局是如何起作用的：
請(qǐng)注意，在這張圖表中，class屬性 col-md-* 正被使用。在這里，md 表示 medium (中等的)，* 代表一個(gè)數(shù)字，它指定了這個(gè)元素所占的列寬。通過(guò)此圖表的屬性設(shè)置可知，在中等大小的屏幕上(例如筆記本電腦)，元素的列寬被指定了。
在我們創(chuàng)建的 Cat Photo App 中，將會(huì)使用 col-xs-*，其中 xs 是 extra small 縮寫(xiě)（應(yīng)用于較小的屏幕，比如手機(jī)屏幕），* 是你需要填寫(xiě)的數(shù)字，代表在一行中,各個(gè)元素應(yīng)該占的列寬。
把 Like, Info 和 Delete 三個(gè)按鈕一并放入一個(gè) <div class="row"> 元素中；然后，其中的每一個(gè)按鈕都需要各自被一個(gè) <div class="col-xs-4"> 元素包裹。
當(dāng)div 元素設(shè)置了 class 屬性 row 之后，那幾個(gè)按鈕便可嵌入其中。
<link 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="#"></a>
<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>
Ditch Custom CSS for Bootstrap
現(xiàn)在，讓我們清理一下之前的代碼了，以讓我們的 Cat Photo 應(yīng)用看起來(lái)更簡(jiǎn)潔，用 Bootstrap 內(nèi)置的樣式來(lái)替換我們之前自定義的樣式。
別擔(dān)心 —— 以后我們會(huì)有大把時(shí)間來(lái)自定義我們的 CSS 樣式的 ：）
刪除 style 元素里的 .red-text, p 和 .smaller-imageCSS聲明，這樣你的 style 留下的聲明就只有 h2 和 thick-green-border。
然后刪除包含死鏈接的 p 元素。 移除 h2 元素的 red-text class 并且用 Bootstrap的 text-primary class替換之。
最后，移除第一個(gè) img 元素的 "smaller -image" class ，替換為 Bootstrap的 img-responsive class。
<link rel="stylesheet" type="text/css">
<style>
.red-text {
color: red;
}
h2 {
font-family: Lobster, Monospace;
}
p {
font-size: 16px;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}
</style>
<div class="container-fluid">
<h2 class="text-center text-primary">CatPhotoApp</h2>
<p>Click here for <a href="#">cat photos</a>.</p>
<a href="#"></a>
<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>
Use Spans for Inline Elements
你可以用 span 標(biāo)簽來(lái)創(chuàng)建行內(nèi)元素。還記得我們是怎樣使用 .btn-block來(lái)創(chuàng)建填滿整行的按鈕嗎？
這張圖展示了 inline 元素與 block-level 塊級(jí)元素的區(qū)別：
通過(guò)使用 span 元素，你可以把幾個(gè)元素放在一起。你甚至可以用此為一個(gè)元素的不同部分指定樣式。
把 "Things cats love" 中的 "love" 放到 span 標(biāo)簽下。然后為其添加 text-danger class 來(lái)使文字變成紅色。
舉例，"Top 3 things cats hate" 元素的寫(xiě)法如下：
<p>Top 3 things cats <span class = "text-danger">hate:</span></p>
<link 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="#"></a>
<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><span class="text-danger">Things cats 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>
Create a Custom Heading
讓我們來(lái)為Cat Photo 應(yīng)用做一個(gè)導(dǎo)航吧，把標(biāo)題和愜意的貓圖片放在同一行。
記住，Bootstrap使用響應(yīng)式柵格系統(tǒng)，這使得把元素放入行內(nèi)并為每個(gè)元素指定寬度變得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。
這張圖展示了 Bootstrap 的12欄柵格布局是如何工作的：
注意，在此圖示中，我們使用了 col-md-* class 。此處 md 代表中等，* 指定了元素寬度應(yīng)該占用的欄數(shù)。 在這個(gè)案例中，我們指定了元素在中等大小的屏幕（如筆記本等）上所占用的欄數(shù)。
在此應(yīng)用中，我們將使用 col-xs-*， xs 意味著非常小（比如非常小的手機(jī)屏幕）， * 指定了元素寬度應(yīng)該占用的欄數(shù)。
將你的第一張圖片和 h2 元素放到同一個(gè) <div class="row"> 元素下。 將你的 h2 元素放到 <div class="col-xs-8"> 下，你的圖片放到 <div class="col-xs-4"> 下，這樣他們就能位于同一行了。
注意現(xiàn)在圖片是否與文字大小一致呢？
<link 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="#"></a>
</div>
</div>
<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>
Add Font Awesome Icons to our Buttons
Font Awesome 是一個(gè)非常方便的圖標(biāo)庫(kù)。這些圖標(biāo)都是矢量圖形，被保存在 .svg 的文件格式中。這些圖標(biāo)就和字體一樣，你可以通過(guò)像素單位指定它們的大小，它們將會(huì)繼承其父HTML元素的字體大小。
你可以將 Font Awesome 圖標(biāo)庫(kù)增添至任何一個(gè)應(yīng)用中，方法很簡(jiǎn)單，只需要在你的 HTML 頭部增加下列代碼即可：
<link rel="stylesheet" />
不過(guò)，我們已經(jīng)事先在幕后為此頁(yè)面添加了該功能。（不必重復(fù)添加上面這段代碼）
i 元素起初一般是讓其它元素有斜體(italic)的功能，不過(guò)現(xiàn)在一般用來(lái)指代圖標(biāo)。你可以將 Font Awesome 中的 class 屬性添加到 i 元素中，把它變成一個(gè)圖標(biāo)，比如：
<i class="fa fa-info-circle"></i>
你可以通過(guò) Font Awesome 庫(kù)增加一個(gè) thumbs-up 圖標(biāo)到你的 like 按鈕中，方法是在i 元素中增加 class 屬性 fa 和 fa-thumbs-up。
<link 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="#"></a>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-block btn-primary">Like<i class="fa fa-thumbs-up"></i></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>
Add Font Awesome Icons to all of our Buttons
Font Awesome 是一個(gè)非常方便的圖標(biāo)庫(kù)。這些圖片都是矢量圖，以 .svg 文件格式保存。這些圖標(biāo)用起來(lái)就像字體一樣。你可以使用像素單位來(lái)指定他們的大小，它們會(huì)繼承父級(jí)HTML元素的字體大小。
使用 Font Awesome 分別為你的 info 按鈕添加 info-circle 圖標(biāo)，為你的 delete 按鈕添加 trash 圖標(biāo)。
<link 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="#"></a>
</div>
</div>
<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">
<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>
Responsively Style Radio Buttons
你還可以將 Bootstrap 的 col-xs-*用在 form 元素中。這樣的話，我們的單選按鈕就可以均勻地在頁(yè)面上展開(kāi)，不需要知道屏幕的分辨率有多寬。
將頁(yè)面中的兩個(gè)單選按鈕放置于一個(gè) <div class="row">元素中。然后，添加 <div class="col-xs-6"> 元素并分別包裹每一個(gè)單選按鈕。
<link 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="#"></a>
</div>
</div>
<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>
Responsively Style Checkboxes
你還可以將 Bootstrap 的 col-xs-*用在 form 元素中。這樣我們的復(fù)選框就可以均勻地在頁(yè)面上展開(kāi)了，不管屏幕的分辨率是多大。
將你所有的復(fù)選框都放置于一個(gè) <div class="row"> 元素中。然后分別把每個(gè)按鈕都放置于一個(gè) <div class="col-xs-4"> 元素中。
<link 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="#"></a>
</div>
</div>
<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>
Style Text Inputs as Form Controls
你可以在你的 button 提交按鈕上添加 Font Awesome的 fa-paper-plane 圖標(biāo)，方法是在元素中增加 <i class="fa fa-paper-plane"></i> 。
給你表單的文本輸入框增加 classform-control 。在你的表單提交按鈕中增加 class btn btn-primary 。同樣，在這個(gè)提交按鈕中增加 Font Awesome 的 fa-paper-plane 圖標(biāo)。
<link 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="#"></a>
</div>
</div>
<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 class=form-control type="text" placeholder="cat photo URL" required>
<button class="btn btn-primary" type="submit"><i class="fa fa-paper-plane"></i>Submit</button>
</form>
</div>
Line up Form Elements Responsively with Bootstrap
現(xiàn)在讓我們把 input 元素和提交按鈕 button 放到同一行。我們將用和之前一樣的方法：通過(guò)使用擁有 rowclass 屬性的 div 元素和其它在它之內(nèi)的具有 col-xs-*class 屬性的 div 元素。
將你的表單中的 input 文本框和提交按鈕 button 放到一個(gè)具有 row class 屬性的 div 元素中。 將你的 input 放置于 class 為 col-xs-7 的 div元素中。 將你的表單的提交按鈕 button 放置于 class 屬性為 col-xs-5 的 div 元素中。
這是目前為止我們的 Cat Photo 應(yīng)用的最后一個(gè)挑戰(zhàn)了。希望你能夠喜歡學(xué)習(xí) Font Awesome，Bootstrap和響應(yīng)式設(shè)計(jì)！
<link 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="#"></a>
</div>
</div>
<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>
Create a Bootstrap Headline
現(xiàn)在，讓我們從頭開(kāi)始練習(xí)我們的HTML, CSS 和 Bootstrap 技術(shù)。
我們將會(huì)搭建一個(gè) jQuery playground，它也即將在我們接下來(lái)的 jQuery 課程中被投入使用。
首先，創(chuàng)建一個(gè) h3 元素，并且包含文本內(nèi)容 jQuery Playground 。
在 h3 元素中設(shè)置 Bootstrap 的 class 屬性 text-primary 為其上色，同時(shí)增加 Bootstrap 的 class 屬性 text-center 使文本居中顯示。
<h3 class="text-primary text-center">jQuery Playground</h3>
House our page within a Bootstrap Container Fluid Div
現(xiàn)在讓我們確保頁(yè)面里所有的內(nèi)容都是響應(yīng)式的。
讓我們將 h3 元素放置于一個(gè)class屬性為 container-fluid的 div 元素中。
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>
Create a Bootstrap Row
現(xiàn)在將要為我們的內(nèi)聯(lián)元素創(chuàng)建一個(gè) Bootstrap 行。
在 h3 標(biāo)簽下創(chuàng)建一個(gè) div 元素，并且?guī)в?class 屬性 row。
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row"></div>
</div>
Split your Bootstrap Row
既然我們已經(jīng)有了一個(gè) Bootstrap 行，讓我們來(lái)把它分成兩欄來(lái)放置我們的元素吧。
在你的行內(nèi)添加兩個(gè) div 元素，每個(gè)都具有 col-xs-6 class 屬性。
<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>
Create Bootstrap Wells
Bootstrap 有一個(gè) class 屬性叫做 well，它的作用是為設(shè)定的列創(chuàng)造出一種視覺(jué)上的深度感（一種視覺(jué)上的效果，動(dòng)手寫(xiě)代碼體會(huì)一下）。
在你的每一個(gè)class為col-xs-6的div 元素中都嵌入一個(gè)帶有 well class 屬性的 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>
Add Elements within your Bootstrap Wells
現(xiàn)在我們已經(jīng)在行內(nèi)的每一列都嵌套了好幾層 div 元素了。這已經(jīng)足夠了?，F(xiàn)在讓我們添加 button 元素吧。
在每一個(gè) well div 元素下放置三個(gè) button 元素。
<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>
Apply the Default Bootstrap Button Style
Bootstrap 還有一種屬于按鈕的 class 屬性叫做 btn-default 。
為你的每一個(gè) button 元素增加兩個(gè) class 屬性: btn 和 btn-default 。
<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>
Create a Class to Target with jQuery Selectors
并不是每一個(gè) class 屬性都是用于 CSS 的。 有些時(shí)候我們創(chuàng)建一些 class 只是為了更方便地在jQuery中選中這些元素。
為你的每一個(gè) button 都添加 target class。
<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 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>
Add ID Attributes to Bootstrap Elements
回憶一下，我們除了可以給元素增加 class 屬性，還可以給你的每個(gè)元素增添一個(gè) id 屬性。
每一個(gè)指定元素的 id 都是唯一的，并且在每個(gè)頁(yè)面中只能使用一次。
現(xiàn)在給我們每個(gè)包含 class well 的 div 元素一個(gè)唯一的 id。
記住，你可以像這樣賦予一個(gè)元素 id：
<div class="well" id="center-well">
給左邊的 well 賦予 id left-well。給右邊的 well 賦予 id right-well。
<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>
Label Bootstrap Wells
讓我們?yōu)槲覀兊?wells 都標(biāo)上它們的 id 吧。
在 left-well 之上，class為 col-xs-6 的 div 元素里面，添加一個(gè)文本為 #left-well 的 h4元素。
在 right-well 之上，class為 col-xs-6 的 div 元素里面，添加一個(gè)文本為 #right-well 的 h4元素。
<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>
Give Each Element a Unique ID
我們也可以使用jQuery并通過(guò)每個(gè)按鈕各自唯一的 id 來(lái)標(biāo)識(shí)出它們。
給你的每一個(gè)按鈕一個(gè)唯一的 id ，以 target1 為開(kāi)始，target6 為結(jié)束。
確保 target1 到 target3 在 #left-well 之中，target4 到 target6 則在 #right-well 之中。
<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>
Label Bootstrap Buttons
正如我們標(biāo)注了每個(gè) wells， 我們同樣想要標(biāo)注每一個(gè)按鈕。
為你的每個(gè) button 元素選擇與其 id 選擇器相同的文本。
<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>
Use Comments to Clarify Code
當(dāng)我們開(kāi)始使用jQuery，我們將修改HTML元素，但是實(shí)際上我們并不是直接在 HTML 文本中修改。
我們必須確保讓每個(gè)人都知道，他們不應(yīng)該直接修改此頁(yè)面上這些代碼。
記住，你可以在 為結(jié)束的地方進(jìn)行評(píng)論注釋。(像這樣， )
請(qǐng)?jiān)谀愕?HTML 頂部加如下一段注釋：Only change code above this line. 。
<!--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>
