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

弹性布局

目录CONTENTS02弹性布局容器样式实战案例：烧烤餐厅网页0401弹性布局概述弹性布局项目样式03思考与练习05

01弹性布局概述

弹性布局是一种基于弹性盒子模型的页面布局技术，能够根据设备屏幕尺寸和分辨率自动调整布局，替代传统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:i