Bootstrap教學課程 (入門篇)由0開始, 編寫網頁外觀

今天，你將會學習使用Bootstrap，我會Step By Step，從零開始，教授大家去編寫一個網站的外觀。

注意的是，今日這個教學，需要有一定HTML和CSS的基礎知識，才能看懂。

如果不會HTML或者CSS的朋友，可以先看回我們HTML與CSS的基礎教學：
HTML教學課程 (入門篇) 4個章節 - 由淺入深學習HTML

即使大家學習了HTML及CSS的語言後，如果我叫大家從零開始，去編寫一個網站的外觀，其實你都會覺得有點辛苦。

因為在現實環境當中，編程網站時，我們都會使用不同的Framework去幫忙。

什麼是Framework？

試幻想一下，如果大家要製作一件蛋糕，可以用兩種方法。

第一個方法，

從零開始製作，由買面粉、人手打蛋，到製作模具等等，親手完成每一個步驟，所需要的時間也非常之多。

第二個方法，

是去購買一些現成的自動打蛋機、模具或蛋糕，再自行加入創意，改頭換面，創作成一個新的蛋糕。這樣一來，所需要的時間也會相對較少。

Framework就如第二種方法，它預先已經編輯好一些設定與編碼，讓你所用。

你只需要靈活運用這些不同的元素，再改頭換面。這樣，你就可以快速完成你想要製作的網站了。

現在，無論你是做Backend，還是Frontend，你都可以借助不同的Framework去幫忙，編寫Code的。

今日，我們會討論這個CSS Framework，而最常見的CSS Framework，就是Bootstrap了。

Bootstrap 目前已經推出到第五代。

其實它的原名叫做Twitter Bootstrap，原本是Twitter開發人員內部使用的Frontend Framework來的。

後來在2011年，Twitter改成為Open Source，令到網絡上人人都可以免費使用這個Frontend Framework。

Bootstrap主要有兩個元素，可以加快你的開發速度。

Grid System

第一個元素，就是Grid System。

Grid System的意思，大概可以幻想成上圖般，將橫著的網站轉化成為12個Columns。

當你要編程不同的Layout，就可以使用不同數量的Columns。

假如我需要製作12格的Columns，只需變成12格的Layout。

假如我需要製作6格x6格的Columns，只需變成每邊一半的Layout。

假如我需要製作4格x4格x4格的Columns，只需變成3個4格的Layout。

假如我需要製作4格x8格的Columns，只需變成左邊1/3，右邊2/3的Layout。

而且這些Grid System是Mobile Responsive，非常方便。

Components

第二能加快開發速度的元素，是Components。

例如是：按鈕Button、Navigation等等。

只要在編程時，直接Copy這些HTML Code，或者使用一些Class，便可以很快製作到你想要的東西。

這篇文章教學，將會教大家使用Bootstrap，從零開始，編寫一個簡單的Layout。

由於我們今天主要是學習CSS，先不會解說部分JavaScript。

然而, 除了Bootstrap之外，還會使用到Google Font，及Font Awesome這兩個CSS的Framework。

Google Font

Google Font 主要是讓大家能使用一些不同的字形。

Font Awesome

Font Awesome 是可以讓大家使用一些Icons。

準備好了？我們開始進入編程網站吧！

如果你不想看文字教學, 可以直接看影片教學:

今天，我們會使用Bootstrap來製作這個網站ko-party.com：
K.O. Party

這是一個Party公司的網站，我們首先簡單地看看網站有什麼內容。

包括上圖中，有一個Introduction的標題。

拉下會看到，關於這間公司/創辦人的簡介。

再拉下，你會看到是一些活動介紹。

最後，會有一個留下電郵的格式，接著有一個Footer，包括連結及聯絡我們。

我們會利用Bootstrap，來製作出上圖這個效果。

與KO Party網頁一樣，包括：

• 有一個Section，
• 然後介紹這間公司，
• 接著就是活動介紹，
• 之後有一個Email List
• 以及Footer。

首先，請大家先下載這個Bootstrap開發完整編寫網站外觀學習源碼檔案：
加入我們的Email List，免費獲取以上源碼

解壓後打開文件夾，你會看到有兩個文件：start、final。

final是我完成品的樣子，先不用打開它。

我們來打開start文件夾，你看到只有3張圖片而已。

首先，我們打開Visual Studio Code這個軟件。

按檔案、開啟。

選擇之前大家下載的bootstrap文件夾，在start中按「打開」。

我們右鍵新增檔案「Index.html」。

開立文件後，先輸入網站的基本結構，如上圖的：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後在title Tag輸入：

K.O. Party - 全港好玩既Private派對

我們先去Bootstrap網站，按Docs > Getting started > Introduction。

我們需要用到CSS、JS的Code。

按後把兩段Code Copy去head Tag當中：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

以上兩條Code，其實它就是將一條整個Framework Embed進來。

大家要注意，如果是Copy他人的Code，最好放在head的頂層位置(如上圖)。

