> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/free-code-camp-practice/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/responsive-design-with-bootstrap/bootstrap-11-20.md).

# Bootstrap 11-20

11 - Use Spans for Inline Elements

![inline vs block](https://i.imgur.com/O32cDWE.png%20)

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

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

12 - Create a Custom Heading

* 把標題、圖片用成 header

```markup
  <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>` 會出現讚

```markup
<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 圖像

```markup
<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 元素
* 單選按鈕可以均勻在頁面展開，不用知道螢幕分辨率多寬

```markup
  <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 複選題

```markup
<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 飛機

```markup
  <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](https://codepen.io/ayugioh2003/pen/MJWBZw?editors=1000)

See the Pen [FreeCodeCamp - Cat Photo](https://codepen.io/ayugioh2003/pen/MJWBZw/) by Chiu ([@ayugioh2003](http://codepen.io/ayugioh2003)) on [CodePen](http://codepen.io).

19 - Create a Bootstrap Headline

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

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

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

20 - House our page within a Bootstrap Container Fluid Div

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

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