《Bootstrap前端开发从入门到实战(微视频版)》课件 第05章 弹性布局

弹性布局目录CONTENTS02弹性布局容器样式实战案例：烧烤餐厅网页0401弹性布局概述弹性布局项目样式03思考与练习0501弹性布局概述弹性布局是一种基于弹性盒子模型的页面布局技术，能够根据设备屏幕尺寸和分辨率自动调整布局，替代传统CSS布局方式。01弹性布局通过.d-flex和.d-inline-flex类创建弹性容器，容器内的子元素自动成为弹性项目。02弹性布局定义01灵活性高：自动调整布局，适应不同设备屏幕。02响应式设计：支持多种屏幕尺寸，无需固定像素值。开发效率高：减少自定义CSS编写，快速实现复杂布局。弹性布局优势02弹性布局容器样式水平对齐.justify-content-{value}类用于设置项目在主轴上的对齐方式，value可取start、end、center、between、around、evenly。示例代码：html响应式支持：.justify-content-{sm|md|lg|xl|xxl}-{value}。01垂直对齐.align-items-{value}类用于设置项目在交叉轴上的对齐方式，value可取start、end、center、baseline、stretch。示例代码：响应式支持：.align-items-{sm|md|lg|xl|xxl}-{value}。02项目对齐工具类.flex-row类使项目水平排列，.flex-row-reverse类使项目从右到左排列。示例代码：响应式支持：.flex-{sm|md|lg|xl|xxl}-row、.flex-{sm|md|lg|xl|xxl}-row-reverse。.flex-column类使项目垂直排列，.flex-column-reverse类使项目从下到上排列。示例代码：响应式支持：.flex-{sm|md|lg|xl|xxl}-column、.flex-{sm|md|lg|xl|xxl}-column-reverse。水平排列垂直排列排列方向工具类.flex-wrap类使项目超出容器宽度时自动换行，.flex-nowrap类使项目不换行，.flex-wrap-reverse类使项目反向换行。项目换行工具类03弹性布局项目样式01.order-{value}类用于设置项目的顺序，value可取0到5，.order-first类将项目置于最前，.order-last类将项目置于最后。02示例代码：03响应式支持：.order-{sm|md|lg|xl|xxl}-{value}。项目排序工具类.flex-grow-{0|1}类用于控制项目是否使用容器的剩余空间，1表示使用，0表示不使用。示例代码：响应式支持：.flex-{sm|md|lg|xl|xxl}-grow-{0|1}。伸缩增长.flex-shrink-{0|1}类用于控制项目是否按比例收缩，1表示按比例收缩，0表示不收缩。示例代码：响应式支持：.flex-{sm|md|lg|xl|xxl}-shrink-{0|1}。伸缩收缩0102项目伸缩工具类02响应式支持：.align-self-{sm|md|lg|xl|xxl}-{value}。01.align-self-{value}类用于设置项目自身在交叉轴上的对齐方式，value可取start、end、center、baseline、stretch。自身对齐工具类02响应式支持：.ms-{sm|md|lg|xl|xxl}-auto、.me-{sm|md|lg|xl|xxl}-auto、.mx-{sm|md|lg|xl|xxl}-auto。01.ms-auto、.me-auto、.mx-auto类用于实现项目的自动浮动，分别表示向左、向右和居中对齐。自动浮动工具类04实战案例：烧烤餐厅网页制作一个烧烤餐厅网页，包含导航栏、轮播广告区、主要内容区和页脚信息，使用弹性布局实现响应式设计。案例概述使用Bootstrap的navbar组件创建响应式导航栏，包含Logo、品牌名称、导航链接和搜索表单。示例代码：0102网页头部导航栏使用Bootstrap的carousel组件实现轮播广告区，循环播放烧烤图片。01轮播广告区包含欢迎信息、特色菜品列表、餐厅简介和营业时间，使用弹性布局实现模块化布局。网页主要内容包含联系方式、特色菜单和顾客评价，使用弹性布局实现信息的整齐排列。页脚信息05思考与练习1弹性布局是一种基于弹性盒子模型的布局技术，可实现.d-flex、.d-inline-flex等工具类或displayflex、display:inline-flex等CSS属性。2作用于弹性布局容器的工具类包括.justify-content-{value}、.align-items-{value}、.flex-wrap等。3用于项目伸缩的工具类包括.flex-grow-{0|1}、.flex-shrink-{0|1}，分别用于控制项目是否使用容器的剩余空间和是否按比例收缩。4在Bootstrap中，使用.flex-column类创建垂直方向的弹性布局。5使用.d-flexjustify-content-centeralign-items-center实现水平和垂直居中对齐。6调整弹性容器中项目排列顺序的工具类包括.order-{value}、.ord