此篇会介绍如何修改 Bootstrap 元件样式。
须先了解变数设置、通用类别设置,再继续阅读会更好消化呦。
我常用的两步骤修改元件样式。
两个常用的检视小技巧:
检查编译後的 css 档案,是否能搜寻到新撰写的样式(排除编译失败、样式名称打错问题)。
开发者工具查看是否被其他样式覆盖过(权重顺序问题)。
$primary
、$secondary
)$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
。
用途广泛好用的元件。(ex:tag 标签、计数器)
透过 rounded-pill 让边框变为圆角。
.rounded-pill {
border-radius: 50rem !important;
}
常见问题 border-radius 值最大了为什麽还不是圆形?
原因:尚未设置 width、height,因此长宽尺寸是依照内容、文字大小而定。
解决:设置 width、height 属性。
下方是设置使用 Badges 元件後,新增 width、height 属性的过程。
form 真的有蛮多可以玩的 variable 参数,下方简单介绍几个,想看更多欢迎到官方文件中下方的 Variables 挖宝。
比较常改的是:
框线颜色
$input-border-color
、$form-select-border-color
文字颜色
$input-color
、$form-select-color
focus 样式
$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渲染的精髓
前言 在GO当中,有两种资料结构是能够储存多项相同型态资料的,分别为Array和Slice。 Arr...
IIFE 全称为 Immediately Invoked Function Expression 中...
研究过程中,要把 DDE 安装到 Zenbo 的时候,卡关超久... 试过好多方法,当然也包括 Ap...
今天的目标 要怎麽简单快速地做出客制化地文件?今天,我们会教用 GAS 搭配 Goolge Doc。...
782. Transform to Chessboard https://leetcode.com/...