網頁設計與雲端應用

14. Bootstrap免費樣板

當您懂得HTML的語法，再也不用單打獨鬥自己開發網頁，網站上有很多免費的整套網站系統，可以下載，再修改成自己的網站即可。
Bootstrap免費樣板是我們的首選，它是目前最夯的響應式網站的框架，它會自動調整畫面來適應桌機、平板、手機。
Bootstrap免費樣板 + Github Pages + Sublime text3 + 臉書 + Google雲
讓我們可以用最少的成本，建立超高CP值的網站，來做行銷

一、google搜尋

bootstrap theme
bootstrap theme free

二、bootstrap免費樣板

https://startbootstrap.com/
由上面網站我們可以得到更多有關bootstrap資源
付費樣板：https://wrapbootstrap.com/?ref=StartBootstrap
授權：
Start Bootstrap上的所有免費模板和主題現在都是根據MIT許可而不是Apache 2.0進行授權的。

麻省理工學院的許可證很簡單，它允許你做任何你想要的模板。

簡而言之，使用MIT許可證，您可以使用Start Bootstrap中的任何模板或主題進行商業或私人用途，您可以根據需要分發和/或修改模板。

Start Bootstrap中的每個模板都有一個自定義的CSS文件，有些還有一個自定義的JS文件，它在前幾行代碼中有一個註釋。

Start Bootstrap的全部內容是保持開放源代碼，並保持模板和主題可以使用和擴展到廣泛的用戶。切換到麻省理工學院的許可證只是這個方向的另一個步驟。
相關資源：https://startbootstrap.com/bootstrap-resources/
免費樣板：https://gridgum.com/themes/category/free/

三、下載免費的bootstrap theme

請挑選喜愛的樣板，至少2個
一個放入 site
一個請建立新的專案

四、頁面轉向

index.html 頁面轉向

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0;url=new-age/index.html" />
</head>
</html>

當我們連至網站，打開index.html，會馬上轉至「/new-age/index.html」

五、使用JQUERY套件

引入CSS
引入JS(必須在jquery.js的後面)
調用插件(關鍵在 class、id)

六、BACKSTRETCH 輪播插件
http://www.jquery-backstretch.com/

backstretch 一個簡單的jQuery插件，它允許你動態調整大小，幻燈片功能的背景圖像添加到任何頁面或元素( MIT license.)

引入：注意(jquery.backstretch.min.js)檔案位置

<script src="js/backstretch/jquery.backstretch.min.js"></script>

調用插件，指定的類別、ID 必須有寬度、高度

<script type="text/javascript">
  $(document).ready(function(){
    $('.top-content').backstretch([
       "img/3.jpg"
     , "img/2.jpg"
     , "img/1.jpg"
     ], {duration: 3000, fade: 750});
  });
</script>

範例：https://www.ugm.com.tw/tncomu/backstretch.html

13-1 modal 模態彈窗

15. 網頁優化提升網站搜尋排名 next

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

14. Bootstrap免費樣板