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

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

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

在這篇「Bootstrap教學課程」,你會學習到:

  • Bootstrap 基本概念
  • 利用Bootstrap去編寫網頁外觀 - KO 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。

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, 代表一行:

<div class='row'></div>

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行。

因為在Bootstrap裡面,我們可以用數個Class, 去說明不同的screen size用不同的Column,
比如大Mon(Extra large)的時候,拿6行;
很小的Mon(Small)的時候,變成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

標題文字,我會使用Noto Sans Traditional Chinese​,Medium 500

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

在右上角位置,按入就會看到了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:

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

用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中加入:

margin-bottom: 0px;

再輸入:

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中的這句:

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

輸入在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.


然後,將整個Box的內容,直接Copy 2次,
再修正CSS中atest h3的margin-bottom為50px。

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

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

第五章節 - 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來隔行。

然之後,在這裡輸入一行:

placeholder='你的電郵'

整理完以上輸入法後,用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上層,加一個:

<!DOCTYPE html>

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

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

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


這個meta Tag有什麼用途呢?

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

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

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

總結

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

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

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

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程!