CSS 框架

優點

  • 規範一致
  • 快速開發
  • 維護便利

Bootstrap

優點

  • 完整度高
  • 學習曲線低
  • 可擴充 (SCSS)
  • 官方文件齊全
  • RWD 控制方便
  • 透過 class 組合,簡單的需求甚至不需要自己寫 css
  • 不需要編譯器編譯 (相對於 Tailwind CSS)

缺點

  • 只能滿足 90% 需求
  • component 構成複雜(善用文件)
  • 眾多 !important,覆寫彈性降低
  • 大量 class 組合,主體辨識度較低
  • 不支援 IE 11 以下瀏覽器

引用

官方網站

Breakpoints

BreakpointClass infixDimensions
Extra smallNone< 576px
Smallsm>= 576px
Mediummd>= 768px
Largelg>= 992px
Extra largexl>= 1200px
Extra extra largexxl>= 1400px

Containers

Extra smallSmallMediumLargeX-LargeXX-Large
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px
.container-fluid100%100%100%100%100%100%

Grid

xssmmdlgxlxxl
Container100%540px720px960px1140px1320px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-
# of columns121212121212
Gutter width1.5rem1.5rem1.5rem1.5rem1.5rem1.5rem

demo

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 登入畫面

demo

<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>