bootStrap 使用规律总结

与颜色有关的组合

primary 深蓝 secondary 灰 success 绿 warning 黄 danger 红 
info 浅蓝 dark 黑 white 白 light 亮白

.active	鼠标悬停在行或单元格上时所设置的颜色
.primary
.success	标识成功或积极的动作
.info	标识普通的提示信息或动作
.warning	标识警告或需要用户注意
.danger	标识危险或潜在的带来负面影响的动作

board-
text-
bg-
bg-gradient-
gradient 梯度；坡度；倾斜度
btn-
pull- 快速浮动 pull-left pull-right
.show 和 .hidden 显示隐藏内容

mw-100 == max-width: 100%;最大宽度百分比
mh-100 == max-height: 100%;最大高度百分比

图片形状
class="img-rounded">
class="img-circle">
class="img-thumbnail">

单行显示
<form class="form-inline">
  <div class="form-group">
 单列显示
<form class="form-horizontal">
  <div class="form-group">

容器

container 或 container-fluid 布局容器
row 行
col 列 必须放在row 内，是row的唯一子标签

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

(sm/md/lg/xl) 指定适应屏幕的大小
xs 超小屏幕（手机，小于 768px）
sm 小屏幕（平板，大于等于 768px）
md 中等屏幕（桌面显示器，大于等于 992px
lg 大屏幕（大桌面显示器，大于等于 1200px）

board

board -(top/right/bottom/left) - (边框值)
<span class="border"></span>
<span class="border-right"></span>
<span class="border-right-0"></span>
颜色
board board-颜色
primary 深蓝
secondary 灰
success 绿
warning 黄
danger 红
info 浅蓝
dark 黑
white 白
light 亮白
<span class="border border-primary"></span>


弧度
rounded
rounded - (top/right/bottom/left/circle/0[和没加弧度一样])

Clearfix

清除浮动
<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>

Close icon

关闭按钮
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Display property

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.
Where value is one of:
            none
            inline
            inline-block
            block
            table
            table-cell
            table-row
            flex
            inline-flex
<div class="d-lg-none">hide on screens wider than lg</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

 d-print-{value}
 <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
 

Flex 弹性布局

.d-(sm/md/lg/xl)-flex
.d-(sm/md/lg/xl) -inline-flex
+
.flex- (sm/md/lg/xl) -row
.flex-(sm/md/lg/xl) -row-reverse
.flex- (sm/md/lg/xl) -column
.flex- (sm/md/lg/xl) -column-reverse
reverse(相反)


d-flex
+
.justify-content-(sm/md/lg/xl) -start
.justify-content-(sm/md/lg/xl) -end
.justify-content-(sm/md/lg/xl) -center
.justify-content-(sm/md/lg/xl) -between
.justify-content-(sm/md/lg/xl) -around
justify(两端对齐)

d-flex
+
.align-items-(sm/md/lg/xl) -start[上]
.align-items-(sm/md/lg/xl) -end[下]
.align-items-(sm/md/lg/xl) -center[中间]
.align-items-(sm/md/lg/xl) -baseline[底线]
.align-items-(sm/md/lg/xl) -stretch[延伸]
align(水平对齐)
item 针对父级div控制子级div位置

d-flex
+
.align-self-(sm/md/lg/xl) -start
.align-self-(sm/md/lg/xl) -end
.align-self-(sm/md/lg/xl) -center
.align-self-(sm/md/lg/xl) -baseline
.align-self-(sm/md/lg/xl) -stretch
self 针对div 自己本身设置位置

d-flex
+
.align-content-(sm/md/lg/xl)-start
.align-content-(sm/md/lg/xl)-end
.align-content-(sm/md/lg/xl)-center
.align-content-(sm/md/lg/xl)-between
.align-content-(sm/md/lg/xl)-around
.align-content-(sm/md/lg/xl)-stretch

Auto margins 外边距
m(trbl)-auto == margin-top/right/bottom/left-auto

Wrap 自动换行
d-flex 
+ 
flex-(sm/md/lg/xl)-nowrap 不换行
flex-(sm/md/lg/xl)-wrap
flex-(sm/md/lg/xl)-wrap-reverse 反方向自动换行

Order 指定显示 flex 条目的显示顺序 值大优先显示
<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">Third flex item</div>
</div>
.order-(sm/md/lg/xl)-[0~12]

vertical alignment 垂直对齐

.align-baseline
.align-top
.align-middle
.align-bottom 
.align-text-bottom
.align-text-top

Float 浮动

.float-left
.float-right
.float-none

Image replacement 图像替换

将图片替换文字，文字隐藏
<h1 class="text-hide" style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>

Position

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>

Sizing 设置宽度/高度

25/50/75/100 三个百分比默认值
w-25/50/75/100
h-25/50/75/100

mw-100 == max-width: 100%;最大宽度百分比
mh-100 == max-height: 100%;最大高度百分比

Spacing

m - for classes that set margin
p - for classes that set padding

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

Text

text-(sm/md/lg/xl)-justify/left/center/right
text-nowrap
text-truncat 文字截断，超过长度...
text-lowercase/uppercase/capitalize

font-weight-bold/normal/light
font-italic 斜体

Visibility 可见性

<div class="visible">...</div> 可见
<div class="invisible">...</div> 不可见