BOOTSTRAP教學課程 (入門篇)

由0開始, 編寫網頁外觀

Bootstrap是一個最常用的一個CSS Framework。

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

在這篇「Bootstrap教學課程」，你會學習到：

• Bootstrap 基本概念
• 利用Bootstrap去編寫網頁外觀 - KO Party

準備好了？我們開始吧！

目錄

第1章

Bootstrap 基本概念

第2章

建立K.O. Party網站

第1章

Bootstrap 基本概念

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

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

最常用的一個CSS Framework，就是Bootstrap了。

Bootstrap 基本概念

今天，你將會學習使用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。

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

第2章

編程K.O. Party網站

今天，我會Step By Step，從零開始，教授大家去編寫K.O. Party網站的主頁。

網站主頁的內容，包括有：

• Banner
• Menu
• 簡介
• 活動頁面
• Email List
• Footer
• Responsive

準備好了？我們開始吧！

K.O. Party網站 - 主頁

今天，我們會使用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」。

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

html Tag、head Tag、body Tag、title Tag。

然後在title Tag輸入：

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

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

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

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

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

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

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

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

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

第一章節 - Banner

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

然後，在內層輸入：

上圖漏了一個重點要提大家的是，container與col-md-12之間，要加回一個row：

<div class='row'>內文<div class='row'>

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

為何會這樣的呢？

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

有關頁面置中，是因為我們輸入了「col-md-12」，拿了全部12格的位置。

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

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

因為在Bootstra裡面，我們可以自行定義，

比如大Mon(Extra large)的時候，拿6行；

很小的Mon(Small)的時候，變成12行。

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

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

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

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

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

在然後在css文件中輸入：

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

那要怎樣設定css的文件呢？

我們只需要再增加一個css的排版的文件。

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

在Folder中，開一個名為「style.css」的文件，

在這個文件內容中，便是我們網站中，所有css設定的文件了。

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

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

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

正常字形設定，標題會使用一種字型，

內文就用另一種字型，設計成一種對比感覺。

今天教大家的方法，就是使用Google Fonts。標題文字，我會使用Noto Sans Traditional Chinese​，Medium 500

內文文字，我會使用Open Sans​，Light 300

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

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

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

h1、h2、h3、h4、h5、h6等主題，

我都會使用Noto Sans字型；

p、a、input、label、textarea、span、ul、li等內文，

我都會使用Open Sans字型。

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

溫馨提示一下，

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

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

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

然之後，我們要將整個banner內文向下移動，大家可以這樣輸入：

用Chrome打開看看，成功將整個banner內文向下移動，這樣設定後，就會自動化整個Center Aignment了。

以上就是第一章節 - 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：

<div class='container'>navbar內文code</div>

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

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

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

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

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

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

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

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

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

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

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

然後再css文件輸入：

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

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

第三章節 - 介簡

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

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

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

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

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

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

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

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

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

margin-bottom: 0px;

再輸入：

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

第四章節 - 活動頁面

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

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

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

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

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

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

圖片、報名、價錢、活動主題、地址及時間。

所以我們首先輸入：

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

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

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

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

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

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

然後在兩個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排位，輸入：

另外大家留心的話，

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

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

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

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

接著，在CSS中輸入：

然後，將整個Box的內容，直接Copy 2次，

再修正CSS中atest h3的margin-bottom為50px。

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

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

第五章節 - Email List

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

首先輸入基本設定：

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

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

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

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

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

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

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

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

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

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

placeholder='你的電郵'

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

第六章節 - Footer

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

同樣地，輸入基本格式：

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

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

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

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

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

然後在CSS文件中，輸入：

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

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

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

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

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

第七章節 - Responsive

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

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

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

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

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

最後這裡再補充兩點，

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

<!DOCTYPE html>

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

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

這個meta Tag有什麼用途呢？

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

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

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

總結

以上七個章節課程，就是Bootstrap的基礎概念。

你還需要好好去做練習，鞏固每一章的概念，才能充份理解和運用Bootstrap。

如果大家有甚麼問題，歡迎email與我討論！

文章來源：

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