Bootstrap 11-20

11 - Use Spans for Inline Elements

inline vs block

• span 預設是 inline 屬性，行內元素

  <p>Things cats 
    <span class="text-danger">love:</span>
  </p>

12 - Create a Custom Heading

• 把標題、圖片用成 header

  <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="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
  </div>

13 - Add Font Awesome Icons to our Buttons

• 載入 font-awesome.css 後，就能調用一些基於 svg 的矢量圖像

• 會繼承 html 元素的字體大小

• <i class="fa fa-info-circle"></i> 會出現 info 圖像

• <i class="fa fa-thumbs-up"></i> 會出現讚

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<button class="btn btn-block btn-primary">
      <i class="fa fa-thumbs-up"></i> Like
</button>

14 - Add Font Awesome Icons to all of our Buttons

• 分別加上 info 和 trash 圖像

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

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

15 - Responsively Style Radio Buttons

• radio button 單選題，也可以用在 form 元素

• 單選按鈕可以均勻在頁面展開，不用知道螢幕分辨率多寬

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

16 - Responsively Style Checkboxes

• 和上面一樣，只是變成 checkboxes 複選題

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

17 - Style Text Inputs as Form Controls

• 在文本輸入框增加 form-control。雖然我完全看不懂這個類別有什麼用處(好像有變好看一點)

• 把 submit 按鈕加上 btn 類別，並放上一台 fa-paper-plane 飛機

  <input class="form-control" type="text" placeholder="cat photo URL" required>
  <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>

18 - Line up Form Elements Responsively with Bootstrap

• cat photo app 的最後一個挑戰 QQ

• 雖然版面在小螢幕以外的尺寸看起來很詭異，但這也算是第一個在 freeCodeCamp 完成的實做吧

• FreeCodeCamp - Cat Photo

See the Pen FreeCodeCamp - Cat Photo by Chiu (@ayugioh2003) on CodePen.

19 - Create a Bootstrap Headline

雖然感傷，但還是要繼續學習。這是從頭開始的 bootstrap 學習

• 幫 h3 添加一些 bootstrap 定義好的類別

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

20 - House our page within a Bootstrap Container Fluid Div

• 讓整個頁面都是滿滿的 container fluid div

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