Bootstrap教學 – 利用HTML + CSS,完整編寫網站外觀示範

今日你將會學習使用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年他就Open Source 令到人人都可以免費用的一個Frontend Framework Bootstrap主要有兩個元素可以加快你的開發速度 第一個我們叫做Grid System 那是什麽呢 其實我們可以幻想將橫著的網站幻想成12個Columns 如果你要做不同的Layout 就可以用不同數量的Columns 例如我們用六個Columns跟六個Columns 這樣我就變成了一個每邊一半的Layout 我用四個Columns跟四個Columns 加上四個Columns 這樣就做了一個三個Columns的Layout 我用四個Columns和八個Columns 就做了一個左邊是三分之一 右邊是三分之二的Layout 而且這些Grid System是Mobile Responsive 第二個Bootstrap可以加快你開發速度的地方 是一些Components Bootstrap本身已經 有很多不同的Layout Components可以使用 例如是按鈕Button Navigation等等 其實你知道Copy這些HTML Code 或者用一些Class 你就可以很快做到你想要的東西 今日我們會用Bootstrap由零開始 寫一個簡單的Layout 由於我們今天主要是學習CSS 我們先不講JavaScript 其實除了Bootstrap之外 我們今天還會使用到Google Font 還有Font Awesome這兩個CSS的Framework Google Font主要是讓你使用一些不同的字形 而Font Awesome就是可以讓你做一些Icons 準備好了嗎 我們開始了 我們會一起做一個這樣的網站 一個Party公司的網站 那很簡單地會有一個Introduction的標題 然後就會是講關於這間公司的東西 有一些相簿 然之後介紹一下有一些什麽的活動 最後我們留下一個Email在Email List 接著有一個Footer 我們會用到Bootstrap去完成 那我們現在就去到Bootstrap4.3 那我們會做到一個 這個是我們完成的樣子 你可以看看我們的一些相片 換成了一些灰色的相片 但是其實是一樣的 一開始有一個Section 然後介紹這間公司 接著之後 本來有一個相簿 但是因為相簿那裏要使用到一些JavaScript 或者是jQuery 那我們今天先不講 我們今天是專注於學這個Bootstrap 還有這個HTML 還有這個CSS 接著之後就會是派對的樣子 然之後給一個Email list 我們今天就會做一個這樣的東西 好了 首先我們就想大家去Download 我們今天的這一個Folder 我們今天這個Bootstrap這個Folder 有一個Start和一個Final Final就是我做完的樣子 我們先不開它 我們在Start開始 Start其實都沒有什麽東西 就是只有一個Folder叫做Pictures 這個Pictures這裏沒有東西 只有兩張灰色的相片 然之後有一個Logo 僅此而已 大家做之前記得Download這個File 這樣可以用這條Link 下面的這條Link 記住留下你的Email之後 就可以下載這兩個File 好的 那我們開始了 首先我們會開Visual Studio Colour這個軟件

由於我們在Start這個Folder打開 我們會打開File Open 然後就選擇我們的這一個File 我們的這個File就是這一個Bootstrap的Start 這個Folder 那這個Visual Studio Code就會Open這個Folder 你會看到它會顯示有多少相片在這個Folder裏面 然後我們可以在右邊點右鍵New File 我們做一個新的Index.html 然後我們就可以在這裏開始打我們的Program 首先我們就由頭開始做 首先我們會用Bootstrap Bootstrap上我先打一個結構 首先你無論做什麽網站都需要 首先打一個Html Tag 我們會有一個Head 然之後有一個Body Head這裏會打我們的一個標題 標題就是怎麽樣的 就是Title Tag 上面的這個K.O.Party Best Party in Hong Kong 行不行 然之後下一步我們就要 試試用這個Bootstrap Framework 怎麽樣使用 其實我們可以在這裏點 其實它這裏已經寫了 就是這樣的Getting Start就可以使用了 那我們可以點下去Documentation這裏 這樣就是Getting Start Getting Start需要有兩樣東西 放在你的網站上 第一個是CSS 第二是這一堆的JavaScript File 那我們將這一個CSS Copy 然之後放進去Head這裏 其實你看到它做了一些什麽 其實它就是將一條整個Framework Embed進來 其實你喜歡的話 你可以去這個Framework 直接來到這條Link這裏看一看它的樣子 其實你應該會看到一大堆的CSS 那我們拿到了這個CSS以後 我們還要拿這個JavaScript File 那我們也都Copy進去 其實這些這樣的JavaScript File都可以放進去這個Head裏面 這些JavaScript File 我們為什麽要放在一個Head裏面 還是放在哪裏 大家記住一個原則就是什麽呢 如果你用CSS 通常都是放在最頂的Head上面 JavaScript如果你是使用一些叫做Framework的東西 JavaScript Framework通常都可以放在頂部 而你自己寫的JavaScript 通常都會放在最下面鄰近Body 底那裏 我們今天不是學JavaScript 所以就不管它先 總之我們將這些JavaScript全部都放進裏面 然之後我們就 其實這樣子已經是將整個Framework 放在你的Link裏面 這樣就可以使用了 然之後我可以去打開一下 用Chrome 用Chrome這個瀏覽器 我們今天會用Chrome這個瀏覽器打開這個網站 那你會看到這個Title Tag已經設置好了 那我們第一件事就是試一下去做一個網站先 其實做網站就是由頂部做到下面 那我們做好了第一個Section先 好不好 第一個Section就是這樣子的 這樣會有一個Navigation 有一個背後的Background 就會有一段文字 我們首先剛才可能也都略略講過了 在Bootstrap裏面 我們有一個很重要Concept是叫做Container 這裏你會看到 其實你這些東西都是居中擺在這一個位置 外面這些gap位置 就是Container外面的 這裏 就是Container 你看到這些東西全部都是放在Container裏面的 所以無論你的Mon很大也好 你的東西都是居中的 不會說拉得太寬 太惡心 我們首先 你可以看看我是怎麽樣做這個Container 我們先不做這個Navigation 因為Navigation是麻煩一點 我們做了第一個大的Section先 那我們第一個大的Section 就可以在Body裏面寫 我們通常的習慣是做每一個Section 我們先做Section Tag 這一個Section Tag是沒有意思的 純粹是表示有一個Section而已 而這個Section Tag 我們就可以加一個ID進去 例如Intro 那這個Intro這個Section是代表第一個 那在這個Intro這個Section 由於其實我們這次這些東西Container裏面的 所以我們可以弄一個Container進去 那我們我示範一下怎麽樣做一個Container 那麽我就會開一個Div

