Bootstrap 21-31

21 - Create a Bootstrap Row

在 div.container 層級下添加一個 div.row

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

22 - Split your Bootstrap Row

分開 bs row，分成兩個 col

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

    <div class="col-xs-6"> 777
    </div>

  </div>
</div>

23 - Create Bootstrap Wells

div.well 可以產生有陰影的、凹陷的 div
會有視覺上的深度感
well ... 為什麼是這個名字 orz，井的意思?
Bootstrap 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"></div>
    </div>
    <div class="col-xs-6">
      <div class="well"> </div>
    </div>
  </div>
</div>

24 - Add Elements within your Bootstrap Wells

<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>haha</button>
        <button>haha</button>
        <button>haha</button>


      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">

        <button>haha</button>
        <button>haha</button>
        <button>haha</button>

      </div>
    </div>
  </div>
</div>

25 - Apply the Default Bootstrap Button Style

btn 是灰色扁平圓框
btn-default 是醜醜的白色突出圓框
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"> haha </button>
        <button class="btn btn-default"> haha </button>
        <button class="btn btn-default"> haha </button>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
        <button class="btn btn-default"> haha </button>
        <button class="btn btn-default"> haha </button>
        <button class="btn btn-default"> haha </button>
      </div>
    </div>
  </div>
</div>

26 - Create a Class to Target with jQuery Selectors

幫 button 新增一個 class
之後給 jQuery 選擇用

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

27 - Add ID Attributes to Bootstrap Elements

添增 id 屬性
不確定之後會不會用到

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div id="left-well" 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 id="right-well" 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>

28 - Label Bootstrap Wells

增加一個 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>

29 - Give Each Element a Unique ID

每個元素都要有獨特的 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 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>

30 - Label Bootstrap Buttons

也幫 button 標籤一下

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

31 - Use Comments to Clarify Code

html 的註解

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

PreviousBootstrap 11-20 NextGear up for Success

Last updated 4 years ago

Was this helpful?