BS 版型挑選
- 搜尋 Bootstrap 4 Template。
- 注意版本。
- 下載後是否有提供原始檔。
- 有些會提供 SCSS。
- 有些僅有 CSS。
- 盡可能不要挑選壓縮後的，不方便做細節修改。
- BS 有分 alph 與 bata 版本，alph 版本在測試時變動比較大不建議使用，bata 版本相對穩定多。
package.json 可再做額外開發，可運行 gulp 可直接用 npm install 把相關套件下載下來。
下載的BS 如何查詢版本
package.json內可查詢，但並非每個版型都會提供此檔案。index.html內開啟bootstrap.min.css連結，上方會顯示此版型的 BS 版本。
如何搜尋好看版型關鍵字
- Web theme
- Web template
- Web design
- Bootstrap Template
- Shopify theme 電商網站
- codepen 上搜尋
- behance ( 純圖像，較不建議新手 )
- Dribbble ( 純圖像，較不建議新手 )
不同排版範例程式碼
不規則排版
- 可垂直或平行切開的先做區塊分區，以 Grid system 排版 (
.row,.col) - 想要 gutter 小一點，可使用
.form-row - 手機模式每個區塊 100% 寬時，想要上下間格與
.form-row精準一點，可到 CSS (.mb-gutter-s或.mt-gutter-s) 或 SCSS 客製，這邊使用 CSS 。- 因 spacing 推移方式是用 rem 為單位，所以與
.form-row的間距會有些為落差，所以就自己客製。 - 10px 為
.form-row空間
- 因 spacing 推移方式是用 rem 為單位，所以與
- 範例中客製的
.mb-gutter-s沒有像 BS 的 spacing 做斷點設定 。如有需要可再自行做設定 - 自製斷點範例
高低不同的價格表
- flex 方式排版 範例
- 這邊使用三個高度不一樣的卡片，凸顯中間
- padding 方式排版 範例
- 這邊有故意使用三個高度一樣的卡片，凸顯中間
- 增加左右兩個卡片的 column 的 padding ，讓左右兩卡片空間比中間卡片小
- 把三個卡片都拉高 .card.h-100 。如果三張卡片高度都一樣，左右使用 padding 壓縮空間，沒使用 padding 的中間卡片底部就不會一樣高，這時就可以使用 h-100
- 如果三個卡片高度都一樣的話就可以用此排版，凸顯中間的卡片
- 為了讓 table 與 .card-body 左右 padding 同距離，使用到偽元素 :last-child 與 :first-child ( 偽元素可參閱文章最後方教學資源 )
使用SASS 開發自己的元件
- 透過 Sass 的特性，只要了解變數的運作方式就能自己開發元件，並且元件也能轉移到其它專案上。
- 可參考官方 BS Sass 的設計模式
- 元件設計概念
- 元件架構 → 內元件架構 → 狀態、互動 → 樣式、主題
- 下方要做一個 navpanel 範例，可參考 _navbar.scss
- 開發元件時，主體主元件以下的其他次元件前方都會放上主元件的名字，避免與其他元件產生衝突。例如
.navbar、.navbar-brand、.navbar-toggler
- 甚麼時候使用變數
- 當同一個數值出現兩次的時候
- 變數可先寫在同一頁，之後再搬到 _variable.scss
步驟
- 開啟本地端文件 source 資料夾內的 all.scss，於最後方@import _navpanel.scss 檔案 ( 上方都是官方 BS Sass / bootstrap.scss 內容，要開發新元件就需要寫在它們的後方 )
- _navpanel.scss 歸類於 components 資料夾內 。components 資料夾也可搬到其它專案中使用
//Custom
@import "components/navpanel";
課堂問與答
『問』在開發元件時，會怎樣來思考設計自己的元件? 出處
『答』再設計一開始，可以先搜集資料，在這個元件下你會想要有哪些樣式，接下來可以先透過繪製設計稿來做初步的構想，畢竟在設計一個元件時，很難將所有想到的功能再置入。而搜集的過程中也會知道需要有哪些功能、大家常用的名稱等等，準備好以上資訊後，再來開始製作一個通用類型的元件。為了確保一個元件的可用性通常會花上幾天才能完成一個許多專案都共用的元件。
資料來源
- 六角學院 – 精通 Bootstrap 4 開發超強不解釋
- 六角中譯 Bootstrap 官網
- Bootstrap 官方網站
偽元素的相關教學資源