1.首先，創(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>

image.png

2.現(xiàn)在讓我們確保頁面里所有的內(nèi)容都是響應(yīng)式的。
讓我們將 h3 元素放置于一個(gè)class屬性為 container-fluid 的 div 元素中。
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>

3.現(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>

4.既然我們已經(jīng)有了一個(gè) Bootstrap 行，讓我們來把它分成兩欄來放置我們的元素吧。
在你的行內(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>

5.Bootstrap 有一個(gè) class 屬性叫做 well，它的作用是為設(shè)定的列創(chuàng)造出一種視覺上的深度感（一種視覺上的效果，動(dòng)手寫代碼體會(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>

image.png

6.現(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>

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

image.png

8.并不是每一個(gè) class 屬性都是用于 CSS 的。 有些時(shí)候我們創(chuàng)建一些 class 只是為了更方便地在jQuery中選中這些元素。
為你的每一個(gè) button 都添加 target class
<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>

9.回憶一下，我們除了可以給元素增加 class 屬性，還可以給你的每個(gè)元素增添一個(gè) id 屬性。
每一個(gè)指定元素的 id 都是唯一的，并且在每個(gè)頁面中只能使用一次。
現(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>

10.讓我們?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>

image.png

11.我們也可以使用jQuery并通過每個(gè)按鈕各自唯一的 id 來標(biāo)識出它們。
給你的每一個(gè)按鈕一個(gè)唯一的 id ，以 target1 為開始，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>

12.正如我們標(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>

image.png

13.當(dāng)我們開始使用jQuery，我們將修改HTML元素，但是實(shí)際上我們并不是直接在 HTML 文本中修改。
我們必須確保讓每個(gè)人都知道，他們不應(yīng)該直接修改此頁面上這些代碼。
記住，你可以在 為結(jié)束的地方進(jìn)行評論注釋。(像這樣， )
請?jiān)谀愕?HTML 頂部加如下一段注釋：Only change code above this line.

image.png