這個Div就會有一個Class叫做Container 那在這個Container裏面我也都講過了 這個Container裏面可以運行一個 叫做Grid System的東西 將你這個Layout的Columns分成12行 這12個Columns 那就看看它需要多少 例如這些每一邊使用4 4 4的Total是12 那這一個位置就不需要分了 直接拿12行 拿完整個Container就行了 其實這些Column System 不一定是在這個Container裏面使用 在Container外面使用也行的 那我們現在暫時在Container裏面使用 如果是在裏面使用 我們會給它一個Class 我們就叫col-md-12 一會兒我在講多一點Md是什麽意思 我想做了先做給你看了先 然之後我們就會是怎麽樣呢 就會有一個H1 第一個H1就是全港最好玩的Private Party 接著之後我們會弄一個P Tag 做完了P Tag之後 有一條Link 那我們就做一個A Tag 暫時是點一個空白的地方 這個是什麽 這個是參加派對的這幾個字 接著之後我們試一下將這一堆東西Save Save完了之後 我們試一下去我們的Browser Refresh 為什麽變成這樣的 讓我看看先 原來我一開始這一個CSS 不知道為什麽Copy漏了 那我應該由Link Tag開始Copy 不好意思 Copy漏了 先刪掉了 這樣就對了 這樣有一個Link Tag 我們先Save 之後我們就Refresh 行不行 你可以看到這些東西已經居中了 為什麽 因為我們其實可以Inspect Element去看看 (右鍵) 你會看到Container 這一個淺藍色的地方就是Container 行不行 我們將東西放在這裏 它就是H1 P 這樣子OK不OK 拿Columns-md-12就是拿12行 其實你想看多一點這個Grid System是什麽 其實我們可以去Bootstrap, getbootstrap.com 然之後我們就去Layout這裏 然之後我們按Grid Grid的話 你會看到它這些Grid是怎麽樣寫的 例如他說Column Md Md是什麽 其實就是Medium Size的Mon 這個就是會顯示多少行 因為原來你在Bootstrap裏面 你可以自己定義 很大的Mon的時候 它就是拿12行 或者小些或很大的Mon的時候它是六行 很小的Mon的時候 它就變成了12行 這樣也就是本來很大的Mon可能就會是兩個Column 兩個大的Column 然之後去到小Mon的時候 它就會是一個Column 這個也都是常用的做法 如果你是懶的話 通常你就是這樣用Column Md就可以了 Column Md是Medium Size 全部的screen都適用的 那我通常都是用Column Md 行不行 這個是第一樣東西Grid System 大概地介紹了 是不是 另外一樣東西在Bootstrap裏面經常用的 就是這個Components 你會看到 其實Bootstrap本身有很多不同的Components Provide給你 例如Jumbotron Jumbotron是什麽呢 可能你看到這些這樣 其實是叫Hero的東西 叫Hero 叫Hero banner 很常見的就是有一個很大的banner上面有一些字 這些Bootstrap是叫做Jumbotron 我們會有Buttons Buttons會有一些按鈕 這樣其實原來要弄這一些 其實你看到Components是什麽呢 它已經寫好了一堆你經常都會要用的東西 例如是Buttons 例如是Input Group 你只要Copy它對應的Class去做就行了 那我這裏很快地試一下 例如我們就 我們其實現在這裏有一個按鍵 這裏有一個按鍵 我們可以給一個Class它 這個就是Btn 這樣大概是一個按鍵 那這個P 我們就可以給一個Class它 叫做lead 這個也都是很常用的Class 有時候你看到這些字大一點點 你就可以用Lead 那我在這個Container裏面加一個Div給它 這個Div是包著這個Column12

你會看到我這樣包著 像這樣Tab 就是將他們放右一點 這個Div我會給一個Class它 這個就是那個Jumbotron 為什麽我要這樣做呢 因為這個後面的位置是在Container外面的 因為它是全屏幕的 Container後面是在這裏開始的 但是如果Banner是在Container外面的 所以我會在外面給一個Jumbotron它 我加了這些東西之後 我們點Save 然之後我們試一下去我們的網站看一下 你看到我擺回來這裏 你會看到在這個Container外面 我自己寫錯了 所以應該是這樣的 這樣就對了 Jumbotron在外面 Container在裏面 這個就是裏面的東西 這樣我再Save 然後我們Refresh 行不行 那我們就做到了第一個位置 第一個位置 我們就生活 這裏就多了它 我先刪掉 Save Refresh 行不行 我們很簡單地做了大概的Layout 但是現在我們其實是什麽 是不對的那個Layout 我們要處理成對的 我們怎麽樣處理 首先第一樣東西就是用CSS處理 首先我們可以自己Create一個Folder叫做CSS 那這個CSS的Folder會安裝了我們的CSS 我們在這裏建立一個新的File 可能是叫做Style.css 我做好了這個Style.css 就可以在這一個Style的CSS裏面寫我們要用的CSS 我們首先可以調整一下這個東西的高度 這個高度你可以怎麽樣設置呢 你可以給一個實質的高度 例如可能是500Px 400Px這樣的 但是我這一個的設計 就應該不是跟實質的高度 我們是跟你現在的Mon 的實際高度是多少 我們應該是拿70%的高度 那怎麽樣寫這個東西 我們就可以說是現在你這個Jumbotron 我會怎麽樣寫呢 我會是說說#Intro裏面的Jumbotron 不知道大家還記不記得這個Selector的方法 就是什麽呢 就是在這一個的ID的東西裏面的Jumbotron 我們就可以寫我們的Style了 為什麽我會這樣寫呢 我不直接這樣.Jumbotron呢 因為你就這樣.Jumbotron 如果你的網站有很多的Section 有很多的Section 其他的都是叫Jumbotron 這樣做一做一個Style就會影響到下面的那些 所以我通常都是會加一個ID在前面 令到我只是指這一個Section裏面的東西 才受到我的Style的影響 那我們例如在這裏 你給一個Height它 我們可以用一個叫做70 就不是用PX作為單位 而是用一個VH作為單位 VH也就是整個的Mon的高度 那我們現在做的這樣東西 為什麽我Refresh了這個網站它還沒有出現 因為我還沒有做一樣東西 也都很重要的 就是是要將這一個CSS鏈接進去我們的網站裏面 那怎麽樣鏈接呢 我們可以用一個叫Link Tag的東西去鏈接 這樣的我們就會是鏈接進去我們的CSS Folder 裏面的styles.css裏面 那我Save Save它之後 我們Refresh 看沒看到 已經成功地將這個東西鏈接進去了 下一步我們想做的東西 就是可能轉換一下這些字形 由於我們現在的字形是一些什麽呢 現在用的一個字形是叫做Noto Sans 應該是這個標題 內文就是用著好像是Open Sans的東西 其實你用中文是沒有什麽字形可以選擇的 英文就多了很多 無論是做英文的話 我們通常會在標題用一個標題的字形 接著內文就是用一種內文的字形 作為一種對比 這個是很常見的 那我們怎麽樣入字形呢 入字形有幾個方法 第一個方法就是用Font Face 第二個方法選擇簡單一點的 是用Google Font 我們今天就試一試 我們可以去Google去Search Google Font 這樣就Search Google Fonts 那我們首先一來就彈出來了

