變數修改說明及示例

CH12 118

課程練習下載

Bootstrap 路徑 :　Getting started / Theming

_variables.scss 調整

  • 可直接到 BS 頁面 搜尋元件名稱，到 _variables.scss 中尋找做更改。

按鈕 border 寬度調整

  • 調整按鈕外框線寬度時，可以順便調整 input 框線，navbar 使用 sticky-top 下滑遇到 input 時比較不會那麼突兀。而且按鈕和 input 常會有並排的狀況，如果 border 粗細不一致，也是會顯得突兀。
  • _variables.scss 內搜尋 border-width ，當中 $border-width : 1px ; 為全域的如果調整會包含卡片或其他元件的 border 寬度都會動到，如果只要調整 button 和 input 的 border-width ，只需更改 $input-btn-border-width 即可 ( 如下示意圖 )。

// _variables.scss 內的 $border-width 為全域的，不要在此做更改 ▼

Bootstrap-全域的-border-width

Bootstrap-input的input-btn-border-width

// 更改 _variables.scss 內的 $input-btn-border-width 按鈕與input 的 border-width 皆會一起調整 ▼
Bootstrap-input-btn-border-width-更改示意圖

字體調整 // Typography

  • 如何加入微軟正黑體 : 開啟 source / stylesheets / helpers : _variables.scss ，找到 // Typography 的 $font-family-sans-serif 加入 "Microsoft JhengHei UI"
  • $font-size-base : 1rem ; ，瀏覽器預設的字體大小是 16px ，所以 1rem = 16px
  • 如果要指定數值，可直接在 HTML 上直接寫 font-size，直接在 _variables.scss 改字體大小會比較偏像整體的設計。

Sass option

  • 這邊會有一些比較特別的變數
  • $spacer 間距空間。
  • $enable-rounded 為圓角，預設是開啟的，所以按鈕或是 input 四周都會是圓角，如果想要把預設改為直角，就把原本的 true 註解掉加上 false ; 
$enable-rounded:  false; //true !default;
  • 如果想要打開 $enable- 漸層的話建議一併也把陰影打開，按鈕會比較有立體感。
  • 開啟漸層 $enable-gradients 時除了按鈕，也可以到 Utilities / Colors : background-gradient 使用 .bg-gradient-主題色 在背景色加入漸層。此漸層色不會做的很強烈所以不會感覺突兀。在 _variables.scss 自訂的主題色 ( 例如 六角主題色 ) 也會一併有漸層色

新增自己的元件，並讀取 BS 的變數

CH12 119

課程練習下載

Bootstrap 路徑 :　Getting started / Modifiers

想建構的環境

.box 為主題色 primary ，滑鼠滑入變顏色較深的 primary 主題色

作法

  • 複製 index.html <body> 內清空，另存為 index2.html 備用
  • Source / stylesheets 新增資料夾 components ， 資料夾內再新增檔案 _box.scss
  • Source / all.scss 內新增剛新增的檔案 _box.scss
// custom 
@import "components/box";
<body>
    <div class="box"></div>
</body>
  • box.scss
    • Theming / Functions
    • 顏色深淺可使用 theme-color-level ( "主題色" , 數值 ); ， 後方數值( 10 ~ -10 )可微調亮 ( 負值 ) 或調深 ( 正值 ) 主題色
/* 背景色可帶入 _variables.scss 的主題色
.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}
*/

.box{
    width: 100px;
    height: 100px;
    background-color: theme-color("info");
    &:hover{
        background-color: theme-color-level("info",-5);
    }
}

Bootstrap-theming背景色調整01

想架構的環境

於 .box 中加入 .box-主題色，可以像 BS 的 button 按鈕一樣套入任一主題色，並且內容文字因背景色深淺產生適合閱讀的對比色文字

作法

  • Bootstrap 路徑 :　Getting started / Theming : Modifiers
  • 複製 index.html 內清空，另存為 index2.html 備用
  • Source / stylesheets 新增資料夾 components ， 資料夾內再新增檔案 _box.scss
  • Source / all.scss 內新增剛新增的檔案 _box.scss
// custom 
@import "components/box";
  • index2.htm
<body>
    <div class="box-info"></div>
</body>
  • boss.scss
    • Theming / Components
    • 顏色深淺可使用 theme-color-level ( "主題色" , 數值 ); ， 後方數值( 10 ~ -10 )可微調亮 ( 負值 ) 或調深 ( 正值 ) 主題色
    • @each $color, $value in $theme-colors { } 前方 $color 是把名稱讀出來，放在下一行 .box- 後方
    • .box-#{$color} { background-color:$value; } 中 $value 為 @each $color, $value in $theme-colors { } 中的 $value ，值代表色彩
.box{
    width: 100px;
    height: 100px;
}

@each $color, $value in $theme-colors {
    .box-#{$color} {
        background-color: $value;
    }
}
<div class="container mt-3">
  <div class="box box-danger"></div>
</div>
  • box 會因為背景色深淺影響裡面文字的閱讀舒適度，文字的顏色就可使用對比色的取用方法 color : color-yiq( 色彩 ); 。color-yiq 可帶入上方的程式碼自動算出需深色或淺色字

Bootstrap-color-yiq

<div class="container mt-5">
  <div class="box box-danger">紅色 box</div>
  <div class="box box-dark">黑色 box</div>
  <div class="box box-warning">黃色 box</div>    
</div>
.box{
    width: 100px;
    height: 100px;
}
@each $color, $value in $theme-colors {
    .box-#{$color} {
        background-color: $value;
        color : color-yiq($value);
    }
}

如何釋出 Sass 檔案

CH12 120

課程練習下載

Bootstrap 路徑 :　Getting started / Theming

  1. 編譯的檔案會從資料夾 source 到 資料夾 public，並合併到 public / all.css
  2. source 會放我們的原始檔案
  3. public 為最終交付檔案
  4. 如須交付 css 的壓縮檔案 ，指令 gulp build --env production
    • 為什麼 index.html 內只有載入 <script src="/javascripts/vendor.js"></script> ，因已包含 getting started 內的三支 JS ( jQ , popper , Bootstrap )
    • 執行此指令後，會把原本的 public 資料夾刪除，並完整重建。此時 public 下的 stylesheets 下會只有壓縮後的 css ，vendor.js 裡面包含了一個 jQuery 與 bootstrap 的壓縮檔。由於此 bootstrap 為 Bundle 版本 ，所以裡面已包含 getting started 內的三支 JS ( jQ , popper , Bootstrap )
  5. 恢復為未壓縮的指令 gulp build 出處

資料來源

最後可閱讀此篇文章 [BS] 編譯屬於自己的客製化 Bootstrap

最後修改日期: 24 6 月, 2020

作者