动漫网站设计理念中国产品设计网

bootstrap弹性盒子

1. 定义弹性盒子
2. 排列方向
3. 内容排列
4. 自定义布局
5. 浮动布局(子元素不能设置高)
6. 包裹

阶段案例

案例实现步骤

1. 准备阶段

了解bootstrap布局的基础知识

1. 定义弹性盒子

类名设置	效果
.d-flex	100%宽度的弹性盒子
.d-inline-flex	内容撑开的弹性盒子

两者存在相应式(.d-*-flex)，符号代表sm，md，lg，xl，xxl等

2. 排列方向

类名设置	效果
.flex-row	默认从左到右水平排列，加-reverse从右到左
.flex-columnl	默认从上到下垂直排列，加-reverse从下到上

两者存在响应式(.flex-sm-column)

3. 内容排列

类名设置	效果
.justify-content-start/center/end/around/between	元素沿x轴排列
.align-items-*	元素沿y轴排列,宽度充满
…align-content-*	元素顺序排列,整体沿y轴排列

两者存在响应式(.justify-content-sm-start)

4. 自定义布局

类名设置	效果
.align-self-*	单独使内容排列方式改变(默认为y轴)
.flex-fill	强制平均分配剩下的空间,所有元素都设置该类名
.flex-grow	元素顺序排列,整体沿y轴排列

两者存在响应式(.justify-content-sm-start)

5. 浮动布局(子元素不能设置高)

类名设置	效果
.me-auto	将右面的元素往右推
.ms-auto	将左面的元素往左推
.mb-auto	将上面的元素往下推
.mt.auto	将下面的元素往上推

6. 包裹

类名设置	效果
.flex-wrap	正向包裹
.flex-wrap-reverse	反向包裹
.order-数字	0-5,设置元素的排列顺序(所有子元素都要设置)

2. 布局分析

头部一共四个板块，左面一个logo，右面search和login，中间是tab，可以将logo右面的元素推到左面，再将search左面的元素推到右面，即可实现头部效果。下方tab栏可以使用flex-column进行纵向排列，并用col规定每一个子元素的大小

<div class="d-flex container justify-content-between box"><div class="text-white col-1 border bg-dark me-auto">logo</div><div class="text-white col-1 border bg-dark">tab</div><div class="text-white col-1 border bg-dark ms-auto">search</div><div class="text-white col-1 border bg-dark">login</div></div><div class="box flex-column d-flex container justify-content-start mt-5" ><div class="text-white border bg-dark col-2">1</div><div class="text-white border bg-dark col-2">2</div><div class="text-white border bg-dark col-2">3</div><div class="text-white border bg-dark col-2">4</div><div class="text-white border bg-dark col-2">5</div><div class="text-white border bg-dark col-2">6</div></div>

小结

接下来我将继续阅读《Bootstrap 5x 从入门到实战》这本书籍，学习bootstrap方面的知识，持续更新。