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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/responsive-design-with-bootstrap/bootstrap-11-20.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.