如果你找不到 我們會用Noto Sans作為這個標題 我們Search Noto Sans 這樣其實你一找就找到了TC的這個 那我們點擊加號 然之後裏面的內文我們會用Open Sans 行不行 也都會是用加號 行不行 那我們按了兩個加號只好 它就已經有一堆的Programs寫給我們了 那第一個Link是什麽呢 第一個Link其實就是給你去好像這些CSS這樣 Library這樣鏈接進來 第二個就是你在CSS上面去寫這句話 那些字就會使用這些字體了 那我們首先就放下來先 那這個Link就放上來我們的Head上面 記得你們放的時候 這個都會是放在這個style.css的上面 我不會想你這個Style的CSS 永遠都是放在這一堆的CSS最下面的 因為這一堆Styles.css是你自己寫的CSS 所以就永遠都會放在最下面的 讓它可以Override到前面所有的Rules 那我們放上去了 然之後我們就可以在這個CSS打我們想要打的東西 那我會怎麽樣打呢 我通常會有一個很懶的打法 全部都標題H1 H2 H3 H4 逗號也就是And的意思 And這個Selector 這一堆的東西就會是怎麽樣的 都會是受到這個標題是這個字 行不行 然之後裏面的內文P A Input Label Textarea 還有什麽Span UL LI 那所有的這些內文相關的東西 我們就會是用這只Open Sans 這樣粘貼進去 點Save 然之後我們試一下Refresh這個網站 這樣就應該轉換了這個Font 行不行 轉換了這個Font 這樣就成功入了這些Font 那我們寫一次就行了 下一個位置 我們試一下調整一下大小 例如中間這只H1 H1這只字我們可以調大一點 例如我們是Inspect Element 那我們就去將這一個的Fonts Size弄大一點 那我可能是變成這麽大的 例如是52PX 52PX 那我們就可以將這一個Style 你記住是要你轉換一些什麽 你就指著它這個位置 Right Click按Inspect 例如我們現在要轉這個H1 就指著這個Right Click -> Inspect 這個我們學習過了 然之後就在這一個Element.style這裏 就要打我們要做的Style 例如它是52PX的 那我就調調調 OK了 52 這樣可能我就會做多一點東西 例如是Font Weight是三百 不夠粗 調到800會不會太粗了 600 500可能400就差不多了 那我們就可以加上一個Line Height 可能就是1.5 那這個是一個常用的Line Height 1.5 那我們Inspect Element 就可以將這一堆的Style Copy 擺進去我們的CSS裏面 #intro 裏面的H1 就是這一堆的Style 行不行 那我們就會也都是的 我們就不會就是這樣H1 我們會是#Intro裏面的H1 這個就是運行這一堆的Style 好的 接著之後就是Save 我們試一下Refresh 這樣成功地做到第一部分 接著之後這堆字就不用管了 然之後我們處理一下那個按鍵 這個按鍵我們怎麽樣處理呢 我們Inspect Element 加上一些什麽呢 我們加一種顏色 這只顏色就是叫做 我們可以是Background就是這一種顏色F05F5C Color就是白色 我們處理一下這些Padding 可能這個Padding是10PX 10PX 就是再隔一隔20PX 上下Padding是10PX 左右Padding是20PX 然之後我們由於這一個按鍵 這個角是再圓一點的 這樣圓角我們就是可以怎麽樣呢 就是Border Radius Radius就是20PX Border Radius就是調整那個角再圓一點 那你看到我們Inspect了這個位置 那Inspect這一個位置

上面的這個位置就是去做這個網站的Html 這樣指住了 在指住了Html這裏做我們的Style 我們應該都試過了 然之後我們Copy這一堆的東西 我們就放進去我們的網站裏面 那我們這次可以generic d, .btn 因為我們說整個網站全部按鍵都是這樣的 我們就這樣.btn 這樣行這個Style就OK了 這樣再Refresh 這樣就成功地做到了 行不行 最後我們要做的就是將這一堆東西挪下來一點 這裏挪下來一點有幾個做法 第一個做法 你就硬加上一個Margin在上面 但是這個不是最好的做法 因為現在我們這一個整個的舊東西 這個Height 現在是用一個Percentage VH作為Height 如果你的Mon短一點 它就會短一點 如果你這裏是一個Fix Height 這樣就不是很合適 所以我們會用一個方法是將這一堆東西居中 那居中可以怎麽樣做呢 其實我都是 你可以好像我這樣Google 例如是打CSS Now To Vertically Center Div 這樣行不行 那你會找到很多不同的答案 那你隨便找一個 例如是How To Vertical Alive Div 這樣就會有一些什麽的方法呢 這樣有不同的CSS做法 那我就覺得這一個做法是比較簡單的 他們會是怎麽樣的呢 他們會用一個叫做Position Relative的東西 然之後就給一個Top它 然之後用一個Translate負50% Top50% Transform Translate y負50% 這個方法就比較簡單的 那什麽是Translate y 這樣其實就是通常我們會遲一點寫CSS Animation會用多一點 暫時我們還沒有使用 所以我都不講那麽多先 但是我們就試一下將這一堆的東西Copy了先 那這些是什麽呢 這些就是這樣寫一個也都行了 這些是處理一些舊一點的Browser才要寫的 如果你說你可以也落了 其實寫了也穩當一點 但是如果遲一點你寫可能是用一些叫做Post CSS的東西 你就可以一下子將這些Transform變成了有Suffix 現在總之我不理了 我將這一堆東西Copy了 然之後我們就可以放進去我們的網站裏面 這樣我們現在就這一個Container要vertical align 所以我們就是在Intro裏面的Container 這樣就加上這一堆的東西粘貼進去 那我們就試一下 Refresh成功了 行不行 那我們現在這一個就會是自動去做一個Center Alignment 其實我們第一部分就很簡單地已經處理好了 行不行 接著之後我們就試一下處理這個Menu 這個Menu就比較麻煩 因為Menu有一些Menu 你自己寫其實都挺麻煩的Menu我覺得 因為你除了desktop 之外 你去到這個Mobile 你都要弄一個按鍵還要點擊這樣 你都要寫很多的東西 這樣幸好我們現在是使用Bootstrap 所以我們來到GetBootstrap這個網站 getbootstrap.com 接著之後去到Documentation 接著之後按Components Components一定有一個叫Navbar 行不行 Navbar就是那個Navigation 這樣其實它這裏一開始已經有一個很簡單的Navigation 那就可以讓你抄的 這個是一個Nav 那我們就試一下將這個Navigation Copy了它 Copy完了以後 我們就可以放進我們的Program裏面 在這個Section裏面 我們就放一個Nav的東西 粘貼進去以後 我們對一對這個位置 Nav就是放在這裏 行不行 我們放好Opening Tag和Closing Tag是同一個Level 我們先別弄亂了這些東西 然之後我們試一下Refresh這個網站 這樣就弄好了 行不行 但是我們這次這個Navigation就是想怎麽樣 不是Full width的 應該是在Container裏面 所以我會在這個Nav的外面 加上一個Div 就是Class是Container 這樣就包著這些東西先 行不行

