K.O. Party - 全港好玩既Private派對
第一章節 - 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輸入:
來到下一個步驟,就要轉換字形。
正常字形設定,標題會使用一種字型,
內文就用另一種字型,設計成一種對比感覺。
標題文字,我會使用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要怎樣輸入的呢?
輸入你的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與我討論!
文章來源: