bootstrap基础

bootstrap基础
bootstra里面的布局模式
固定布局 container
流动布局 container-fluid

网格系统类似于table tr td
网格系统一行最大12列
row行
col--列
代表屏幕分辨率
sm 小 540px
md 中 720px
lg 大
xl
col-xl-auto根据内容自动分配
col--num 列 后面的代表跨几列
offset-1 设置marginleft值 8.333%
offset--2 不同的屏幕marginleft
invisible隐藏元素
visible显示元素
p-0 padding：0
p-1 padding:0.25rem;
p-2
pt
py
w-100 100%
w-75 75%
h-100 100%
h-50 50%
align-items-center 相对父容器垂直居中p-0
align-items-start 相对父容器顶部对齐
align-items-end 相对父容器底部对齐

align-content-center 考虑多行

align-self-center 自身在flexbox中的y轴分布

justify-content-center 子元素在父容器里面的x轴的排布情况

12个均分，大小一样

1

2

3

4

5

6

7

8

9

10

11

12

1 2 3 3:2:7

1

2

3

5个均分，大小一样

1

2

3

4

5

pt-1

1

2

3

py-1

1

2

3

w-100

1

2

3

h-100

1

2

3

1 2 3 连起来居中竖直

1

2

3

1居中 2 3

1

2

3

123接起来居中 水平

1

2

3

媒体查询
@media (min-width: 576px) {
.block{
width: 560px;
}
}
@media (min-width: 768px) {
.block{
width: 750px;
}
}
@media (min-width: 992px) {
.block{
width: 980px;
}
}
@media (min-width: 1200px) {
.block{
width: 1140px;
}
}
min-width要从小到大

   @media (max-width: 1200px) {
        .block{
            width: 1140px;
        }
    }

    @media (max-width: 992px) {
        .block{
            width: 980px;
        }
    }

    @media (max-width: 768px) {
        .block{
            width: 750px;
        }
    }
    @media (max-width: 576px) {
        .block{
            width: 560px;
        }
    }

max-width要从大到小

@media (max-width: 1200px) and (min-width: 993px) {
.block{
width: 1140px;
}
}

    @media (max-width: 992px) and (min-width: 769px) {
        .block{
            width: 980px;
        }
    }

    @media (max-width: 768px) and (min-width: 577px) {
        .block{
            width: 750px;
        }
    }
    @media (max-width: 576px) {
        .block{
            width: 560px;
        }
    }

元素浮动根据分辨率去选择
float-left左浮动
float-right右浮动
text-center 水平居中 left right justify sm xl md lg

bootstrap

bootstrap 大小不同
bootstrap
bootstrap
bootstrap
bootstrap small是正常大小的80%
× 关闭特效 鼠标有点击效果 已经做好的

• bootstrap


• bootstrap
竖着排列

• bootstrap


• bootstrap


• bootstrap

• bootstrap


• bootstrap
横着排列

• bootstrap


• bootstrap


• bootstrap

图片响应式 img-fluid max-width：100% img-thumbnail 图片外边框加圆角

rounded

一些颜色属性
table-primary table-danger table-success table-dark table-lighttable-info table-secondary

1	2	3	4
1	2	3	4
1	2	3	4

响应式图片比父容器大
code颜色字体
kbd黑底白色
samp加粗的样子
img-thumbnail圆角
mx-aoto左右
组件alert alert-success alert-dismissible

提示框动画
胶囊形状
进度条