Save了它 這樣就做到了 行不行 好了 然之後我們就處理一下這個Navigation 這些Navigation首先我們有一個字在這裏 Navbar一開始有一個字在這裏 是不是有一個A Tag 之後 這個Button應該是Mobile才出來的 Nav Toggle 這個Mobile才出來這個按鈕 所以我們不用管它了 那我們在這一個A Tag裏面 就先刪掉了這個Navbar 我們現在不是要這一個字 我們現在是要幹什麽 我們現在是要一張相片 那這張相片 我們就可以用Img Tag 那我們這張相片就是Pictures裏面的Logo.jpg 這樣就先Save了它 這樣Refresh 行不行 出來了這張相片 但是現在這張相片太大張了 那我們就可以調整一下這個寬度 我們試一試 又是Right click這張相片 調小一點 可能就是175PX就OK了 行不行 然之後你可以自己定 你不用跟著我的數字來做 你自己覺得這個感覺好一點 那你就用這個數字 例如是Width是173 因為這一個Navbar就會怎麽樣呢 就是有機會你遲一點有些位置 可能也都會用到 所以我就穩當一點 是的 那我就在這一個的Div外面 我們再弄一個叫做header的Tag 那這個Header的Tag 其實是很常見的 就是代表了通常是Navigation裏面要用一個Header Tag包著 這個都是沒有意思的 但是好像Section Tag一樣的 這樣只不過在這個頂部是用一個Header的Tag 那我們就用這個Header Tag 裏面的東西就偏右一點 行不行 那我們就可以說是Header裏面的Nav裏面的Logo 那你可以在這裏 反正現在這個Navigation只有一個Logo 只有一張相片 那我直接說這裏面所有的Img 其實也就是指那張相片 我懶得再給一個它Class 這樣就會是怎麽樣呢 這樣就會寬度是175PX 行不行 那我們就做到了 接著然之後我們再處理一下 處理一下裏面有一些什麽 然之後其實應該是 我們不用Dropdown的 那這裏裏面也是很常見的 原來這些Menu通常可以用一個Ul去做 那這個Ul就會是每一個的Menu 就會是一個Li的Item 如果你看到它現在這個按鈕 它多了一個Class叫做Active 這樣正常的是這一個的Li 如果有Dropdown 它就會再弄一個Class叫做Dropdown 然之後在Dropdown下面 再有一個Div叫做Dropdown Menu 就是下面的這一堆東西 然之後最後的那個 有一個Class Disabled是按不了的 所以我們應該就是用這一個Link這一個中間 這一個的Li item 所以我會將前面的這些Li鏟掉 這樣剩下了這一個Li 這個Li就先Tab一Tab它 這個Li我們有幾個字 第一個字是主頁 然之後我們再Copy這個Li再粘進去 粘貼進去以後 我們再調整一下這些位置 好的 這樣之後就是最新的派對 接著之後就是常見問題 我一次性復制完這些文字 常見問題 還有聯絡我們 好的 這樣我們去Refresh 這樣就做到了 行不行 接著之後右手邊這個Search Box就不需要了 所以我們這裏也都看到了一張Form 應該有Search Box所以就鏟掉了 好的 那我們現在其實已經是做到這一個Section 行不行 但是我們再處理一下這些Layout 例如在後面沒有底色的

