任務(wù)1：

邊框項(xiàng)目四工具類主講人：邊框添加邊框類名邊框.border為元素的上、右、下、左四個(gè)方向都添加邊框.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邊框邊框顏色邊框邊框透明度類名設(shè)置內(nèi)容.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;邊框邊框透明度邊框邊框?qū)挾阮惷麑挾戎?border-1border-width:1px;.border-2border-width:2px;.border-3border-width:3px;.border-4border-width:4px;.border-5border-width:5px;邊框邊框圓角類名邊框.rounded為元素的上、右、下、左四個(gè)方向都設(shè)置圓角弧度0.375rem.rounded-top為元素頂部設(shè)置圓角，弧度0.375rem.rounded-end為元素右側(cè)設(shè)置圓角，弧度0.375rem.rounded-bottom為元素底側(cè)設(shè)置圓角，弧度0.375rem.rounded-start為元素左側(cè)設(shè)置圓角，弧度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},同時(shí)指定位置和寬度。課程小結(jié)添加邊框清除邊框邊框顏色邊框?qū)挾冗吙驁A角邊框工具任務(wù)2：

邊距項(xiàng)目四工具類主講人：CONTENTS0102邊距類負(fù)邊距類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內(nèi)邊距邊距類類的格式：.{property}{slides}-{size}

.{property}{slides}-{breakpoint}-{size}size0設(shè)置padding或margin為01設(shè)置padding或margin為$spacer*0.252設(shè)置padding或margin為$spacer*0.53設(shè)置padding或margin為$spacer4設(shè)置padding或margin為$spacer*1.55設(shè)置padding或margin為$spacer*3auto設(shè)置margin為auto，如mx-auto、m-auto等$spacer初始值1rem例子：.mt-3.px-4.m-1.p-3.mx-auto.py-5邊距類響應(yīng)式邊距類：{property}{slides}-{breakpoint}-{size}breakpoint：sm、md、lg、xl、xxl例如pt-lg-5，當(dāng)設(shè)備寬度達(dá)到lg時(shí)，才會有頂部48px的內(nèi)邊距。負(fù)邊距類/02負(fù)邊距類Scss變量中$enable-negative-margins默認(rèn)為false。所以默認(rèn)情況下，負(fù)外邊距類不可用。將變量的值改為true后，可以使用負(fù)邊距類。在外邊距的size前面加字母“n”。.mt-n1{margin-top：-0.25rem！important；}例如：間距gap類/03間距gap類當(dāng)容器display屬性為grid或flex，可以在容器上使用gap工具類，來設(shè)置子元素之間的間距。格式：.gap-{size}，

行列間距，其中size取0~5的值，其值與與內(nèi)邊距外邊距的值一致。.column-gap-{size}，

列間距.row-gap-{size}，行間距課程小結(jié)

邊距類

間距gap類

負(fù)邊距類類的具體定義可以在bootstrap.css文件查看。講解中涉及了scss變量，讀者可以查看源碼文件_variables.scss。任務(wù)3：

浮動(dòng)-尺寸-顯示項(xiàng)目四工具類主講人：CONTENTS0102浮動(dòng)尺寸工具類03顯示工具類浮動(dòng)/01浮動(dòng)

浮動(dòng)

.float-start左浮動(dòng)

.float-end右浮動(dòng)

float-none不浮動(dòng)浮動(dòng)浮動(dòng).clearfix類來清除浮動(dòng)。定義的是偽類:after。所以父級容器上添加.clearfix，用來清除內(nèi)部元素的浮動(dòng)。

清除浮動(dòng)浮動(dòng)

