響應式網頁前端設計

第一階段
加強熟識HTML&CSS

第二階段
學習JavaScript&jQuery

第三階段
Bootstrap協助專案設計

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

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

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

=== TSuiling write 2018.07 ===

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

網格分配的圖文排版

RWD網格系統,參考:Bootstrap(中)w3schools(英)RUNOOB(中)

  Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

網格分配的圖文排版

<h1>新名錶新消息</h1>

<div class="container">
 
  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>
  
  <div class="row">
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
  </div>
  
  <div class="row">
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
  </div>
  
  <div class="row">
    <div class="col-12 col-md-7 col-lg-8"> 文 </div>
    <div class="col-12 col-md-5 col-lg-4"> 圖 </div>
  </div>
  
</div>

調整 CSS 樣式

設計在手機版時,每一個.row的下方有橫線,除了最後一個.row的下方不要橫線。

設計 h2 標題文字的樣式。

設計 p 段落文字左右對齊。