那我們Inspect一下它 為什麽無端端會有底色 原來這一個Navbar 它本身有一個Class叫做.bg-light 就會令到它的底色沒有了 我試一下Untake它就沒有了 所以我們在這些Code裏面可以怎麽樣 可以將這一個的Class Bg-light 這個就是Bootstrap 它寫了很多不是Class給你了 這個就是直接它的Class有一些Style直接用就可 我們鏟掉了這個再Refresh 行不行 就沒有了 下一步就是這些靠得太近了 那我們可以Inspect 那這些是一個Li 行不行 在這些Ul這裏每一個都是Li 所以我會在這個Li這裏加一些Margin 上下是0 PX 左右是10PX 10PX夠不夠 不夠就是20PX 左右是20PX 接著之後我們可以Copy這一串的Style 這個就是在Header裏面的li 都是受到這一堆Style的影響 Save了它 好像太寬了 那我試一下調整18PX 我試一下10的 10就差不多了 行不行 這樣就OK了 是不是 差不多OK了 我覺得現在是OK的 我覺得這一個相片可以再小多一點 可以再小20PX 這樣就窄一點就好一點 行不行 看一看我們的完成品 這個完成品 可能跟我們今天做的有一點不同 因為我是前兩天寫的 今天我是日後錄這個教程又做了一次 那你會發現有一些地方 可能會有一點點不一樣 不過沒有關系的 那我們也都很快地做到了一個Navigation了 行不行 好的 我們接著做下去 我們直接close這裏 之後做到這裏 這一個Layout是怎麽樣做的 這些Layout我都不理 總之我是做第二個Section 我們就繼續寫下去 這個Section 這個Section我們給一個ID給它 可以是叫做Second 那這堆東西又是在Container裏面 那我們又是做一個Div Class是Container 我們再做一個叫Row的 剛才這裏我有沒有做這條Row 我漏了做了 我太快了 其實應該在Container裏面再給一個Div它 那這個Div叫做Row 接著在這個Row裏面才是Column-md-12這樣的 其實這個才是一個對的做法 Container Row Row就是什麽呢 也就是一列的意思 在這一列這裏有12個Column 因為我現在剛才我們這一部分只有一列 就是這一列 所以我沒有寫這個Row都沒有影響 但是如果你有時有一些Design 可能是一Row 兩Row 三Row 很多的Row就是需要這樣寫 Row接著之後就是這樣子 現在這個Refresh也都是一樣的 沒有什麽分別 不是的 我Refresh錯了 我Refresh這裏 這個都是可能多了有一點Padding的位置 它會幫你對好 但是其實大部分的東西都是差不多的 那我們這裏繼續了 這個Class是Row 那我們這次這個Design是怎麽樣的 這個Design就有一些特別 它是12個Column 但是它又不全部使用完這12個Column 其實它是用了8個Column 行不行 然之後這邊有兩個Column是空的 這邊有兩個Column是空的 那這些我們可以怎麽樣寫呢 這裏我們有一個叫做Offset的方法 這樣就是用八個Column 接著就是Offset兩個空的Column 那這裏Offset有兩個空的Column 這樣Total都是10 這樣還有另外兩個12的Column 這個就是會空了 我們就試一下 Div Class等於Col-md-8 那我先弄好了Col-md-8先 然之後我們就會有一個標題 這次這個標題我們就別用H1了 這個H1就是給最大的標題用就行了 那我們用完了一次H1 下面可以用H3 或者是H4 或者是H2 Save了它 Refresh它 行不行 現在為什麽都是偏左邊呢 因為現在我們還沒有Offset 接著之後我們要做一個Offset 我們會打Offset-md-2 這樣他就會Offset了兩個Column 看沒看到 那你問我怎麽樣記得這些的 其實你在Bootstrap Documentation裏面找

就會找到了 你或者是Google Bootstrap Offset 就會看到它現在的Offset是怎麽樣做的 還有一樣東西就是現在什麽呢 現在我們試一下Inspect Element給大家看 這個就是這裏有一個Column 8 但是這些東西都不是居中的 為什麽 因為它都是align left by default 所以我們要在這一個Div裏面 加一個叫做什麽 text-align:center 那Text Align Center的Bootstrap本身都寫了 這個就是text-center 這個又是它default做的一些Class texttcenter就是text-align:center 那我們Refresh 行不行 這樣就做到了一個標題 接著之後我們在裏面這裏就怎麽樣 裏面這裏又再分多一個叫做 可能是這裏拿一格 這裏拿三格的Layout 這樣也就是三九的Layout 或者是這裏三九 或者是4 8的Layout 這裏是四個 這裏是八個 原來我們在這一個八個Column 裏面又是可以分了12行 你可以是這樣分的 所以我們就在這一個Div裏面 這一個Column-md-8 你擺在裏面再分12行 那我們在裏面再弄一個Div 這個就是Class等於Row 然之後就是Div 這個Class就是Col-md-4 接著左邊就是Copy這一堆的東西 右邊是不是 左邊四個Column 右邊八個Column 我們試一下 Refresh我們的網站 行不行 這樣我們就弄好了 左邊應該是四個Column 右邊八個Column 現在應該可能是Align了 這裏應該是Align left 所以我們在Align了Center 所以你看到這些東西好像不是很正確 所以Column 8這裏是Align Left 這樣就行了 行不行 這樣我們就做了一個很簡單的Layout 好的 然之後就繼續打下去 我們將這些Html Element就全部打進去了 Img我們拿Picture的Inner.png 接著之後我們搞手Danny 那這裏可以再用一個小一點的H 例如是H5 好的 右邊就是一段字 這段字大一點 我們可以叫做P Class是lead 好的 弄了Class是Lead之後 我們繼續做下面有兩個P Tag 通常原來P Tag就是每一段字有一個P Tag 第一段 第二段 好了 我們Save了它 這樣就做好了一個大概這樣子的 行不行 然之後我們試一下去處理一下那些Style 首先第一樣東西就是我們在 這一個Section裏面 可能是加一個Padding Top Padding Button給它 然後讓它的位置好一點 那這一個現在我們 你看到這一個Intro和這一個Section中間 是有一點點空位 為什麽呢 原來這個Jumbotron本身它會有一個Margin挪動了下去 是不是 鏟掉了這個Margin 所以這個Jumbotron這裏 我們弄一個Margin Bottom是0PX 行不行 這樣就幹凈一點這些東西 所以我就看這個CSS這裏 Jumbotron設成0 PX 然之後我們就可以加一個Padding 那這一個Second我們可以加一個Padding 上下是80PX 左右是0PX 那為什麽我這樣加呢 因為你沒有理由這裏 你這裏自己再加一個Margin進去的 因為這些其實你全部 全部的Section都會是這樣的 所以我們可以在這裏就是說 我們可以在這裏就是說 我們的Second這一個Section就是Padding 80 0 接著之後我們可能是這一個H3能不能大一點 可以大一點的 H3就給了一個Font Size它

