Bootstrap基础教程（第3版）（微课版）课件 第四章 工具类

第4章工具类Bootstrap基础教程（第3版）（微课版）赵丙秀目录CONTENTS678910定义display定位flex布局阴影垂直对齐12345透明度边框边距尺寸浮动目录CONTENTS161718延伸链接焦点环案例1112131415视觉隐藏可见性交互溢出比例助手1透明度透明度边框添加边框类名边框.border为元素的上、右、下、左四个方向都添加边框.border-top为元素添加上边框.border-end为元素添加右边框.border-bottom为元素添加下边框.border-start为元素添加左边框border:1pxsolide#dee2e6;边框清除边框类名含义.border-0为元素清除所有边框.border-top-0为元素清除上边框.border-end-0为元素清除右边框.border-bottom-0为元素清除下边框.border-start-0为元素清除左边框边框边框颜色类名类名（浅色）.border-primary.border-primary-subtle.border-secondary.border-secondary-subtle.border-success.border-success-subtle.border-danger.border-danger-subtle.border-warning.border-warning-subtle.border-info.border-info-subtle.border-light.border-light-subtle.border-dark.border-dark-subtle.border-white.border-black边框边框颜色边框边框透明度类名设置内容.border-opacity-10--bs-border-opacity:0.1;.border-opacity-25--bs-border-opacity:0.25;.border-opacity-50--bs-border-opacity:0.5;.border-opacity-75--bs-border-opacity:0.75;.border-opacity-100--bs-border-opacity:1;边框边框透明度边框边框宽度类名宽度值.border-1border-width:1px;.border-2border-width:2px;.border-3border-width:3px;.border-4border-width:4px;.border-5border-width:5px;边框边框圆角类名边框.rounded为元素的上、右、下、左四个方向都设置圆角弧度0.375rem.rounded-top为元素顶部设置圆角，弧度0.375rem.rounded-end为元素右侧设置圆角，弧度0.375rem.rounded-bottom为元素底侧设置圆角，弧度0.375rem.rounded-start为元素左侧设置圆角，弧度0.375rem边框圆角弧度类名弧度值.rounded-00.rounded-10.25rem.rounded-20.375rem.rounded-30.5rem.rounded-41rem.rounded-52rem.rounded-circle弧度50%.rounded-pill弧度50rem边框圆角.rounded-{top|end|bottom|start}-{0|1|2|3|4|5|circle|pill},同时指定位置和宽度。2边距类.{property}{slides}-{breakpoint}-{size}边距类类的格式：.{property}{slides}-{size}

slidest-toppadding-top或margin-topb-bottompadding-bottom或margin-bottoms-startpadding-left或margin-lefte-endpadding-right或margin-rightx-水平方向padding-right、padding-left或margin-right、margin-lefty-垂直方向padding-top、padding-bottom或margin-top、margin-bottomproperty：m-margin外边距p-padding内边距边距类类的格式：.{property}{slides}-{size}

.{property}{slides}-{breakpoint}-{size}size0设置padding或margin为01设置padding或margin为$spacer*0.252设置padding或margin为$spacer*0.53设置padding或margin为$spacer4设置padding或margin为$spacer*1.55设置padding或margin为$spacer*3auto设置margin为auto，如mx-auto、m-auto等$spacer初始值1rem例子：.mt-3.px-4.m-1.p-3.mx-auto.py-5边距类响应式边距类：{property}{slides}-{breakpoint}-{size}breakpoint：sm、md、lg、xl、xxl例如pt-lg-5，当设备宽度达到lg时，才会有顶部48px的内边距。边距类Scss变量中$enable-negative-margins默认为false。所以默认情况下，负外边距类不可用。将变量的值改为true后，可以使用负边距类。在外边距的size前面加字母“n”。.mt-n1{margin-top：-0.25rem！important；}例如：负边距类边距类当容器display属性为grid或flex，可以在容器上使用gap工具类，来设置子元素之间的间距。格式：.gap-{size}，

行列间距，其中size取0~5的值，其值与与内边距外边距的值一致。.column-gap-{size}，

列间距.row-gap-{size}，行间距间距gap类边距类

边距类

间距gap类

