bs

熟悉度？

• CSS
  • Box Model?
  • 權重?
  • 怎麼看console?
  • flexbox?
  • display?
  • css basics
• BS

Intro

• introduce with component

Getting started

• 如何安裝使用
  • introduction
  • download (or npm?)
  • 檔案結構、@import
• Content
• Javascript 最後說

Components

• Layout
  • Breakpoints
    • Mobile first
    • class infix (以下為預設值)
      • sm (Small devices) phones
      • md (Medium devices) tablets
      • lg (Large devices) desktops
      • xl (X-Large devices)
      • xxl (XX-Large devices)
    • class 同時寫在一個元素 (element) 上的時候沒有 Class infix 的 class 會在畫面縮到最小時一定會生效
      • eg: class="col-12 col-md-6 col-lg-3" 手機版 col-12 會生效，畫面大於 md 會生效 col-6，以此類推
    • DEMO: Pricing
  • Containers
    • max-width
  • Grid system
    • 參考 (Material Design)
    • container>row>col
    • container 用來置中跟處理網頁內容與畫面邊界之間的空間 (padding)
    • row 用來包住直欄的 (col)
    • col 直欄，放內容，外層必須要有 row
    • 12 欄的格線系統 (DEMO)
  • Gutter
    • 比較少用，僅用在比較小範圍的客製化
  • Utilities for layout
    • display
    • flexbox
    • margin & padding
• Content
• Forms
• Components
  • 要點
    • base class
    • variant (sample)
      • semantic: primary, secondary, success, danger, warning, info, light, dark
  • Buttons
  • Navbar
  • Modal
    • data-bs-toggle
    • data-bs-target
    • data-bs-dismiss
• Helpers
• Utilities
• Extend
  • Icons

Customize

• Color
• CSS variables

BS SCSS on Github

注意

• scss 相關內容皆可跳過，他不是原生 css，瀏覽器看不懂
  • $、@include
  • @media 這是 css 原生語法，可以直接用，不要跟上面的搞混
• 建議使用 jquery，上手比較快速簡單