2021-10-28|閱讀時間 ‧ 約 21 分鐘

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

    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及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:
    這是一個Party公司的網站,我們首先簡單地看看網站有什麼內容。
    包括上圖中,有一個Introduction的標題。
    拉下會看到,關於這間公司/創辦人的簡介。
    再拉下,你會看到是一些活動介紹。
    最後,會有一個留下電郵的格式,接著有一個Footer,包括連結及聯絡我們。
    我們會利用Bootstrap,來製作出上圖這個效果。
    與KO Party網頁一樣,包括:
    • 有一個Section,
    • 然後介紹這間公司,
    • 接著就是活動介紹,
    • 之後有一個Email List
    • 以及Footer。
    首先,請大家先下載這個Bootstrap開發完整編寫網站外觀學習源碼檔案:
    解壓後打開文件夾,你會看到有兩個文件: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與我討論!
    文章來源:

    分享至
    成為作者繼續創作的動力吧!
    © 2024 vocus All rights reserved.