Bootstrap

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

https://v4-alpha.getbootstrap.com/examples/arrow-up-right

https://getbootstrap.com/docs/4.0/examples/arrow-up-right

http://wowslider.com/posts/35-top-free-bootstrap-templates-2016-95.htmlarrow-up-right

https://startbootstrap.com/themes/arrow-up-right

B3 B4教學

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

https://www.w3schools.com/bootstrap/default.asparrow-up-right

https://www.w3schools.com/bootstrap4/default.asparrow-up-right

https://getbootstrap.com/docs/4.0/components/alerts/arrow-up-right

https://mdbootstrap.com/docs/jquery/layout/grid-usage/arrow-up-right

Input Group Button 搜尋框+搜尋按鈕

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_input_group_btn&stacked=harrow-up-right

點選文字顯示提示訊息

https://www.w3schools.com/bootstrap/bootstrap_popover.asparrow-up-right

呈現社群媒體圖文排列

https://www.w3schools.com/bootstrap/bootstrap_media_objects.asparrow-up-right

點擊縮放區塊

https://www.w3schools.com/bootstrap/bootstrap_collapse.asparrow-up-right

分頁切換畫面

https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asparrow-up-right

固定在視窗旁邊的選單

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed2arrow-up-right

固定在視窗上面的選單

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_stickyarrow-up-right

表單驗證 (未測試)

https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/248742/arrow-up-right

https://www.wfublog.com/2017/09/bootstrap-form-validator.htmlarrow-up-right

http://1000hz.github.io/bootstrap-validator/arrow-up-right

同行排列

https://v4-alpha.getbootstrap.com/utilities/display-property/arrow-up-right

預設字體設定

http://dev.sopili.net/2013/03/bootstrap-css.htmlarrow-up-right

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

https://www.w3schools.com/bootstrap/bootstrap_modal.asparrow-up-right

觸發完後關閉對話框

https://dotblogs.com.tw/newmonkey48/2017/06/02/113416arrow-up-right

Last updated

Was this helpful?