可能就是50PX 是的 慢慢調小了 或者是36PX 那我們就直接在這裏就是說 可能我們在上面寫H3 就是這一個Font Size Line Height都是1.5 那1.5其實是一個挺好的Line Height 但是對於文字的內文是挺漂亮的 但是如果是標題可能要再處理一下 然之後這次的H3就當然會有一個Margin Bottom 這個就是80PX 是的 那我們就Copy了它 這個就可能我們可以說是Second的H3 這個就是Margin Bottom 80PX 好的 接著之後我們處理一下這張相片 我們主要的相片 我們就點Inspect Element 這張相片我們弄小一點 可能是100PX的 100PX是OK的 因為它是圓相 我們是變成了一個Border radius是100% 令到它圓角去到最大的100% 下面再給一個Margin Bottom 10PX 這個是13PX左右 這裏是OK的 然之後我們就可以在這裏 在Second裏面的相片 因為只有一張相片就這樣擺就可以了 打錯了 Second裏面的相片 行不行 接著之後我們這個P Tag都要改一改 因為它這些P Tag會有一點點的顏色 它會是叫做#707070的顏色 那我們都馬上處理一下這個顏色 P Tag是有一種顏色是707080 或者我直接在這裏打P Tag 這裏是P Tag #707070 那我們就可以在上面就寫上P Tag 顏色是707070 Save了它 然之後我們Refresh 我們Refresh完了之後 我們會造成上面的這個P Tag也都變成灰色 我們先寫好了 這個就是P.lead就是變成了黑色 那這一個寫法是什麽來的 這個P Tag跟這一個P Tag是一樣的 這個有一個Class Lead 你看到我是黏著寫的 不是這樣有間隔的 原來黏著寫就是同時要這兩個條件符合 它是P Tag 它也是Class 是Lead 例如它有兩個Class是.Active.lead 這樣就是它同時有這兩個Class才會是受到這一堆的影響 那p.lead這些就是P Tag 它有一個Class是在Lead這裏 就會變成了黑色 行不行 那我們很快這裏就可以是 完成了第二個Section 到了下面這裏 最新派對這裏 那們我繼續做第三個Section Section我們可以給一個ID它 這次我們叫做Latest 那這個Latest Section也都是給一個Div它 Class就是一個Container 有一個Row 這次第一個Row就先擺一個標題 這樣就是Div 一開始是用Col-md-12就可以了 這樣就擺一個標題H3 這個就是最新派對 好了 然之後下一行 下一條Row 我試一下可不可以處理成三排的 Save了它 接著之後我們Refresh

這樣大概就做到了 這個H3我們要Text-Center 這樣這次這一個的Section都是會有一個的Padding 這樣還會有一個底色 我們換成灰一點的底色 這個是很常見的設計 也就是你會看到 它用一個Rgb 248 248 248的底色去做的 灰色一點的底色 因為你是兩個的Section 你要分開兩個Section 我們可以寫灰一點的Design 那我們就可以ID是Section Latest ID是Latest Padding也都是80PX OPX 接著就是Background Rgb 248 248 248 好的 那我們就做到了 接著這一個的H3 這個都是用一個Margin Bottom 80PX 行不行 那我們繼續做這一個Card 這個Card的Layout會是麻煩一點的 它會在這裏有一張相片 相片上面有一些字 相底就是怎麽樣的 就是都有一些字的 那我們就試一下做了 好的 那我們在這裏 我們通常這裏 我們開一個Div 大的Div給它 那這個Div就是怎麽樣的 可能就是有一個Class是叫做Outer 在外面整個的Div 那裏面我們再開多兩個Div給它 一個就是upper上面的 還有lower下面的 那在裏面我們就會有一張相片 是不是 就等於Pictures的Inner.png 然之後這張相片的上面會overlay一些文字 那我們可以繼續打了 在這裏再給一個Div它 這個Class就是可能叫做Inner Text 接著之後我們就有幾段文字 那我們就Copy了它先 可報名 這個文字用什麽Tag呢 你可以用A Tag 但是因為我們這裏整個的東西都按到 那我們會用一張A Tag 擺了整塊的東西 所以我們這裏用Span Tag就可以了 可報名 然之後應該就是 男380 女280 好了接著之後 我們Save了它先 看一看做了一個什麽東西出來 這個都能接受 因為我先處理了上面的這一堆東西 那我們怎麽樣處理呢 首先這個相片就是怎麽樣的 這個就是它爆了出來 爆了出來怎麽辦呢 其實這個相片爆了出來經常都會發生的 所以我們通常都是會寫Image 這個就是會怎麽樣呢 我們就不是直接會給一個寬度它 這個就是Max-Width是100% 最大的寬度是100% 這個我們是通常會下的 我寫那些網站 很多時候都會寫Max-width是100% 這樣就是最大的寬度 這個就是100% 那我們Refresh Refresh就會是OK了 那這個是Mobile都會經常發生的 因為Mobile裏面的Mon小 很容易會爆出來 所以我們加了max-width:100% 那些相片就不會爆了Mon 講起Mobile 我剛才遺漏了一點東西 我們去到Bootstrap的網站 去Documentation 然之後你就看到它在 例如Starter Template這裏 就會有一個Meta Tag 那這個一開始會有一個Meta Tag是什麽 這個就是叫做Name是Viewport Content是Width

等於Device Width Initial Scale Shrink-to-fit 那這句都應該放進去 那你放進去之後 就會怎麽樣呢 你一放進去之後 你在這個Head這裏 其實這一個放了之後 你做Responsive就會容易一點做了 放了之後 它也都有寫的 如果你放了之後 你滾動下去一點 Responsive meta Tag 這樣就需要 總之是放進去它的Responsive Viewport 就會漂亮一點 是的 這樣你就可以放這一句 好的 那別講那麽多 我們回來這裏的畫面 我們成功地怎麽樣 做了一個Box 這次我們就 這對東西是在這個Image裏面的 所以我們要將它Inspect它 接著指著Inner Text 現在飛到外面是正常的 那要飛進去裏面 我們要怎麽樣做呢 這樣我們可以用 一個叫做Position absolute的東西 Position Absolute記不記得是什麽 對應包著它的Element 它位置是在哪裏 這樣我們可以用Position Absolute 它的Bottom 我們試一下這個Bottom是0 PX 這個Left是0 PX 那你有沒有看到它是立即在這個Box這裏 那還有一樣東西也要做的 這個就是其實因為Position Absolute的用法 就是需要它對上包著的東西是Position Relative 所以我會是Upper這裏加一個Position Relative 這一個Inner Text就對了 因為Position Absolute 就是對應這個Upper這個Div 就會是它的Position的位置是在哪裏 是不是 那我們就 現在就是0 PX 那我們就試一下Bottom是高一點點的 是的 24這樣的 Left也都是多一點點的 行不行 24的 兩邊都是24 好了 然之後我們就可以Save它了 就可能是Latest裏面的.inner text 就會是好像Absolute Bottom 24 Left 24 然之後Upper這裏就是怎麽樣 就是Position Relative 行不行 這樣我們就成功地將這些字擺上去了 那Position Absolute就是這樣用的 好了 那我們處理好這一個的Span這個 這個Span就會是Inspect它 接著之後我們可以給一個Background它 這個可能就是Rgba 因為我這次是想Background是白色 但是有一點點的透明的 這樣就是255 255 255 這個就是白色的 然之後我們加一個透明度0.7這樣 那Padding就是10 PX 接著之後就是6PX 20PX 接著Border 0.7好像太透了 0.3 然之後我們就可以大一個Body Radius 然之後就是20PX 行不行 那我們就做了Span Tag是這樣的 那我們就會說 在Latest裏面的Inner Text Span 行不行 就會運行這堆Style 接著之後下面這一個的H4 就可能是小一點 20PX 22的吧 給一個Margin Top它 行不行 這樣就OK了 裏面的H4 行不行

