網頁設計與雲端應用

14. Bootstrap免費樣板

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

一、google搜尋

  1. bootstrap theme
  2. bootstrap theme free

二、bootstrap免費樣板

  1. https://startbootstrap.com/
  2. 由上面網站我們可以得到更多有關bootstrap資源
  3. 付費樣板：https://wrapbootstrap.com/?ref=StartBootstrap
  4. 授權：

    Start Bootstrap上的所有免費模板和主題現在都是根據MIT許可而不是Apache 2.0進行授權的。

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

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

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

    Start Bootstrap的全部內容是保持開放源代碼，並保持模板和主題可以使用和擴展到廣泛的用戶。切換到麻省理工學院的許可證只是這個方向的另一個步驟。

  5. 相關資源：https://startbootstrap.com/bootstrap-resources/

  6. 免費樣板：https://gridgum.com/themes/category/free/

三、下載免費的bootstrap theme

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

四、頁面轉向

  1. index.html 頁面轉向 
    <!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0;url=new-age/index.html" />
</head>
</html>
  2. 當我們連至網站，打開index.html，會馬上轉至「/new-age/index.html」

五、使用JQUERY套件

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

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

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

  1. 引入：注意(jquery.backstretch.min.js)檔案位置 
    <script src="js/backstretch/jquery.backstretch.min.js"></script>
  2. 調用插件，指定的類別、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