# Bootstrap

參考不同網頁性質的排版方式

<https://v4-alpha.getbootstrap.com/examples/>

<https://getbootstrap.com/docs/4.0/examples/>

<http://wowslider.com/posts/35-top-free-bootstrap-templates-2016-95.html>

<https://startbootstrap.com/themes/>

## B3 B4教學

有各式各樣範例，找素材的好地方，語法與CSS名稱略有不同

<https://www.w3schools.com/bootstrap/default.asp>

<https://www.w3schools.com/bootstrap4/default.asp>

<https://getbootstrap.com/docs/4.0/components/alerts/>

<https://mdbootstrap.com/docs/jquery/layout/grid-usage/>

Input Group Button 搜尋框+搜尋按鈕

<https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_input_group_btn&stacked=h>

點選文字顯示提示訊息

<https://www.w3schools.com/bootstrap/bootstrap_popover.asp>

呈現社群媒體圖文排列

<https://www.w3schools.com/bootstrap/bootstrap_media_objects.asp>

點擊縮放區塊

<https://www.w3schools.com/bootstrap/bootstrap_collapse.asp>

分頁切換畫面

<https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp>

固定在視窗旁邊的選單

<https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed2>

固定在視窗上面的選單

<https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky>

表單驗證 (未測試)

<https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/248742/>

<https://www.wfublog.com/2017/09/bootstrap-form-validator.html>

<http://1000hz.github.io/bootstrap-validator/>

同行排列

<https://v4-alpha.getbootstrap.com/utilities/display-property/>

預設字體設定

<http://dev.sopili.net/2013/03/bootstrap-css.html>

跳出互動對話框，可用button或a觸發

<https://www.w3schools.com/bootstrap/bootstrap_modal.asp>

觸發完後關閉對話框

```javascript
$('.form_modal').modal('hide');
```

<https://dotblogs.com.tw/newmonkey48/2017/06/02/113416>
