bootstrap基础

网格系统类似于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 3:2:7

5个均分，大小一样

pt-1

py-1

w-100

h-100

1 2 3 连起来居中竖直

1居中 2 3

123接起来居中 水平

媒体查询
@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


• 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

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

网站栏目：bootstrap基础
本文路径：http://cdkjz.cn/article/pjcoep.html