CSS 框架
優點
- 規範一致
- 快速開發
- 維護便利
Bootstrap
優點
- 完整度高
- 學習曲線低
- 可擴充 (SCSS)
- 官方文件齊全
- RWD 控制方便
- 透過
class
組合,簡單的需求甚至不需要自己寫css
- 不需要編譯器編譯 (相對於
Tailwind CSS
)
缺點
- 只能滿足 90% 需求
component
構成複雜(善用文件)- 眾多
!important
,覆寫彈性降低 - 大量
class
組合,主體辨識度較低 - 不支援 IE 11 以下瀏覽器
引用
Breakpoints
Breakpoint | Class infix | Dimensions |
---|---|---|
Extra small | None | < 576px |
Small | sm | >= 576px |
Medium | md | >= 768px |
Large | lg | >= 992px |
Extra large | xl | >= 1200px |
Extra extra large | xxl | >= 1400px |
Containers
Extra small | Small | Medium | Large | X-Large | XX-Large | |
---|---|---|---|---|---|---|
.container | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
Grid
xs | sm | md | lg | xl | xxl | |
---|---|---|---|---|---|---|
Container | 100% | 540px | 720px | 960px | 1140px | 1320px |
Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
# of columns | 12 | 12 | 12 | 12 | 12 | 12 |
Gutter width | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem | 1.5rem |
Images
https://getbootstrap.com/docs/5.2/content/images/
Tables
https://getbootstrap.com/docs/5.2/content/tables/
Alerts
https://getbootstrap.com/docs/5.2/components/alerts/
Buttons
https://getbootstrap.com/docs/5.2/components/buttons/
Forms
https://getbootstrap.com/docs/5.2/forms/form-control/
Accordion
https://getbootstrap.com/docs/5.2/components/accordion/
Spinners
https://getbootstrap.com/docs/5.2/components/spinners/
挑戰
無 CSS
登入畫面
<div class="d-flex justify-content-center align-items-center vh-100">
<div class="p-5 bg-dark text-white">
<h2 class="text-center ps-5 pe-5">System Login</h2>
<hr />
<div class="mb-3">
<label for="login-account" class="form-label">帳號</label>
<input type="text" class="form-control" id="login-account" />
</div>
<div class="mb-3">
<label for="login-password" class="form-label">密碼</label>
<input type="password" class="form-control" id="login-password" />
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="login-remember" />
<label for="login-remember" class="form-check-label">記住密碼</label>
</div>
<div class="text-end">
<button class="btn btn-sm btn-danger">登入</button>
</div>
</div>
</div>