歡迎回來，在這節課我們將繼續在你的陣營工作。
我們已經完成了初始設置。
我們已經做了一些基本的佈局添加頁眉和頁腳巴歇爾的我們增加了自舉和我們增加了創造新的露營地的功能。
現在，我們將使用在引導式去露營地的頁面。
所以，讓我們開始吧。
我會做的第一件事就是確保我的服務器都在運行。
而就看看有什麼我們現在有。
這絕對是一個給人留下深刻印象不大。
所以，我有兩個主要目標。
第一個就是我們要在冠軍更好的頭在這裡所以這應該看起來更好。
我們將使用什麼叫做在引導一個超大屏幕，然後還有露營地露營地的名單不應該只顯示垂直這樣。
相反，我們希望較小的圖像的網格去跨越那格應響應。
讓我們先從這是越來越看起來有點更好這個標題文本的第一個。
所以我要去開拓，是的，我只是要在這裡工作露營地。
所以我要去，因為我們將要寫了不少了HD郵件來調整這個一點點，我們不會與終端做任何事情。
因此，在我們將要使用的，我們還沒有見過一個標題標記頭工作。
在功能上它工作的具體方式有點像一個div一樣。
唯一的區別在於，這具有的語義到一點點。
使用標題，而不僅僅是一個任意分區，但它其實並不重要，它只是一個容器。
而我們要去給它一個類的超大屏幕，然後在它的內部，我們要添加的也只是複製此H-1實際上，我們將剛剛離開它，節省弗里戈和刷新我們的頁面。
我們現在有什麼所謂的超大屏幕。
它仍然不是很大。
我們應該做的下一件事就是做一個引導容器內的一切。
所以，我們在這裡看到這一切我要縮進，我要添加一個div與課堂上的一切等於容器就這樣。
然後，我們將堅持一切裡面，這會增加一些speccing我們兩側。
刷新。
你可以看到，我們不再有東西正對著左側在這裡。
我們有一些空間，我們的超大屏幕正在一點點接近，最終將有一個蹩腳的酒吧出現。
因此，這看起來有點更好的為好。
現在我們只是有超大屏幕。
現在，讓我們改變文本自身。
因此，而不是這就是露營地頁面，讓我們把一個值得歡迎的消息，歡迎來到營地。
隨意把你想要的任何內容，我也將添加在我將添加一點點一種標語段落的段落，我只想說我們查看的手，拿起從露營地在世界各地。
類似的東西並不重要。
我們可以節省刷新。
OK，現在我們有一個小標記線，我們想要做的最後一件事是拿這個環節的照顧。
添加新營地的鏈接。
所以，我要複製，並把它的超大屏幕內。
不過我要使它成為一個按鈕。
一個引導按鈕，這樣做還是先添加一個段落，然後把錨標記裡面。
而我這樣做只是為了間距。
你想這是它自己的行，然後我要去給按鈕類多類PTEN ETN主要對顏色和破折號大這樣的，將節省的。
現在，我們已經有了一個新的營地按鈕。
我們點擊它，它需要我們去那是完全的風格形式。
一個小的事情是，如果我在這裡調整這個窗口。
請注意我們的文字如何去正對著超大屏幕的邊緣，這是不是很大。
在這裡，我們有一定的間距，他們要保留間距就是我們需要做的僅僅是添加了超大屏幕內的另一個容器，DIV級等於容器，然後到這裡的超大屏幕裡面在閉幕DIV結束前，然後就縮進一切。
現在，如果我們刷新。
她看著相同的，但是當我們縮小下來，我們現在有一些空間那裡。
OK所以這是頭部分。
現在，我們要上的圖像的網格工作，我會衝到前面和你在一起。
這絕對是一點點更多的工作。
OK，讓我們開始網格上，我們要創建一個行，以便DIV級等於行就這樣開始，我要開始只是在這裡一點點消息。
因此，我們要添加一個div類的equals，我打算讓這只是佔用了整個寬度，我們只是要在這裡有一個消息，H-3，說我們最流行的網站，你知道的露營地不會像很多。
現在，讓我們頭回過來，讓我們通過DIV類行，我們需要在一排在我們的小學都開始增加。
這是一個div類的equals行就是這樣。
而現在我們要談這個每個循環，因為我們真正想要做的是什麼，而不是我們行的，我們要讓有一列類，並用引導網格列的div每個營地內網格。
所以我要做到這一點，現在我要去哪裡把這個代碼的所有每個迴路要縮進就這樣。
然後，我們在這裡需要我們關閉div標籤。
因此，這是對傳統的行，這是用於容器。
好。
所以ative類行，而不僅僅是離開這個內容，因為它的div和這裡對圖像的H我們仍然有一個形象，但我們要改變這個div，使它有一個類中列三列小6，這只是使它響應使我們得到一些較大的圖像時，屏幕尺寸更大。
然後當我們縮小下來它會下降到每行只有兩個影像，然後將進一步縮小到每行只有一個形象。
所以裡面的，我們實際上是要在另一個div添加這個DIV將不得不類縮略圖這是一個引導類，這將有助於我們做出一個小卡片就會讓一個小格子裡面項目的縮略圖將增加圖像開始就這樣。
我們必須等於你RL營地影像服務而我們只是停留在這一點。
而我們要擺脫這種現在，只是保存，讓我們看看我們得到什麼，如果我們是新鮮的。
好吧。
因此，我們有圖像的網格現在。
這裡只有3條，但我們正在這個網格。
我會告訴你我的意思通過使其反應。
因此，作為一個縮小這些注意它如何改變兩個正方形或在屏幕上的兩個項目。
請記住，有12個單位。
因此，我們不得不首先什麼我們把它分為四個單元，他們各自拿出了三個單位，然後當電網變得更小就在這裡，他們每個採取了六個單位，甚至更小，它會自動轉到之一。
而且，我們也沒有寫，因為額外的小默認使用12個單位。
所以，我們沒有指定。
現在，讓我們拿到冠軍早在這個營地的名稱而非只是一個年齡一做一諾特爾引導類的div類的equals標題就這樣。
然後裡面會放一個H的露營地名稱。
OK讓我們保存讓我們看看是什麼樣子。
在那裡，我們走了。
我們得到這些可愛的小卡片。
這是微縮類做了我們。
我們有我們的形象。
讓我們只看到它是什麼樣子，如果我們有一大堆的圖片在一堆物品去的。
所以，你不必這樣做，但我會粘貼在這裡。
只要給我們一些更多的數據。
這將是重複的數據，但是這很好。
然後，我們需要確保我們添加正確的逗號，因此逗號那裡要來那裡。
現在，如果我們刷新哦，我們需要重新啟動服務器。
每一次我們惹的應用程序。
是。
現在如果我們刷新，他會看到我們有一個小問題。
我們的電網是一個有點混亂。
而什麼情況是，我們有不同高度的圖像。
因此，這鮭魚溪人比這些不同的。
即使寬度是在這種情況下是相同的。
這就是擺脫網格，並有一個簡單的方法來解決它，雖然它是一個有點靠不住。
我會告訴你我們是如何做到這一點，而不是我們的露營地。
是。
在班排的一天我會在一個樣式屬性添加，我只是要暫時做到這一點。
我們將移動這外部樣式表，但我會只是做在線，使您更容易看到的。
因此，我們設置樣式進行柔性顯示和柔性包裝是包裝。
而這些都是兩個屬性將幫助我們的格掉。
所以，如果我是新鮮的現在，我們結束了與電網的地方更靈活。
沒關係，我們有一些不同的高度，因為現在在網格適應如此有這兩者之間更大的空間，那裡它在這裡。
基本上它計算出所需要的，我們可以擁有的一切是在自己的行在一起，我們可以擁有一切完美對齊的最小空間量。
還有就是我們可以做一個其他更改這是要回去，並添加文本中心這是我們的引導，這將使我們的文字居中在那裡。
我認為，這看起來更好一點。
也和個人喜好的問題，現在我們正在與露營地完成頁面的暫時。
希望，告訴您如何引導才能真正幫助我們可以比從頭開始做這個事情很容易更是如此。
而讓我告訴你我們的，我們有很好的響應電網。
因此，這是在移動設備上。
我們得到這個很好的佈局一路攀升至四個圖像去跨越。
行，所以我與如何看起來很開心。