清除浮動(dòng)尺寸工具類/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;與視口相關(guān)顯示工具類/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。顯示工具類響應(yīng)式利用響應(yīng)式Display類，可以讓頁面在不同設(shè)備上顯示不一樣的效果。使用.d-none類或.d-{sm，md，lg，xl}-none類中的一個(gè)和其他Display類搭配使用，可以是元素只在相應(yīng)寬度的設(shè)備上顯示。序號類顯示效果1.d-none所有設(shè)備上都不顯示2.d-none.d-sm-block只在xs設(shè)備上隱藏3.d-sm-none.d-md-block只在sm設(shè)備上隱藏4.d-md-none.d-lg-block只在md設(shè)備上隱藏5.d-lg-none.d-xl-block只在lg設(shè)備上隱藏6.d-xl-none.d-xxl-block只在xl設(shè)備上隱藏7.d-xxl-none只在xxl設(shè)備上隱藏8.d-block所有設(shè)備上都可見9.d-block.d-sm-none只在xs設(shè)備上可見10.d-none.d-sm-block.d-md-none只在sm設(shè)備上可見11.d-none.d-md-block.d-lg-none只在md設(shè)備上可見12.d-none.d-lg-block.d-xl-none只在lg設(shè)備上可見13.d-none.d-xl-block.d-xxl-none只在xl設(shè)備上可見14.d-none.d-xxl-block只在xxl設(shè)備上可見顯示工具類響應(yīng)式lg設(shè)備上的顯示效果md設(shè)備上的顯示效果顯示工具類打印、顯示Bootstrap定義了.d-print-{value}，可以結(jié)合Display類，用來設(shè)置元素在屏幕上顯示，而打印時(shí)不打印。任務(wù)4：

定位項(xiàng)目四工具類主講人：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類可以將一個(gè)元素固定在可見區(qū)域的頂部或底部。固定中如果遮擋的其他元素，需要配合自定義的CSS。當(dāng)頁面滾動(dòng)時(shí)，將元素粘在頂部，必要時(shí)需配合自定義的CSS。另外，這個(gè)效果不是所有瀏覽器都支持。任務(wù)5：

其他類項(xiàng)目四工具類主講人：CONTENTS0102shadow類垂直對齊工具03視覺隱藏類0405交互工具可見類06溢出類shadow類/01shadow類類名含義.shadow給元素添加陰影.shadow-sm小陰影.shadow-lg大陰影.shadow-none無陰影垂直對齊工具/02垂直對齊工具

vertical-align是一個(gè)CSS屬性，用于指定行內(nèi)元素或表格單元格中內(nèi)容的垂直對齊方式。它可以應(yīng)用于行內(nèi)元素、表格單元格或表格單元格中的內(nèi)容。Bootstrap框架中定義了align-{value}類。Value的取值有：baseline、top，middle，bottom，text-bottom，text-top。類描述.align-baseline默認(rèn)。元素放置在父元素的基線上.align-top將元素的頂端與行中最高元素的頂端對齊.align-middle將此元素放置在父元素的中部.align-bottom將元素的頂端與行中最低的元素的頂端對齊.align-text-top將元素的頂端與父元素字體的頂端對齊.align-text-bottom將元素的底端與父元素字體的底端對齊垂直對齊工具視覺隱藏類/03視覺隱藏類.visually-hidden：在視覺上隱藏元素，但輔助技術(shù)（如屏幕閱讀器）可以訪問這些元素。.visually-hidden-focusable：默認(rèn)情況下視覺隱藏元素，但可以在元素或者其子元素得到焦點(diǎn)時(shí)顯示?？梢婎?04可見類使用.visible和.invisible類來控制HTML元素的可見性。交互工具/05交互工具文本選擇類指針事件類user-select-all全選pe-none阻止交互行為user-select-auto默認(rèn)的選擇行為pe-auto添加交互行為user-select-none不可選溢出類/06溢出類溢出類overflow-{value}overflow-y-{value}overflow-x-{value}value的取值為auto、hidden、visible、scroll。溢出類用來設(shè)置overflow屬性值。水平方向垂直方向溢出類任務(wù)6：

