網頁設計與雲端應用

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