2019年11月14日 星期四

Bootstrap 4 學習筆記 (一) : 環境配置

我跟 Bootstrap 的接觸大約是在 2016 年, 那時老張打電話問我會不會 Bootstrap, 說剛接了一個專案要用到, 我說聽過但沒學過, 大略知道那是一種前台框架, Javascript 的框架何其多, 我那時正熱衷學習 jQuery, 我覺得 jQuery 就很好用了啊, 幹嘛還要再學一個?

2018 年二哥在念高三, 周六常常需載他去鳳中參加 APCS 學習, 我就到附近的鳳山家樂福看書, 有一次看到書櫃上旗標出的一本網頁設計書, 裡面有介紹 Bootstrap, 覺得好像也不難學, 只要熟悉怎麼用已設計好的樣式類別, 很容易便能設計出美美的網頁, 不需要為了 CSS 設定傷腦筋 :

# 一步到位 RWD 網頁程式設計 (旗標, 陳惠貞)


Source : 博客來


另外我在市圖借到下面這本松崗出版的 Bootstrap 4 書籍也不錯, 此書譯自 Packt 出版的 "Bootstrap by Example (Silvio Moreto)", 書中範例檔案可在 Packt 或松崗網頁下載 (搜尋書號 XW16095) :

# 前端 & 行動網頁設計速成班


Source : 博客來


另外一本書也用了兩章 (14, 15) 篇幅介紹 Bootstrap (這本我是在母校高科大借到的, 市圖沒有) :

跟著實務學習HTML5、CSS3、JavaScript、jQuery、jQuery Mobile、Bootstrap 4&Cordova第一次開發跨平台網頁與APP就上手


Source : 金石堂


前陣子在測試 Django 模板, 我也囫圇吞棗大致翻讀了上面兩本書的 Bootstrap 用法, 做了簡單的測試, 想說等 Django 告一段落再來好好地對 Bootstrap 徹底測試一番. 這幾天在考慮 Hostinger 虛擬主機的續約問題, 決定還是保留已使用三年的域名, 改用另一個免費帳號來升級, 順便把網站內容翻修一下, 重新規劃空間用途, 想說首頁乾脆就用 Bootstrap 來寫吧!

Bootstrap 最早是 Twitter 公司的工程師 Mark Otto 和 Jacob Thornton 所開發, 原來叫做 Twitter Blueprint, 其出發點是要發展出一個可以保持介面一致的網頁前台框架, 此專案於 2011 年開源釋出, 並成為 GitHub 上按讚 (標註 Starred) 次數第二高的專案, 是目前最受歡迎的跨瀏覽器自適應 (或響應式) 網頁開發 (Responsive Web Design) 框架, 目前由 Bootstrap Core Team 維護, 參考 :

https://zh.wikipedia.org/wiki/Bootstrap

Bootstrap 並非單獨可運作, 因為其動態顯示功能是依賴 jQuery , 因此除了 Bootstrap 函式庫外還需要 jQuery 函式庫. 下載 Bootstrap 網址如下, 目前是 bootstrap-4.3.1-dist.zip :

https://getbootstrap.com/docs/3.4/getting-started/

按左下角 "Dowload Bootstrp"下載 zip 壓縮檔 :




解壓縮後將 js 子目錄下的 bootstrap.min.js 與 css 子目錄下的 bootstrap.min.css 以及 bootstrap-theme.min.css 複製到專案目錄下, 另外還需要 jQuery 才能讓 Bootstrap 動起來, 下載網址 :

https://jquery.com/download/

將下載的 jquery-min.js 也放在專案目錄下, 結構如下 :




網頁範本如下 :


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-theme.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </head>
  <body>
  </body>
</html>


也可以使用 CDN 供檔, 範本如下 :


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
  </body>
</html>


這樣就可以開始用 Bootstrap 設計網頁了, 以下是我規劃中的首頁, 使用 jumbotron 超大螢幕顯示效果 :


範例 1 : 時空旅人 の 胡亂測試 (本地供檔) [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" href="bootstrap-theme.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </head>
  <body>
    <div class="jumbotron">
      <div class="container">
        <h1>小狐狸事務所</h1>
        <h3>時空旅人 の 胡亂測試</h3><br>
        <p>
          <a class="btn btn-info btn-lg" role="button" href="#">測試網站</a>
          <a class="btn btn-info btn-lg" role="button" href="#">財金資訊</a>
        </p>
      </div>
    </div>
  </body>
</html>


範例 2 : 時空旅人 の 胡亂測試 (CDN 供檔)  [看原始碼]


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
    <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
    <script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="jumbotron">
      <div class="container">
        <h1>小狐狸事務所</h1>
        <h3>時空旅人 の 胡亂測試</h3><br>
        <p>
          <a class="btn btn-info btn-lg" role="button" href="#">測試網站</a>
          <a class="btn btn-info btn-lg" role="button" href="#">財金資訊</a>
        </p>
      </div>
    </div>
  </body>
</html>


結果如下 :

只用 class 設定就能弄出美美的網頁, 看起來還不錯.

參考 :

Bootstrap 4 繁體中文手冊[六角學院譯]
https://www.w3schools.com/bootstrap4/default.asp
Top 9 Bootstrap 4 Tutorials for 2018
# Bootstrap Getting Started
Bootstrap 4 Cheat Sheet


201-11-26 補充 :

今天找到很不錯的 Boostrap 教學 :

第 10 堂課 - 初探 bootstrap 網頁製作
# Bootstrap 初學介紹 #靜態篇

4 則留言 :

資科小鄧 提到...

您好:
我也有 松崗出版的 Bootstrap 4 那本書,但是現在松崗的網站都無法下載,聯絡客服也沒有回應...
搜尋資源時剛好找到您的網站,如果您還有檔案,是否可以傳給我呢?

小狐狸事務所 提到...


我到原出版商 Packt 網站下載, 放在 rapigator 分享 :
https://rapidgator.net/file/0467775ca2feea78e3b41770115574c0/bootstrap_by_example_Code.zip.html

小狐狸事務所 提到...

按 slow speed download 等 180 秒即可下載.

資科小鄧 提到...

太感謝您了!