第 28 集:Bootstrap 客制化 component 元件样式

此篇会介绍如何修改 Bootstrap 元件样式。

事前准备

须先了解变数设置、通用类别设置,再继续阅读会更好消化呦。

起手式

我常用的两步骤修改元件样式。

检视样式

两个常用的检视小技巧:

  1. 检查编译後的 css 档案,是否能搜寻到新撰写的样式(排除编译失败、样式名称打错问题)。

  2. 开发者工具查看是否被其他样式覆盖过(权重顺序问题)。


Button

variable 参数

  • 颜色变数。(ex:$primary$secondary
  • $btn-border-radius:修改圆角。
  • $btn-padding:修改 padding。(若设计稿中有 2-3 个不同 padding 值的 button,我会使用 sm、lg 来设置不同的 padding 值)
  • $btn-hover-bg-shade-amount:hover 颜色加深百分比。
  • $btn-hover-bg-tint-amount:hover 颜色加浅百分比。
  • $btn-transition:button 过渡样式设置。(让样式转换能较平滑的转换)
$btn-border-radius:                 .25rem !default;
$btn-padding-x:                     1rem !default;   
$btn-padding-y:                     .5rem !default;
$btn-padding-x-sm:                  .75rem !default;
$btn-padding-y-sm:                  .375rem !default;
$btn-font-size-sm:                  1rem !default;;
$btn-hover-bg-shade-amount:         30% !default;
$btn-transition:                    color .22s ease-in-out, background-color .22s ease-in-out, border-color .22s ease-in-out, box-shadow .22s ease-in-out !default;

通常 variable 参数 即可解决 6~7 成的需求,其他需求则须透过 覆盖样式 来解决。

样式覆盖

介绍修改文字颜色(预设是白色、黑色)、hover(预设是加浅、加深)

针对指定颜色设置修改 hover 效果。

  • 指限定於原有的 btn-* 颜色。
.btn-secondary{
  color: $white;
  &:hover{
    background: $primary;
    color: $white;
  }
}

.btn-light{
  color: $dark;
  &:hover{
    background: $primary;
    color: $white;
  }
}

设置 hover 效果。

  • 当作通用类别来达到重复使用。
  • 样式更加弹性。
.hover-secondary{
  color: $white;
  &:hover{
    background: $primary;
    color: $white;
  }
}
.translucent-hover:hover {
  opacity: 0.5;
}

Q:不能直接用现有的通用类别盖过去 .text-white .bg-primary 吗?
A:当然可以,但用通用类别盖过去後样式就固定了连 hover 的样式也一样,除非要下 !important

建议除非走投无路不然别使用 !important

符合无障碍网站标准

预设 btn-* 样式,在较深背景色 color白色,则较浅的背景色 color黑色

目的

符合无障碍网站标准,让视障者可以更方便阅读。

解析

Step1:透过颜色函式分别取得 RGB 三个颜色的值。

$rgb: (
  "r": red($color),
  "g": green($color),
  "b": blue($color)
);

Step2:透过 Bootstrap 自己的计算方式以及公式,去判断计算出来的值 color 适合 #fff#000


Badges

用途广泛好用的元件。(ex:tag 标签、计数器)

胶囊标签

透过 rounded-pill 让边框变为圆角。

.rounded-pill {
  border-radius: 50rem !important;
}

圆形标签

常见问题 border-radius 值最大了为什麽还不是圆形?

原因:尚未设置 width、height,因此长宽尺寸是依照内容、文字大小而定。

解决:设置 width、height 属性。

下方是设置使用 Badges 元件後,新增 width、height 属性的过程。


form

variable 参数

form 真的有蛮多可以玩的 variable 参数,下方简单介绍几个,想看更多欢迎到官方文件中下方的 Variables 挖宝。

比较常改的是:

  • 框线颜色

    • ex:$input-border-color$form-select-border-color
  • 文字颜色

    • ex:$input-color$form-select-color
  • focus 样式

    • ex:$input-focus-border-color$form-select-focus-border-color
  • placeholder 预设文字颜色

    • $input-placeholder-color

通常 variable 参数 只能设置一种颜色或样式。

样式生成

这边用 placeholder 样式来示范,如何对特定样式设置 多种颜色

$theme-colors: (
  'primary': #907A7B
);
@each $color, $val in $theme-colors{
  .ph-#{$color}{
    &::placeholder {
      color: $val !important;
    }
    &::-webkit-input-placeholder {
      color: $val !important;
    }
    &:-ms-input-placeholder {
      color: $val !important;
    }
    &::-moz-placeholder {
      color: $val !important;
      opacity: 1;
    }
  }
}

Step1:回圈读取 $theme-colors 所有颜色。

Step2:撰写样式,并把重复的变数,改为回圈取得的参数。

.ph-#{$color}{
  &::placeholder {
    color: $val !important;
  }
  &::-webkit-input-placeholder {
    color: $val !important;
  }
  &:-ms-input-placeholder {
    color: $val !important;
  }
  &::-moz-placeholder {
    color: $val !important;
    opacity: 1;
  }
}

Step3:查看编译後的样式名称以及样式是否正确,没问题就可以直接用拉。

编译後的 css

.ph-primary::-webkit-input-placeholder {
  color: #907A7B !important;
}
.ph-primary::-moz-placeholder {
  color: #907A7B !important;
}
.ph-primary:-ms-input-placeholder {
  color: #907A7B !important;
}
.ph-primary::placeholder {
  color: #907A7B !important;
}


<<:  [第二十九天]从0开始的UnityAR手机游戏开发-攻击按钮和UI血条

>>:  Day 28 - 3D绘图篇 - 2D图片上面的3D物件是怎麽产生的?II - 成为Canvas Ninja ~ 理解2D渲染的精髓

Day6 Array and Slice

前言 在GO当中,有两种资料结构是能够储存多项相同型态资料的,分别为Array和Slice。 Arr...

Day03【JS】立即呼叫函式 IIFE

IIFE 全称为 Immediately Invoked Function Expression 中...

Day 10 - [Zenbo开发系列] 07-DDE与App Builder

研究过程中,要把 DDE 安装到 Zenbo 的时候,卡关超久... 试过好多方法,当然也包括 Ap...

D16 - 如何用 Apps Script 自动化地创造与客制 Google Docs?(三)Element 的读取与创造

今天的目标 要怎麽简单快速地做出客制化地文件?今天,我们会教用 GAS 搭配 Goolge Doc。...

LeetCode解题 Day26

782. Transform to Chessboard https://leetcode.com/...