彈性盒子1項(xiàng)目四工具類主講人：CONTENTS0102彈性盒子概述Display屬性03Flex-flow屬性04Justify-content屬性彈性盒子概述/01彈性盒子概述Flex（FlexibleBox）布局是在CSS3中引入，又稱為“彈性盒模型”，使用flex布局可以輕松地創(chuàng)建響應(yīng)式網(wǎng)頁布局。它是一種非常靈活的布局方法，就像幾個(gè)小盒子放在一個(gè)大盒子里一樣，相對獨(dú)立，容易設(shè)置。彈性盒子彈性盒子概述子元素子元素子元素開始位置主軸交叉軸開始位置結(jié)束位置結(jié)束位置Display屬性/02Display屬性要將一個(gè)容器變?yōu)閺椥院凶樱梢栽O(shè)置display屬性為flex或inline-flex。在Bootstrap框架中定義了d-flex，d-inlin-flex類，可以將容器變?yōu)閒lex盒子。Display屬性Flex-flow屬性/03Flex-flow屬性取值描述類row彈性盒子元素按橫軸方向順序排列（默認(rèn)值）.flex-rowrow-reverse彈性盒子元素按橫軸方向逆序排列.flex-row-reversecolumn彈性盒子元素按縱軸方向順序排列.flex-columncolumn-reverse彈性盒子元素按縱軸方向逆序排列.flex-column-reverseflex-flow屬性的值是flex-direction的值和flex-wrap的值的組合。flex-direction用于調(diào)整主軸的方向，可以調(diào)整為橫向或者縱向。在默認(rèn)情況下是橫向，此時(shí)橫軸為主軸，從左到右，縱軸為側(cè)軸，從上到下。如果改為縱向，則縱軸為主軸，橫軸為側(cè)軸。Flex-flow屬性Flex-flow屬性取值描述類nowrap容器為單行，該情況下flex子項(xiàng)可能會溢出容器。該值是默認(rèn)屬性值，不換行.flex-nowrapwrap容器為多行，flex子項(xiàng)溢出的部分會被放置到新行（換行），第一行顯示在上方.flex-wrapwrap-reverse反轉(zhuǎn)wrap排列（換行），第一行顯示在下方.flex-warip-reverseFlex-flow屬性Justify-content屬性/04Justify-content屬性取值描述類flex-start彈性盒子元素將向行起始位置對齊（默認(rèn)值）.justify-content-startflex-end彈性盒子元素將向行結(jié)束位置對齊.justify-content-endcenter彈性盒子元素將向行中間位置對齊.justify-content-centerspace-between彈性盒子元素會平均分布在行里，第一個(gè)元素的邊界與行的起始位置邊界對齊，最后一個(gè)元素的邊界與行結(jié)束位置的邊界對齊.justify-content-betweenspace-around彈性盒子元素會平均分布在行里，兩端保留子元素與子元素之間間距大小的一半.justify-content-around.space-evenly彈性盒子元素會平均分布在行里，兩端保留子元素與子元素之間間距大小的相等.justify-content-evenlyJustify-content屬性任務(wù)7：

彈性盒子2項(xiàng)目四工具類主講人：CONTENTSflex-grow和flex-shrink屬性0102align-item屬性align-self屬性03align-content屬性04order屬性0506Flex-fill類07自動(dòng)邊距類align-item屬性/01align-item屬性align-items屬性用于定義子元素在側(cè)軸上的對齊方式。取值描述類flex-start彈性盒子元素向垂直子軸的方向上的起始位置對齊.align-items-startflex-end彈性盒子元素向垂直于軸的方向上的結(jié)束位置對齊.align-items-endcenter彈性盒子元素向垂直于軸的方向上的中間位置對齊.align-items-centerbaseline如果彈性盒子元素的行內(nèi)軸（頁面中文字的排列方向)與側(cè)軸方問一致,則該值與flex-start等效。其他情況下，該值將與基線對齊。.align-items-baselinestretch默認(rèn)值。如果指定側(cè)軸大小的屬性值為auto，則其值會使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會遵照min/max-width/height屬性的限制.align-items-stretchalign-item屬性align-self屬性/02align-self屬性flex布局可以使用align-self屬性對單個(gè)子元素來設(shè)置對齊方式。align-self屬性取值有auto、flex-start、flex-end、center、baseline、stretch，每個(gè)值的意義與align-items屬性的取值類似。Bootstsrap中對應(yīng)的類名：align-self-{value}，value的取值為start、end、center、baseline、stretch。align-self屬性align-content屬性/03align-content屬性align-content定義容器內(nèi)行的對齊方式。所以該屬性往往與flex-wrap屬性一起使用。order屬性/04order屬性