響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

第四階段
w3.css協助專案設計

第五階段
自行開發網站專案設計

第六階段
Pug(Jade)&Sass協助開發效率

=== TSuiling write 2018.07 ===

響應式網頁前端設計【第三階段】Bootstrap協助專案設計

準備首頁第一層框架

準備首頁 index.html 檔案

準備首頁第一層框架

<body class="bg-secondary">
  <section id="sec1"> </section>
  <section id="sec2"> </section>
  <section id="sec3"> </section>
  <section id="sec5"> 
    <footer class="bg-dark">
      Copyright © 2015 TopStyle Watch Web | 建議使用 Chrome 瀏覽器 | Maintain by TS <br>
      (網站設計模擬練習用,相關影像資訊來自連結介紹的各網站,如有侵權請告知即刻處理)
    </footer>
  </section>
</body>

設計 CSS 樣式

準備 layout.css 檔案,設定 index.html 連結到 layout.css。
設計 CSS 樣式,讓每一個 section 的最小高度為一個螢幕的大小,並且設計不同的背景影像。

Bootstrap 的 Color 參考:Bootstrap(中)w3schools(英)RUNOOB(中)