《Web前端框架应用bootstrap》课件-项目四 工具类

任务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：

边距项目四工具类主讲人：CONTENTS0102边距类负边距类03间距gap类边距类/01.{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的内边距。负边距类/02负边距类Scss变量中$enable-negative-margins默认为false。所以默认情况下，负外边距类不可用。将变量的值改为true后，可以使用负边距类。在外边距的size前面加字母“n”。.mt-n1{margin-top：-0.25rem！important；}例如：间距gap类/03间距gap类当容器display属性为grid或flex，可以在容器上使用gap工具类，来设置子元素之间的间距。格式：.gap-{size}，

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

列间距.row-gap-{size}，行间距课程小结

边距类

间距gap类

负边距类类的具体定义可以在bootstrap.css文件查看。讲解中涉及了scss变量，读者可以查看源码文件_variables.scss。任务3：

浮动-尺寸-显示项目四工具类主讲人：CONTENTS0102浮动尺寸工具类03显示工具类浮动/01浮动

浮动

.float-start左浮动

.float-end右浮动

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

清除浮动浮动

清除浮动尺寸工具类/02尺寸工具类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;与视口相关显示工具类/03显示工具类Display属性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设备上可见显示工具类响应式lg设备上的显示效果md设备上的显示效果显示工具类打印、显示Bootstrap定义了.d-print-{value}，可以结合Display类，用来设置元素在屏幕上显示，而打印时不打印。任务4：

定位项目四工具类主讲人：CONTENTS0102Position类边缘定位工具03定位类position类/01position类.position-{value}value的取值为position属性值：static、relative、absolute、fixed、sticky。position类边缘定位工具/02边缘定位工具

{property}-{position}，属性取值：top、start、bottom、end位置值：0，50，100。（如需要更多值，可以修改变量Scss变量$position-values)平移工具/03平移工具

类名含义.translate-middle-y

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

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

.fixed-top、.fixed-buttom类

.sticky-top类可以将一个元素固定在可见区域的顶部或底部。固定中如果遮挡的其他元素，需要配合自定义的CSS。当页面滚动时，将元素粘在顶部，必要时需配合自定义的CSS。另外，这个效果不是所有浏览器都支持。任务5：

其他类项目四工具类主讲人：CONTENTS0102shadow类垂直对齐工具03视觉隐藏类0405交互工具可见类06溢出类shadow类/01shadow类类名含义.shadow给元素添加阴影.shadow-sm小阴影.shadow-lg大阴影.shadow-none无阴影垂直对齐工具/02垂直对齐工具

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将元素的底端与父元素字体的底端对齐垂直对齐工具视觉隐藏类/03视觉隐藏类.visually-hidden：在视觉上隐藏元素，但辅助技术（如屏幕阅读器）可以访问这些元素。.visually-hidden-focusable：默认情况下视觉隐藏元素，但可以在元素或者其子元素得到焦点时显示。可见类/04可见类使用.visible和.invisible类来控制HTML元素的可见性。交互工具/05交互工具文本选择类指针事件类user-select-all全选pe-none阻止交互行为user-select-auto默认的选择行为pe-auto添加交互行为user-select-none不可选溢出类/06溢出类溢出类overflow-{value}overflow-y-{value}overflow-x-{value}value的取值为auto、hidden、visible、scroll。溢出类用来设置overflow属性值。水平方向垂直方向溢出类任务6：

弹性盒子1项目四工具类主讲人：CONTENTS0102弹性盒子概述Display属性03Flex-flow属性04Justify-content属性弹性盒子概述/01弹性盒子概述Flex（FlexibleBox）布局是在CSS3中引入，又称为“弹性盒模型”，使用flex布局可以轻松地创建响应式网页布局。它是一种非常灵活的布局方法，就像几个小盒子放在一个大盒子里一样，相对独立，容易设置。弹性盒子弹性盒子概述子元素子元素子元素开始位置主轴交叉轴开始位置结束位置结束位置Display属性/02Display属性要将一个容器变为弹性盒子，可以设置display属性为flex或inline-flex。在Bootstrap框架中定义了d-flex，d-inlin-flex类，可以将容器变为flex盒子。Display属性Flex-flow属性/03Flex-flow属性取值描述类row弹性盒子元素按横轴方向顺序排列（默认值）.flex-rowrow-reverse弹性盒子元素按横轴方向逆序排列.flex-row-reversecolumn弹性盒子元素按纵轴方向顺序排列.flex-columncolumn-reverse弹性盒子元素按纵轴方向逆序排列.flex-column-reverseflex-flow属性的值是flex-direction的值和flex-wrap的值的组合。flex-direction用于调整主轴的方向，可以调整为横向或者纵向。在默认情况下是横向，此时横轴为主轴，从左到右，纵轴为侧轴，从上到下。如果改为纵向，则纵轴为主轴，横轴为侧轴。Flex-flow属性Flex-flow属性取值描述类nowrap容器为单行，该情况下flex子项可能会溢出容器。该值是默认属性值，不换行.flex-nowrapwrap容器为多行，flex子项溢出的部分会被放置到新行（换行），第一行显示在上方.flex-wrapwrap-reverse反转wrap排列（换行），第一行显示在下方.flex-warip-reverseFlex-flow属性Justify-content属性/04Justify-content属性取值描述类flex-start弹性盒子元素将向行起始位置对齐（默认值）.justify-content-startflex-end弹性盒子元素将向行结束位置对齐.justify-content-endcenter弹性盒子元素将向行中间位置对齐.justify-content-centerspace-between弹性盒子元素会平均分布在行里，第一个元素的边界与行的起始位置边界对齐，最后一个元素的边界与行结束位置的边界对齐.justify-content-betweenspace-around弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的一半.justify-content-around.space-evenly弹性盒子元素会平均分布在行里，两端保留子元素与子元素之间间距大小的相等.justify-content-evenlyJustify-content属性任务7：

弹性盒子2项目四工具类主讲人：CONTENTSflex-grow和flex-shrink属性0102align-item属性align-self属性03align-content属性04order属性0506Flex-fill类07自动边距类align-item属性/01align-item属性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-stretchalign-item属性align-self属性/02align-self属性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。align-self属性align-content属性/03align-content属性align-content定义容器内行的对齐方式。所以该属性往往与flex-wrap属性一起使用。order属性/04order属性