【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。
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.
然後,在內層輸入:
上圖漏了一個重點要提大家的是,container與col-md-12之間,要加回一個row:
內文See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.
然後用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中輸入:
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內文向下移動,這樣設定後,就會自動化整個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:
navbar內文code用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中的這句:
輸入在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上層,加一個:
這段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與我討論!
你可能也會喜歡...
HTML教學課程 (入門篇) 4個章節 - 由淺入深學習HTML
這是一篇全面, 適合新手看的HTML教學。文章會分開4個章節,由淺入深,由零開始教授你所有你要知道的HTML編程知識。
生日優惠/生日好去處全攻略(2021年更新) - 30個吃喝玩樂,行程推介
生日有咩做?這篇「生日優惠全攻略(2021年更新)」將會為你介紹30 個生日好去處以及不同的生日優惠,更為大家準備生日一天的行程,希望你們得到一個美滿的生日!
加入我們的Email List
免費參加【網頁開發入門CRASH COURSE】線上課程!
提交鬍子科技學院
地址: 香港銅鑼灣謝斐道535號Tower 535 18樓
電郵: info@mtache.com
© The Mustache Technology