bootstrap中主题颜色的修改影响到的基本工具类的样式

1.在bootstrap.css中搜索primary,发现有以.xxx-primary开头的类有

• .table-primary，影响表格的background-color
• .btn-primary，影响按钮的background-color和border-color
• .bg-primary,影响background-color
• .text-primary,影响字体颜色color
• .border-primary，边框颜色

2. bootstrap的主题色名称

共有8个

• priamry
• secondary
• success
• info
• warning
• danger
• light
• dark

bootstrap中所有类名如.bg-primary,.text-primay出现过primary的地方均可以用其余的主题色名称来代替

3.自定义主题色

修改_variables.scss中的颜色变量的值，重新编译就可以得到不同颜色的主题颜色。
具体步骤见官网:构建步骤

4.常用工具类

文本tex

.text-*

• 颜色：primary
• 水平对齐:left,center,right
• 溢出和折行:wrap,nowrap
• 单词中断:break
• 大小写:lowercase,uppercase,capitalize
• 去掉下划线:decoration-none

阴影shawdow

• shadow-none
• shadow
• shadow-sm
• shadow-lg

定位position

.position-*

• static
• relative
• absolute
• fixed
• sticky

固定定位

• .fixed-top
• .fixed-bottom
• .sticky-top

尺寸 w-,h-

width:25%,50%,75%,100%,auto

• w-25,w-50,…w-100,w-auto
• h-25,…
• mw-100,max-width:100%
• vw-100,width:100vw;
• vh-100,height:100vh;

间隔margin,padding

{property}{sides}-{size}

• property:m,p
• sides:t,b,l,r,x,y
• size:0,1,2,3,4,5,auto

其中，0-5分别对应margin、padding的值为0、0.25、0.5、1、1.5、3rem值

边框border

添加边框

.border-*

• 单纯border表示四边边框
• top
• bottom
• left
• right

减去边框

.border-

• 0
• top-0
• left-0
• right-0
• bottom-0
• 颜色:primary

边框圆角

• rounded
• rounded-top,…
• rounded-circle
• rounded-pill
• rounded-0

边框圆角大小

• rounded-lg
• rounded-sm

display属性

.d-*后面可以接任意常见的display的属性值如

• .d-block
• .d-flex
• .d-inline-block
• .d-none,相当于隐藏了

flex属性

• .flex-column
• .flex-nowrap
• .justify-content-*，后面接start,end,center,between,around
• .align-items-*,后面接start,end,center,stretch
• .align-self-*,后面接start,end,center,stretch
• .flex-fill,填充剩余空间
• .flex-grow-1,填充剩余空间,
• mr-auto,每个子项没有占满宽度,mr-auto表示右外边距。

5._reboot.scs和_variables.scss

body的color由$ body-color，background-color由$ body-bg,决定，body的color又能让所有子元素继承。
a标签的color又primary的颜色决定