负边距类类的具体定义可以在bootstrap.css文件查看。讲解中涉及了scss变量，读者可以查看源码文件_variables.scss。4尺寸ONE尺寸Bootstrap中定义了.w-{value}、.h-{value}样式，来改变元素的宽度和高度，这里value的取值为：25、50、75、100、auto，分别代表了25%、50%、75%、100%、auto。宽度尺寸Bootstrap中定义了w-{value}、h-{value}样式，来改变元素的宽度和高度，这里value的取值为：25、50、75、100、auto，分别代表了25%、50%、75%、100%、auto。高度尺寸高度宽度工具类由_utilities.scss文件中的工具api生成。如果需要定制Bootstrap，可以修改_utilities.scss中的那些值，然后重新编译，得到不同的工具类。尺寸最大宽度高度mw-100：最大宽度100%，mh-100：最大高度100%。类名含义min-vw-100min-width:100vw;min-vh-100min-height:100vh;vw-100width:100vw;vh-100height:100vh;与视口相关5浮动浮动

浮动

.float-start左浮动

.float-end右浮动

float-none不浮动浮动浮动.clearfix类来清除浮动。定义的是伪类:after。所以父级容器上添加.clearfix，用来清除内部元素的浮动。

清除浮动浮动

清除浮动6定义display定义displayDisplay属性Bootstrap4中定义了d-{value}或d-{breakpoint}-{value}类，来改变元素display属性的值。这里value的取值为：none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex。常用的是：none、inline、inline-block、block，flex。breakpoint取值：sm、md、lg、xl、xxl。响应式利用响应式Display类，可以让页面在不同设备上显示不一样的效果。使用.d-none类或.d-{sm，md，lg，xl}-none类中的一个和其他Display类搭配使用，可以是元素只在相应宽度的设备上显示。序号类显示效果1.d-none所有设备上都不显示2.d-none.d-sm-block只在xs设备上隐藏3.d-sm-none.d-md-block只在sm设备上隐藏4.d-md-none.d-lg-block只在md设备上隐藏5.d-lg-none.d-xl-block只在lg设备上隐藏6.d-xl-none.d-xxl-block只在xl设备上隐藏7.d-xxl-none只在xxl设备上隐藏8.d-block所有设备上都可见9.d-block.d-sm-none只在xs设备上可见10.d-none.d-sm-block.d-md-none只在sm设备上可见11.d-none.d-md-block.d-lg-none只在md设备上可见12.d-none.d-lg-block.d-xl-none只在lg设备上可见13.d-none.d-xl-block.d-xxl-none只在xl设备上可见14.d-none.d-xxl-block只在xxl设备上可见定义display响应式lg设备上的显示效果md设备上的显示效果定义display打印、显示Bootstrap定义了.d-print-{value}，可以结合Display类，用来设置元素在屏幕上显示，而打印时不打印。定义display7定位定位.position-{value}value的取值为position属性值：static、relative、absolute、fixed、sticky。position类定位position类

.{property}-{position}，属性取值：top、start、bottom、end位置值：0，50，100。（如需要更多值，可以修改变量Scss变量$position-values)定位边缘定位类类名含义.translate-middle-y

垂直方向向上平移50%.translate-middle-x

水平方向向左平移50%.translate-middle向上、向左平移50%定位平移工具类定位平移工具类

.fixed-top、.fixed-buttom类

