因為又要為之前的客戶做教育訓練…所以整理了一些之前專案用的技術，必學的部分，比較進階的就不教了XD

Bootstrap 3

RWD - 響應式網頁設計(Responsive Web Design)

優點:

• 適應不同螢幕尺寸
• 開發維護成本低
• 分享網址好用
• GOOGLE 愛用
• 不用到 APP 商店下載

缺點:

• 須注意載入時間(因為圖片需要手機版一張, 網頁版一張), 可利用工具檢測
• 瀏覽器版本過低不支援(IE6, IE7)
• 瀏覽動線問題(版面問題)
• 功能取捨(版面問題)

Bootstrap 3 - offical site

https://getbootstrap.com/docs/3.3/css/

Bootstrap 3 - 中文網(強國翻譯的)

https://v3.bootcss.com/

Bootstrap 3 - w3Schools

https://www.w3schools.com/bootstrap/default.asp

容器 (containers)

https://bootstrap.hexschool.com/docs/4.1/layout/overview/#containers

1
2
3

<div class="container">
  <!-- Content here -->
</div>

vs

1
2
3
4

<!--就像水在流動-->
<div class="container-fluid">
  ...
</div>

響應式斷點

https://getbootstrap.com/docs/3.3/css/#grid-options

響應式圖片 (img-responsive)

1

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

欄的推移 (grid-offsetting)

https://getbootstrap.com/docs/3.3/css/#grid-offsetting

巢狀 (grid-nesting)

https://getbootstrap.com/docs/3.3/css/#grid-nesting

表單 (Forms)

https://getbootstrap.com/docs/3.3/css/#forms

Bootstrap 4

Bootstrap 4 - offical site(中文)

https://bootstrap.hexschool.com/docs/4.1/getting-started/introduction/

Bootstrap 4 - w3Schools

https://www.w3schools.com/bootstrap4/default.asp

容器

https://bootstrap.hexschool.com/docs/4.1/layout/overview/#containers

1
2
3

<div class="container">
  <!-- Content here -->
</div>

vs

1
2
3
4

<!--就像水在流動-->
<div class="container-fluid">
  ...
</div>

響應式斷點 (responsive-breakpoints)

https://bootstrap.hexschool.com/docs/4.1/layout/overview/#responsive-breakpoints

grid system - 自動佈局的欄 (auto-layout-columns)

https://bootstrap.hexschool.com/docs/4.1/layout/grid/#auto-layout-columns

響應式圖片 (responsive-images)

https://bootstrap.hexschool.com/docs/4.1/content/images/#responsive-images

1

Bootstrap 中的圖片可利用 .img-fluid 設定為響應式。

巢狀 (nesting)

https://bootstrap.hexschool.com/docs/4.1/layout/grid/#nesting

no-gutters 無間隙 (no-gutters)

https://bootstrap.hexschool.com/docs/4.1/layout/grid/#no-gutters

對齊 (alignment)

https://bootstrap.hexschool.com/docs/4.1/layout/grid/#alignment

欄的推移 (offsetting-columns)

https://bootstrap.hexschool.com/docs/4.1/layout/grid/#offsetting-columns

表單 (Forms)

https://bootstrap.hexschool.com/docs/4.0/components/forms/

• ← Previous Post