這樣我們很快就做好這一堆東西了 接下來可以做好下面的這一部分 那這一部分 我們就Lower 我們做一個H3的 狂歡派對 然之後我們可以做兩個Span Tag 一個就是香港銅鑼灣某某7樓全層 接著就是Nov. 3 這樣我們完成了 好的接著我們處理一下這些Size Font Size就是20PX Font Size是24PX 接著之後我們可能是Margin是0 或者是Margin Bottom是12PX Margin Top是12PX 行不行 那我們就Save它 H3 Inner Text裏面的H3 這個不是Inner Text 是在lower裏面的H3 行不行 接著之後我們有兩個Span Tag 那中間加上一個Br先 那這裏的Span Tag還會多一個Icon 好的 Icon怎麼樣做呢 Icon都會是常見的 Icon我們可以用一個叫做Font Awesome的東西 那我們一起去fontawesome.com 原來Icon通常會用一個Font去落 很少說再弄一張相片在這裏這麼辛苦 那我們可以Start For Free 這個Start For Free 這個Start你可以Download下來 或者是懶得話 你可以打這個Email 它這裏逼你先寫了這個Email 才可以拿到這條的Link 那我就很快寫好了這個Email 接著之後你Check了這個Email 就可以看到那條Link了 那我們一起去我們的Email裏面 那他這裏叫你Confirm這個Email 就可以拿到那條Link 那我們一起點Confirm那個Email 那它就逼著你註冊了 那我就隨便註冊了 這樣就Skip了 好了 這樣就會有一條這樣的Link 我們Copy了這個Link 那我們擺進去哪裏 我們擺進去這個Vertical Studio Code裏面 裏面頂都行的 頂部或者尾部都行的 頂吧 這樣我跟著它指示的Head 接著做好了之後 我們可以幹什麼呢 例如我們這裏要做一個Address的Icon 接著我們就可以Copy這一條的Html 是一個I Tag 有一個Class 接著之後我們就可以放進去了 放進去這個Span Tag的前面 可能這個I Tag隔一隔 就會Save它試一下 你Refresh 是不是就會出來了這個Icon 接著之後時鐘 時鐘這裏我們就Search這個Clock 那我們又隨便點一個Icon 那這裏就有一個Html Tag

我們又是放進去這裏 隔開一下這樣 一會兒的時間 我們就已經做好了兩個Icon 行不行 這裏的這個Icon右手邊想挪右一點 所以我們Inspect Element 這個是I Tag 我們試一下給一個Margin它 Margin Right是10PX 或者是6PX 好不好 這樣是一個I Tag 所以我就可以說是Latest .lower I 就會是有一個這樣的Margin Right 行不行 我們成功地是做到了 好了 這裏還有一些東西 這個Box是白色的Background 有一些Padding 還有它會有一些shadow的東西 那這些shadow的東西 我都是上網去抄的 我很快地做一次給你們大家看Upper 原來這個 我首先做一個Background是white 我不是寫在這個Upper這裏 我是寫在這個Outer這裏 整個的Background是White的 是不是 Heading可能是20PX 而Padding我就不在這裏寫了 因為在這裏寫影響了相片 我在這裏只是加了一個Box Shadow在這裏 你有沒有看到 多了一個Shadow在這裏 我們可以Copy在Latest.outer這裏 就會是有一些Background和Box Shadow 另外這裏的Lower這裏 我們加一個Padding 可能Padding上是20PX 10PX 右邊是20PX 左邊是20PX 底是20PX 因為剛才我那個H寫下來了一點Margin 所以上面的那個可以短一點 然之後我們Copy這裏.lower 那我們做得差不多了 是不是 還差一些什麽 還差按鈕按不了 按不了 這個很簡單的 我就整個的是Outer 我這裏做一個A Tag 這樣就包著下面的Outer這些東西 用Div 試一下Refresh Refresh完了之後 因為它是A Tag 它本身A Tag自己是有一些屬性的 所以我們將這些屬性全部拔掉 就說是在這個的latest的A Tag就是怎麽樣的 這個顏色是變成了Black 而且當它Hover之後 你看到Hover之後 是會有一個Text Underline 那我這裏就Text decoration是none 行不行 那我們很快就做好了 也都不是很快了 我們都用了一段時間才做好這個Layout 但是這個Layout是比較復雜的 所以都是值得大家去學習的 好的 我們做完一個就很簡單了 接著將下一個 將這個Div Col-md-4放兩次放進去這裏 然後粘貼進去 再粘貼進去 行不行 那我先Save了它 現在我就幾經辛苦現在就做到了這一個Section 那我們就繼續了 我們下一個Section 就是這一個Email List Section 這個Email List的Section也都是用一個8的Column 接著offset兩個 那我們就試一下 做一個Section Tag ID是Email Container 做一條Row 然之後我們可以Div Offset-md-2 好了 接著之後我們就會是H3 做一個H3下面就有一個 這個就是做第二條Row 因為這裏的H3是Align Center的 是不是

接著下面的這個才是Align left 接著我們有一個P Tag 接著就會有一個 這個怎麽樣做呢 這個我們也都可以看回來這個 用到那些Components Bootstrap 那這些是Input Input Group 這樣其實有很多是可以選擇的 那隨便用第一個 或者我先看看Sizing 那這一個應該是大一點的 我們用一個Large Size 也就是這一個 最後有一個Button Button我們是應該有一個A Tag 我就抄寫最上面的這個 但是這些字就需要變一變 變成了這個提交 好的 然之後我們試一下Refresh 這樣做完了 漏了一個Container Class Div Class等於Container 那我們這一個Div應該是在這裏刪的 我剛才刪錯了 因為這一個Div是整個的Column 8的Div 這樣就對了 行不行 那Large這堆東西就不用了 之後就是這樣了 行不行 那我們處理一下這些位置 這個都是加上一個Padding 好的接著在這個Email的h3 Margin-bottom是80PX 這樣提交那裏這樣就加一個Br加多一行 這裏我們就會加多幾個字是你的電郵 那這些叫做什麽呢 這些叫做Placeholder, 在input上加的attribute (你的電郵) 行不行 這樣我們很快就做好這裏了 好的 最底的這個Section 剛才我們講過了最頂的Section是叫什麽 叫Header 最下面的Section我們是做Footer 所以我們會在這裏開一個叫做Footer Tag 又是沒有意思的 只不過我們手勢習慣了 就是這樣寫的 Footer Tag都是一個Div Container Div Row 那這次就有444 這裏的字都會是Align left 所以再加上Text Left 接著之後我們會有一個Image 這個Image是一個Logo 接著有一段P Tag 好 看一看先 OK了 只不過我們這個Footer 也都可以加D Style 例如我們可以給一個Border Top它