.sticky-top类可以将一个元素固定在可见区域的顶部或底部。固定中如果遮挡的其他元素，需要配合自定义的CSS。当页面滚动时，将元素粘在顶部，必要时需配合自定义的CSS。另外，这个效果不是所有浏览器都支持。定位顶部底部定位类8flex布局flex布局Flex（FlexibleBox）布局是在CSS3中引入，又称为“弹性盒模型”，使用flex布局可以轻松地创建响应式网页布局。它是一种非常灵活的布局方法，就像几个小盒子放在一个大盒子里一样，相对独立，容易设置。弹性盒子flex概述子元素子元素子元素开始位置主轴交叉轴开始位置结束位置结束位置flex布局flex概述要将一个容器变为弹性盒子，可以设置display属性为flex或inline-flex。在Bootstrap框架中定义了d-flex，d-inlin-flex类，可以将容器变为flex盒子。flex布局display属性flex布局display属性取值描述类row弹性盒子元素按横轴方向顺序排列（默认值）.flex-rowrow-reverse弹性盒子元素按横轴方向逆序排列.flex-row-reversecolumn弹性盒子元素按纵轴方向顺序排列.flex-columncolumn-reverse弹性盒子元素按纵轴方向逆序排列.flex-column-reverseflex-flow属性的值是flex-direction的值和flex-wrap的值的组合。flex-direction用于调整主轴的方向，可以调整为横向或者纵向。在默认情况下是横向，此时横轴为主轴，从左到右，纵轴为侧轴，从上到下。如果改为纵向，则纵轴为主轴，横轴为侧轴。flex布局flex-flow属性flex布局flex-flow属性flex布局flex-flow属性取值描述类flex-start弹性盒子元素将向行起始位置对齐（默认值）.justify-content-startflex-end弹性盒子元素将向行结束位置对齐.justify-content-endcenter弹性盒子元素将向行中间位置对齐.justify-content-centerspace-between弹性盒子元素会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边界对齐.justify-content-betweenspace-around弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半.justify-content-around.space-evenly弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的相等.justify-content-evenlyflex布局Justify-content属性flex布局Justify-content属性align-items属性用于定义子元素在侧轴上的对齐方式。取值描述类flex-start弹性盒子元素向垂直子轴的方向上的起始位置对齐.align-items-startflex-end弹性盒子元素向垂直于轴的方向上的结束位置对齐.align-items-endcenter弹性盒子元素向垂直于轴的方向上的中间位置对齐.align-items-centerbaseline如果弹性盒子元素的行内轴（页面中文字的排列方向)与侧轴方问一致,则该值与flex-start等效。其他情况下，该值将与基线对齐。.align-items-baselinestretch默认值。如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制.align-items-stretchflex布局align-item属性flex布局align-item属性flex布局可以使用align-self属性对单个子元素来设置对齐方式。align-self属性取值有auto、flex-start、flex-end、center、baseline、stretch，每个值的意义与align-items属性的取值类似。Bootstsrap中对应的类名：align-self-{value}，value的取值为start、end、center、baseline、stretch。flex布局align-self属性flex布局align-self属性

order属性用于设置子元素出现的排列顺序。数值越小，排列将会越靠前，默认为0。Bootstrap中定义类.order-{value}和.order-{sm、md、lg、xl、xxl}-{value}，其中value的取值从0~5，first(-1)、last(6)。flex布局order属性flex-grow为扩展比率，flex-shrink为收缩比率。Bootstrap中定义了类：flex-grow-0、flex-grow-1、flex-shrink-0、flex-shrink-1。0代表不扩展或收缩，1代表扩展或收缩。flex-grow的默认值为0，flex-shrink的默认值为1.flex布局flex-grow和flex-shrink属性使用.flex-fill强制让每个元素项目与内容宽度相等，同时占据所有可用的水平空间。多个项目同时设置了.flex-fill,则它们等比例分割宽度，适合导航项目；如果其中一个或两个没有设置.flex-fill,则没有设置的会被设置的填充宽度。flex布局flex-fill属性将flex对齐与automargin混在一起的时候，flex盒子也能正常运行。使用.me-auto，可以将后面的子元素右移，使用.ms-auto，将从自己开始的的子元素右移。水平方向上使用.mb-auto，可以将后面的的子元素下移，使用.mt-auto，将从自己开始的子元素下移。垂直方向上flex布局自动边距类flex布局自动边距类9shadow类shadow类类名含义.shadow给元素添加阴影.shadow-sm小阴影.shadow-lg大阴影.shadow-none无阴影10垂直对齐工具垂直对齐工具

vertical-align是一个CSS属性，用于指定行内元素或表格单元格中内容的垂直对齐方式。它可以应用于行内元素、表格单元格或表格单元格中的内容。Bootstrap框架中定义了align-{value}类。Value的取值有：baseline、top，middle，bottom，text-bottom，text-top。类描述.align-baseline默认。元素放置在父元素的基线上.align-top将元素的顶端与行中最高元素的顶端对齐.align-middle将此元素放置在父元素的中部.align-bottom将元素的顶端与行中最低的元素的顶端对齐.align-text-top将元素的顶端与父元素字体的顶端对齐.align-text-bottom将元素的底端与父元素字体的底端对齐垂直对齐工具11视觉隐藏类视觉隐藏类.visually-hidden：在视觉上隐藏元素，但辅助技术（如屏幕阅读器）可以访问这些元素。.visually-hidden-focusable：默认情况下视觉隐藏元素，但可以在元素或者其子元素得到焦点时显示。12可见性可见性使用.visible和.invisible类来控制HTML元素的可见性。13交互工具交互工具文本选择类指针事件类user-select-all全选pe-none阻止交互行为user-select-auto默认的选择行为pe-auto添加交互行为user-select-none不可选14溢出类溢出类溢出类overflow-{value}overflow-y-{value}overflow-x-{value}value的取值为auto、hidden、visible、scroll。溢出类用来设置overflow属性值。水平方向垂直方向溢出类15比