第4章工具類Bootstrap基礎教程（第3版）（微課版）趙丙秀目錄CONTENTS678910定義display定位flex布局陰影垂直對齊12345透明度邊框邊距尺寸浮動目錄CONTENTS161718延伸鏈接焦點環(huán)案例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類可以將一個元素固定在可見區(qū)域的頂部或底部。固定中如果遮擋的其他元素，需要配合自定義的CSS。當頁面滾動時，將元素粘在頂部，必要時需配合自定義的CSS。另外，這個效果不是所有瀏覽器都支持。定位頂部底部定位類8flex布局flex布局Flex（FlexibleBox）布局是在CSS3中引入，又稱為“彈性盒模型”，使用flex布局可以輕松地創(chuàng)建響應式網頁布局。它是一種非常靈活的布局方法，就像幾個小盒子放在一個大盒子里一樣，相對獨立，容易設置。彈性盒子flex概述子元素子元素子元素開始位置主軸交叉軸開始位置結束位置結束位置flex布局flex概述要將一個容器變?yōu)閺椥院凶?，可以設置display屬性為flex或inline-flex。在Bootstrap框架中定義了d-flex，d-inlin-flex類，可以將容器變?yōu)閒lex盒子。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比