1PX Solid 這裏Border Top如果放在Container裏面就不行的 所以把它放在Footer那裏 Border Top 可以灰灰一點的 這個都是做一個Padding 那我們就將這堆東西 放進去這裏Footer 好的 關於Footer這個相片再弄小一點 可能是Width 100PX 給一個Margin Bottom它 行不行 接著之後就是第二個Column 我們先去Copy這堆東西 然之後就是標題 我做好最後的那個先 最後的那個容易做一點 因為中間的那個是一些Tag 這個麻煩一點 Sorry 接著之後就放這一堆東西 這裏做一個P Tag 這裏的每一句之間加一個Br 最後的這個因為是Email 通常都會是加一個A Tag 這個就是Mailto 這個Mailto就是那些人一點就自動的 如果你的機有Outlook的話 或者是Macbook有Mail這個Software 那它就自動彈出這個Email地址出來 讓你鏈接去那裏 那我們試一下Refresh 行不行 同樣的道理 我們也都是在那個Footer的H4 加上一個Margin bottom 行不行 這樣Footer的A也都是 你可以轉成這種的顏色 上面提交這裏 加一個Br先 加了 再加一個 這裏為什麽沒有反應 就是因為我這個A Tag應該是在這個Input Group外面 在這個Div外面 這個A Tag才會在這裏 現在這個A Tag就要加上一個Margin 那我在上面先寫好 Email的 我可以說這個Input Group的Div 做一張Margin bottom 行不行 這樣就OK了 下面的A Tag 我想轉換成這種紅色 所以我就Footer這個A 這個就是紅色 接著中間的連結 連結之後就弄兩個Unorder List 這樣就會有每一個的li 這樣我們就照著做 Ul其實這個我們再做一個A Tag 弄兩個Unorder List 好的 加上一些字先 最新派對 行不行 這裏因為本身By Default

那個Ul Tag就會是有一些點點 所以我們在這個Ul Tag 我們會是加上一個叫做List Style是沒有的 padding變成了零這樣就行了 試一下轉換成黑色 轉換黑色沒有反應 應該是在li這裏轉 那我們放在這一個先 我們可以做多一樣事情 因為這裏的這兩個List也都是Ul 那我們可以Float他們 記不記得我們學過Float 就是將這些字擺在相片的隔壁 Float:Left 那我們就將這兩個的Ul 加上這個 然之後Footer的Li就是這只色 這只色是什麽色呢 這只色是707070 行不行 這裏可能要加上一個Margin White 這個就是20PX 倒退一下 你想再多一點 你就加大一點變成50PX 這樣再加多一個Margin Bottom 在這些Li這裏加 Margin Bottom的時候 好的 那我們就搞掂了 七七八八了 如果只是講Desktop的Layout 那我們就做了出來 行不行 下一步我們看完Responsive 其實Responsive 我們用Bootstrap 它本身已經Handle了很多Responsive給我們 例如我們弄小一點這個的Mon 例如手機的話你會看到其實都不太差的東西 是不是 不是很差的 不是說炒到嘔吐的 這個勉強都可以使用的 但是當然有一些細節的地方 我們要處理一些 那我們一起去處理一下 其實這個Responsive就是逐個的Mon Size去看的 那我們看小一點 1200看看有沒有問題 沒有問題 1200 沒有問題我們就再繼續看下去 再小一點 我們Inspect了Element 點了Inspect Element 你去處理這個Mon的大小 你就看到了一個數字 那我們就要逐個Responsive 我們就要逐個的Screen Size去看 首先我們去看了1200的先 處理小一點1200 因為1200的那些是Ipad的東西 你看到一開始這些地方有一點點爆了 但是都還好 這個都沒有怎麽掉的 如果是一千呢 這個都OK的 這個Bootstrap真厲害 900多 900多 你看到其實都OK的 這些東西都是好的 那我們再弄小一點 去到700多 700多這些其實是近Mobile的Layout 這個Mobile就是這樣子的 行不行 Mobile就是四百多 但是有一些大一點的手機都會是700多的 所以我們看看它breakpoint在哪裏 應該是上到768 小於768就會是一個breakpoint 那這裏有一些東西要處理一下 例如這一個位置 加上一點點空的地方 所以我們就會怎麽樣 那我們就會在這個CSS這裏 寫一個Media Query 就是說當它小於768的時候 這個就運行一些Style 這個就是這一個Mon Size才會有的 例如在Second的H5 我們給一個Margin Bottom它 可以給多一點 可能我給一個Margin Bottom是60的 或者可能是3的

Second的H5 好了 給到了 然之後還有什麽要轉換的 這裏的每一個Box都怎麽樣 都加上一些Margin Bottom 因為現在都黏在一起了 Margin Bottom 輕輕地加上一點 是的 Latest Outer 是的 這樣這裏有一個空線的 為什麽 那我們處理一下 這裏這條Div Upper Image 這個Image就沒有拿到最大 可能是不是不夠大呢 這張相片 也不是 試一下先 如果我加的寬度是100% 那它就Fill好了 所以我們就是說在Latest 這裏是Latest的相片 Width了100% 行不行 是的 這樣最後這個Footer 可能離開一點點的位置 Footer的H4全部給一個Margin Top它 50PX 或者是35PX 這樣就Save它 那你就看到我們很簡單地收拾一下 收拾到這個Mobile都OK了 讓我們試一下 在這裏按一下Simulator -> Toggle Device Toolbar 那你覺得都不錯的 已經是Responsive了 那這些Link 我們全部都還沒有弄 就是這樣的 這樣已經我們就做好了整個的Layout出來 謝謝你收看我們今天的教學 有什麽問題記得留言問我 如果你們覺得這種教學好的話 記住留Email Subscribe去做我們的Email Subscriber 我們有一些Exclusive的training只是給我們Email Subscriber 今天先到這裏 下次見 拜拜