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>
結果如下 :
參考 :
# 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 秒即可下載.
太感謝您了！
張貼留言