甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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




















1234
1234
1234

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

其他资讯