Bootstrap 常用css类名

常用颜色

#  背景颜色
.bg-light {
    background-color: #f8f9fa!important;
} 
#  字体颜色 
.text-danger {
    color: #dc3545!important;
}
#  边框 .border-颜色 必须和 .border 一起用
.border-success {
    border-color: #198754!important;
}
# 按钮：背景+字体+边框
.btn-warning {    
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
}

颜色

内外边距

padding内置样式，margin就是把 p 换成 m
只有1-5，不存在p-6

.p-5 {
    padding: 3rem!important;
}
.m-5 {
    margin: 3rem!important;
}
.py-5 {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
}
.px-5 {
    padding-right: 3rem!important;
    padding-left: 3rem!important;
}
.pt-5 {
    padding-top: 3rem!important;
}
.pb-5 {
    padding-bottom: 3rem!important;
}

---

尺寸 宽高

内置了 25 50 75 100 auto 5种规格

.w-25 {
    width: 25%!important;
}
.h-50 {
    height: 50%!important;
}
.vw-100 {
    width: 100vw!important;
}
# 最大
.mh-100 {
    max-height: 100%!important;
}
# 最小
.min-vw-100 {
    min-width: 100vw!important;
}
.min-vh-100 {
    min-height: 100vh!important;
}

---

文本 与 文字

粗体

<p class="font-weight-bold">增强粗 text.</p>
<p class="font-weight-bolder">粗 text.</p>
<p class="font-weight-normal">普通 text.</p>
<p class="font-italic">斜体 text.</p>

换行

<div class="bg-warning text-wrap" style="width: 6rem;">
        默认就是自动换行的，不加text-wrap也一样
</div>
<div class="bg-success text-nowrap" style="width: 6rem;">
        text-nowrap，就算超出也不换行
</div>

水平对齐

<p class="text-start">Start a.</p>
<p class="text-center">Center as.</p>
<p class="text-end">End aligned.</p>

垂直对齐

image.png

---

display 块级，行内

image.png
当然也还有 d-inline-block
以及隐藏 .d-none

另一种隐藏
<div class="invisible">占位但不可见 并不修改 display</div>
<div class="visible">可见 也不修改 display</div>

---

溢出 overflow

image.png

---

阴影

<div class="shadow-none p-3 mb-5 bg-light rounded">无阴影</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">小阴影</div>
<div class="shadow p-3 mb-5 bg-white rounded">常规阴影</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">大阴影</div>

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}

image.png

圆角

.rounded  # 也等于 .rounded2
.rounded1
.rounded3  #最大3，没有4

image.png