做網頁編程，通常都是由頂部開始，再做到下面部分。

所以第一個Section，有一個Navigation，還有一個大主題的底圖片。

我們先完成大主題的底圖片那個位置，因為這樣輸入，會比較簡單。

第一章節 - Banner

首先我們在body Tag內層輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後，在內層輸入：

上圖漏了一個重點要提大家的是，col-md-12之前，要加一個row, 代表一行：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後用Chrome打開後，你會看到上文輸入的東西，已經在頁面置中了的container裡面了。

為何會這樣的呢？

只要在頁面右鍵「檢查」一下，就會發現是container這裡做的設定。

我們在使用bootstrap的grid system。先會定義一個row, 代表一行，然後我們輸入了「col-md-12」，代表用全部12個column的位置。

有關​​Grid system問題，大家可以去網站​​Grid system這裡看看，了解更多。

比如圖中的設定「.col-md-」，就是代表Medium size的電腦熒光幕，就會顯示12行。

如果你不想設定得那麼細緻，正常情況下，只輸入Column Md，就會令到全部Screen都合適地使用。

另外還有一些經常用到的，就是Jumbotron與Buttons。

Jumbotron的意思就是圖中的Hero banner。

這些功能，大多都是完成了設定的Code來的，我們只需要Copy它對應的Class去做就行了。

回到主題，由於Bootatrap 5已取消了jumbotron功能，所以我們要自行加回這個style，在head Tag中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

在然後在css文件中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，你會成功編程出這個樣子。

那要怎樣設定css的文件呢？
我們只需要再增加一個css的排版的文件。

我們在Visual Studio Code同一層文件夾中，按右鍵，開一個「CSS」的Folder。

在Folder中，開一個名為「style.css」的文件，
在這個文件內容中，便是我們網站中，所有css設定的文件了。

記得，在css文件中輸入以下code，來更改banner空間：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後再把css連接入html當中，在head Tag輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

來到下一個步驟，就要轉換字形。

正常字形設定，標題會使用一種字型，
內文就用另一種字型，設計成一種對比感覺。

今天教大家的方法，就是使用Google Fonts。

在右上角位置，按入就會看到了Fonts的Code了。

然後Copy link當中的連結在你head Tag之中。

接著，我們就要去css文件中，輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

h1、h2、h3、h4、h5、h6等主題，
我都會使用Noto Sans字型；

p、a、input、label、textarea、span、ul、li等內文，
我都會使用Open Sans字型。

下一步，就要更改h1的文字細節，可以一起輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

溫馨提示一下，

由於大家之前已經學習過各種css的輸入法，所以這裡不再一個一個輸入法來解說了。

用Chrome打開看看，成功更改了css的設定了。

下一步，就要改善這個按鍵位置，可以在css文件中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然之後，我們要將整個banner上下置中，大家可以這樣輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，成功將整個banner內文向下移動，這樣設定後，就會上下置中了。

以上就是第一章節 - Banner的部分，成功完成了。

第二章節 - Menu

完成了Banner後，就要來到第2章節，Menu的教學了。

首先，我們去getbootstrap網站，按Docs > Components > Navbar頁面。

然後將整個Navbar的Code Copy，

Copy到body Tag中，section Tag上層的位置，

記得整理好Opening Tag和Closing Tag是同一個Level位置。

然後用Chrome打開看看，成功輸入了整行Navbar設定的Menu。

由於Menu需要作修改，所以我們在navbar上一層，輸入一個container：

用Chrome打開看看，成功改動Menu為置中位置了。

由於我們Menu左邊位置，需要放置Logo，所以大家需要更改成一個img Tag：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

接著，我們輸入一個header Tag在這裡，

原因是，我們需要在css這裡，更改Logo的size，所以我們在css文件中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，成功改動Logo的size了。

由於Menu當中，我們只需要用到「Link」那個li Tag的功能(上圖紅圈)，其他的li Tag可以Del。

然後把這個li Tag Copy多3次，主題更改為：

• 主頁
• 最新派對
• 常見問題
• 聯絡我們

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，成功更正分類主題了。

因為Menu右手邊的Search Box我們不需要使用，所以可以把其中的form Tag都Del。

接著，你會發現Menu主題有一種灰色的低層色，所以我們需要把nav中的bg-light把它del。

然後再css文件輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，每個題目之間的空位增加了。

這樣，我們就成功地完成了一個Navigation了。

第三章節 - 介簡

來到第三章節，介簡頁面的設定。

我們先輸入一個新的section，這個版面，

我們也是分12個Column，不過左手面有2個Column的位置需要Offset，所以輸入方法為：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，我們成功建立了這個主題了。

然後，我們在內層，增加多一個Column，左右4/8來分佈。

然後，由於要把內文col-md-8 Left，所以要輸入text-start：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後我們就要輸入圖中的內容了，可以這樣輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

完成後，用Chrome打開，你就會得出一個這樣的頁面內容。

接著就要整理一下CSS Style排版，第一個要輸入的是在intro jumbotron中加入：

再輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，整個介簡頁面的排版位置，終於成功完成。

第四章節 - 活動頁面

來到第四部分，活動頁面「最新派對」的設定。

同樣地，我們先輸入基本版面設定：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，基本的排版位置都有了。

由於原本的設計，這一頁面會有一種淺灰色的底色。

所以我們要在CSS文件中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後就要設定圖中的每個細節，你會看到，有一個大格，包含著：

所以我們首先輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

初稿樣子完成後，用Chrome打開，應該是這樣的。

由於這個灰色格式爆了出來，所以我們要在CSS文件中，輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

由於我們經常會使用不同螢幕，包括手機或電腦，都會有不同螢幕size。

如果你之後的設計，要做到不同的Responsive，那就會比較複雜。

所以我們可以在Bootstrap的網站，Docs頁面中的Starter template中的這句：

輸入在head Tag，最前面的位置上，當你之後需要做Responsive的時候，就會容易一點了。

回來Box設定上，我們都需要將文字都修改進灰色格式之內，所以我們可以在CSS中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開後，成功修改這部分的位置設定了。

如果覺得價格文字太大的話，也可以在CSS中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

接下來，可以完成下面的部分了。

我們在class lower的下層位置中，輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，應該會顯示出這個樣子的。

接著，就要處理CSS的排版問題了，可以輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後在兩個span Tag之間加入br Tag分開兩行。

另外如果大定留心注意的話，會發現附span Tag還會多一個Icon。

Icon要怎樣輸入的呢？

最常用的方法可以去fontawesome，按Start for Free。

輸入你的Email後、確認，就會得到一段Code。

按指示，可以輸入html的head Tag頂部位置。

然後，就可以如上圖般，尋找一些icon圖案來輸入了。

比如搜尋「address」的圖案，選擇合適的圖案。

Copy HTML Code，放入span Tag文字的前方(上圖)。

同樣地，另外搜尋一個clock圖案。

輸入另一個span Tag的前方。

用Chrome打開看看，成功輸入了Icon。

再整理一下CSS排位，輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

另外大家留心的話，

其實還有一個白色Box的Background，有Padding及Shadow的效果。

所以在CSS文件中，可以這樣輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後用Chrome打開看看，成功做了一個，有Padding及Shadow效果的白色Box了。

由於整個Box都有按入的功能，所以我們會輸入一個a Tag，把整個upper及lower包含著。

接著，在CSS中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

幾經辛苦，終於完成以上的編程後，

我們終於完成這個第四部分 - 活動頁面了。

第五章節 - Email List

下一步驟，正式來到第五部分的Email List設定了。

首先輸入基本設定：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，你會得出這個樣板的。

接著要輸入電郵格式，所以我們可以去Bootatrap的網頁，

按Docs > Forms > Input group，Copy Large size那個Code。

把那段Code，輸入到HTML圖中的位置。

接著要輸入一個「提交」的Botton，及整理一下整段Code的排版：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，初稿的樣板終於成形。

由於我們不需要「Large」這行文字，所以這一段Code可以Del。

之後就要修改CSS的排版，所以一起輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

另外讓版面更美觀一些，這裡可以輸入br Tag來隔行。

然之後，在這裡輸入一行：

整理完以上輸入法後，用Chrome打開看看，我們終於成功完成Email List這部分的設定了。

第六章節 - Footer

來到第六部分，就是網頁底部的Footer了。

同樣地，輸入基本格式：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，是否輸入正確了。

接著在Footer上方位置，會有一條線來分格，及修改logo size，

所以我們可以在CSS中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，完成了左手邊的Column。

接著，就要進行第二及第三個Column的設定了，一起在第一個Column下面位置輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後在CSS文件中，輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後用Chrome打開看看樣版，是否正確地修改了CSS的設定。

最後，來到中間「連結」部分的Column，一起輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

同樣地，然後在CSS文件中，輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

用Chrome打開看看，我們終於成功地，完成第六部分的設定。

大家可以從頭到尾細看一次，整頁網站是否正確地完成了呢！

第七章節 - Responsive

來到Responsive的部分，由於網站會使用不同的螢幕Size來運作，所以你原先的網站設計，在不同螢幕上，總會有一些出入。

由於Botstrap原本的設定已經很好，所以要修正的部分原會太多。

比如是去到768px時，有部分位置要修正，所以可以在CSS中輸入：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

然後用768px以下的size看一看，成功修正了部分的設定。

以上就是Responsive的基本修改教學，大家記得要多加練習喔。

最後這裡再補充兩點，

其實每當我們寫一個html code的時候，最好在head Tag上層，加一個：

這段Tag其實是方便用來記錄及證明，這是一個怎樣的輸入格式。

另一點還要補充的是，就是html的head Tag第一行，還需要輸入這一段Code：

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.

這個meta Tag有什麼用途呢？

其實這個meta Tag是一些附加資料來的。

原來沒有輸入這一段Code的這，有些中文文字，就會有機會變成亂碼。

以上兩點補充，希望大家多加注意喔。