《Bootstrap前端开发从入门到实战(微视频版)》课件 第04章 工具类.pptx

202X工具类

01工具类概述02文本工具类03颜色工具类04边框工具类目录05边距工具类06宽度和高度工具类07显示和浮动工具类08其他工具类09案例演练：旅行社旅游平台网页10思考与练习

01工具类概述

Bootstrap工具类是预定义的CSS类，用于快速添加样式和功能，无需额外编写CSS代码。例如.rounded类用于添加圆角，.text-center类用于文本居中。工具类定义工具类命名格式为.{property}-{value}，如.mb-1表示底部边距为0.25rem。部分工具类采用直观命名，如.border-size-1px。工具类命名规则包括文本工具类、颜色工具类、边框工具类、边距工具类、宽度和高度工具类、显示和浮动工具类等，覆盖多种样式需求。工具类种类工具类概念

使用工具类可快速实现常见样式，减少自定义CSS编写，加快开发速度。提高开发效率工具类功能单一，易于组合和扩展，适合多种开发场景，可结合前端框架进一步增强功能。灵活性部分工具类支持响应式设计，如.text-md-center，在中等屏幕尺寸下实现文本居中对齐，适应不同设备。响应式支持工具类优势

02文本工具类

文本对齐使用.text-start、.text-center、.text-end实现左对齐、居中对齐和右对齐。响应式对齐类如.text-sm-center可根据屏幕尺寸调整对齐方式。文本换行.text-wrap类使文本自动换行，.text-nowrap类防止文本换行。.text-truncate类以省略号显示超出文本，.text-break类允许长单词断行。文本对齐与换行

.fs-1到.fs-6类分别设置字号为2.5rem到1rem，用于快速调整文本大小。文本字号.text-lowercase、.text-uppercase、.text-capitalize类分别实现小写、大写和首字母大写转换。文本转换文本字号与转换

字体斜体.fw-normal、.fw-bold、.fw-bolder、.fw-light、.fw-lighter类分别设置普通、粗体、更粗、轻体和更轻的字体粗细。字体粗细.fst-italic类设置斜体，.fst-normal类设置普通字体样式。字体粗细与斜体

.lh-1到.lh-xl类分别设置1倍到2倍行高，用于调整文本行间距。01控制行高

.text-decoration-none移除文本修饰，.text-decoration-underline添加下划线，.text-decoration-line-through添加删除线。01”文字修饰

03颜色工具类

文本颜色.text-primary到.text-dark类分别设置主色、次色、成功色、危险色、警告色、信息色、浅色和深色文本。背景颜色.bg-primary到.bg-dark类分别设置主色、次色、成功色、危险色、警告色、信息色、浅色和深色背景。0102文本颜色与背景颜色

.link-primary到.link-muted类分别设置不同颜色的链接，并提供悬浮和焦点样式。01链接颜色

04边框工具类

.border类添加完整边框，.border-{side}类（如.border-top）添加单侧边框，.border-{value}类（如.border-1）设置边框宽度。添加边框.border-0类删除边框，.border-{side}-0类删除特定一侧边框。删除边框添加与删除边框

01.rounded类添加圆角边框，.rounded-{side}类（如.rounded-top）添加单侧圆角，.rounded-circle类设置圆形，.rounded-pill类设置椭圆形。圆角边框

05边距工具类

外边距.m{side}-{value}类设置外边距，如.mb-1设置底部边距为0.25rem。内边距.p{side}-{value}类设置内边距，如.pt-2设置顶部内边距为0.5rem。外边距和内边距

.m{side}-{breakpoint}-{value}类支持响应式设计，如.m-sm-2在小型设备上设置外边距为0.5rem。响应式边距

06宽度和高度工具类

.w-25到.w-100类分别设置宽度为25%到100%，.w-auto类设置宽度为自动。宽度工具类

.h-25到.h-100类分别设置高度为25%到100%，.h-auto类设置高度为自动。高度工具类

.mw-100类设置最大宽度为100%，.mh-100类设置最大高度为100%，防止元素超出容器。最大宽度和高度

07显示和浮动工具类

.d-none类隐藏元素，.d-inline、.d