【设计+切版30天实作】｜Day18 - Bootstrap的客制化

大纲

上一篇把环境都建立完成後，今天要来做客制化，但在这之前，先来说明一下为什麽要客制化，以及为什麽会把客制化放在前面。

由於这一次的挑战是以设计师角度去做，因此即便Bootstrap已经有许多元件可以直接套用，但还是会有很多细节上的东东需要新增或修改。例如网页的主要色、文字大小、间距等等，这样才能设计出一个具有独特性的网页，而且不会让人家第一眼就觉得这网页很「bootstrapable」XD!!!

那为什麽要把客制化放在前面就弄好呢？很简单！当你要画画前，也会先把画作的颜料、尺寸等东西先准备好吧？这样在画的时候才不会那麽麻烦～

客制化实作

打开 _variables.scss

1. 首先，先打开scss资料夹里的有_variables.scss
2. 点进去会看到很多东西，不用紧张，下面慢慢讲怎麽客制化！
   

＊里面有千万种设定可以更改，但因为设计稿一开始也有因应Bootstrap去进行了小小修改，因此主要就是去修改一些小地方就可以了！这时候，上上篇的文章里所列出的数据就很有用啦！

修改theme-colors

在_variables.scss里的第81行是$theme-colors，这里是指Bootstrap里的主题颜色，我们可以把primary-color、body-color等等的颜色换成设计稿上的主题颜色，另外也可以新增新的颜色及命名喔！
（左图为修改前、右图为修改後）

$theme-colors: (
  "primary":    #9B3C05,
  "secondary":  #FDFCFC,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       #707070,
  "primary-light": #EFDFD6

) !default;

修改渐层颜色 - Gradient

1. 拉到第243行，或是用[command-F] / [Ctrl - F] 去搜寻「Gradient」
2. 直接去修正渐层的颜色
3. 渐层颜色的写法：linear-gradient (deg角度 , 渐层的开始 , 渐层的结束) → linear-gradient(143deg,#9B3C05,#4E1E03)

＊其实主要是用在一些无法直接下style去改变背景色的地方，例如卡片的背景色，其他东西有其他渐层颜色就可以直接去style写下该渐层的颜色喔！

$gradient: linear-gradient(143deg,#9B3C05,#4E1E03) ;//linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;

修改间距 - spacers

1. 因为我觉得原本的spacer太少了，而设计稿里有的数值比较多，所以直接新增上去！
2. 拉到第252行，或是用[command-F] / [Ctrl - F] 去搜寻「spacer」
3. 一样把数据填上去就可以了

（左图为修改前、右图为修改後）

$spacers: (
  0: 0,
  1: $spacer / 4,
  2: $spacer / 2,
  3: $spacer * 0.75, // 3: $spacer,
  4: $spacer,        // 4: $spacer * 1.5,
  5: $spacer * 1.5,  // 5: $spacer * 3,
  6: $spacer * 2,
  7: $spacer * 2.5,
  8: $spacer * 3,
  9: $spacer * 6,
  10: $spacer * 7,

) !default;

修改navbar、btn、input、placeholder etc.

由於原本的btn和navbar预设上有不符合设计稿上的设定，所以统一修改成设计稿的样式。

1. Input的Padding
   

   $input-btn-padding-y:         .75rem; //.375rem !default;
   $input-btn-padding-x:         2.5rem; //.75rem !default;
   

2. 按钮和Input的圆角样式
   

   $btn-border-radius: none; //$border-radius !default;
   

```scss
$input-border-radius: none; //$border-radius !default;
```

3. 连结颜色
   

   $link-color:            #FDFCFC;//$primary !default;
   $link-decoration:       none;    //underline !default;
   

4. Placeholder样式
   

   $input-placeholder-color:               #BFBAB7;  //$gray-600 !default;
   

5. Navbar样式
   

   $navbar-dark-color:                 #FDFCFC; //rgba($white, .55) !default;
   $navbar-dark-hover-color:           #FF5E00; //rgba($white, .75) !default;
   $navbar-dark-toggler-border-color:  none; //rgba($white, .1) !default;
   

修改标题装饰的highlight - mark

1. 把 $mark-padding 改为none
2. 修改 $mark-bg 的颜色
   ＊这边的mark是指highlight唷！
   

$mark-padding:                none;                //.2em !default;
$mark-bg:                     rgba(155,60,5,0.16); //#fcf8e3 !default;

font

设计稿上的字体是思源黑体，英文名称是Noto Sans TC，因此我们可以去font-family更改设定。

＊下图为预设字体，预设为「system-ui」

＊下图为更改後的字体，设定更改为「Noto Sans TC」

$font-family-sans-serif:      "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

最後检查有没有修改成功

1. 去html输入任何Hello World 或是 你好 或是 任何字
2. Command-S / Ctrl-S 去储存
3. 点选 Go Live
4. 去看看有没有成功载入
5. 下图可以看出来p的颜色为#707070，所以就是有成功载入啦！
   

结论

在学会Boostrap前很多东西都是用手刻，但学会Bootstrap後发现好多东西都变得很方便，而且也可以客制化成自己想要的模样，真的蛮好用的！不过在这前提下，还是觉得要熟悉基本html、css、scss再来试用会更好唷！以上客制化就完成了！
那明天就要来进行切版！