BootStrap常用样式

常用带媒体查询的标签

Display

d-*-block
d-*-flex
d-*-inline
d-*-inline-block

Flex

flex-*-column
flex-*-row
flex-*-wrap
justify-content-*-start
justify-content-*-end
justify-content-*-center
justify-content-*-between
align-content-*-start
align-content-*-end
align-content-*-center
align-items-*-start
align-items-*-end
align-items-*-center
align-self-*-start
align-self-*-end
align-self-*-center

栅格系统

5挡列宽,mx-n1 …至 mx-n5

<div class="container">
  <div class="row mx-n5">
    <div class="col px-5">Custom column padding</div>
    <div class="col px-5">Custom column padding</div>
  </div>
</div>

文本

text-*-left
text-*-right
text-*-center

文字折行和溢出

text-nowrap 类可以防止文字折行
text-truncate 类将文本截断并添加省略号, 但必须是 display: inline-block 或 display: block 类型
text-break 单词中断 将长字符串设置为 overflow-wrap: break-word 属性,可以防止长字符串破坏你的组件布局

文本转换

text-lowercase 转为小写的文本
text-uppercase 转为大写的文本
text-capitalize 转为首字母大写的文本

清除浮动

clearfix

阴影

shadow-*-sm
shadow-*-lg
show

间隔

m/p
t *b *l *r *x *y
1
2* 3* 4* 5*

定位

float-*-left
float-*-right

间距

m-1 / m-*-#
mt-1 / mt-*-#
mr-1 / mr-*-#
mb-1 / mb-*-#
ml-1 / ml-*-#
mx-1 / mx-*-#
my-1 / my-*-#
p-1 / p-*-#
pt-1 / pt-*-#
pr-1 / pr-*-#
pb-1 / pb-*-#
pl-1 / pl-*-#
px-1 / px-*-#
py-1 / py-*-#

表格

table-*-responsive
颜色
table-striped
table-dark

隐藏元素

适应屏幕大小 样式
Hidden on all .d-none
Hidden only on xs .d-none .d-sm-block
Hidden only on sm .d-sm-none .d-md-block
Hidden only on md .d-md-none .d-lg-block
Hidden only on lg .d-lg-none .d-xl-block
Hidden only on xl .d-xl-none
Visible on all .d-block
Visible only on xs .d-block .d-sm-none
Visible only on sm .d-none .d-sm-block .d-md-none
Visible only on md .d-none .d-md-block .d-lg-none
Visible only on lg .d-none .d-lg-block .d-xl-none
Visible only on xl .d-none .d-xl-block

自定义按钮样式

.btn-primary {
    color: #fff;
    background-color: #E60012;
    border-color: #E60012;
}
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: #000;
    border-color: #000;
}
.btn-primary:focus,
.btn-primary.focus {
    background-color: #000;
    border-color: #000;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.1);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.1);
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: #333;
    border-color: #333;
}

Bootstrap4.3.1速查表

https://ren-wei.github.io/manual/bootstrap/index.html

 1,332 total views,  2 views today

Comments are closed.