202X工具類01工具類概述02文本工具類03顏色工具類04邊框工具類目錄05邊距工具類06寬度和高度工具類07顯示和浮動工具類08其他工具類09案例演練：旅行社旅游平臺網(wǎng)頁10思考與練習(xí)01工具類概述Bootstrap工具類是預(yù)定義的CSS類，用于快速添加樣式和功能，無需額外編寫CSS代碼。例如.rounded類用于添加圓角，.text-center類用于文本居中。工具類定義工具類命名格式為.{property}-{value}，如.mb-1表示底部邊距為0.25rem。部分工具類采用直觀命名，如.border-size-1px。工具類命名規(guī)則包括文本工具類、顏色工具類、邊框工具類、邊距工具類、寬度和高度工具類、顯示和浮動工具類等，覆蓋多種樣式需求。工具類種類工具類概念使用工具類可快速實現(xiàn)常見樣式，減少自定義CSS編寫，加快開發(fā)速度。提高開發(fā)效率工具類功能單一，易于組合和擴(kuò)展，適合多種開發(fā)場景，可結(jié)合前端框架進(jìn)一步增強(qiáng)功能。靈活性部分工具類支持響應(yīng)式設(shè)計，如.text-md-center，在中等屏幕尺寸下實現(xiàn)文本居中對齊，適應(yīng)不同設(shè)備。響應(yīng)式支持工具類優(yōu)勢02文本工具類文本對齊使用.text-start、.text-center、.text-end實現(xiàn)左對齊、居中對齊和右對齊。響應(yīng)式對齊類如.text-sm-center可根據(jù)屏幕尺寸調(diào)整對齊方式。文本換行.text-wrap類使文本自動換行，.text-nowrap類防止文本換行。.text-truncate類以省略號顯示超出文本，.text-break類允許長單詞斷行。文本對齊與換行.fs-1到.fs-6類分別設(shè)置字號為2.5rem到1rem，用于快速調(diào)整文本大小。文本字號.text-lowercase、.text-uppercase、.text-capitalize類分別實現(xiàn)小寫、大寫和首字母大寫轉(zhuǎn)換。文本轉(zhuǎn)換文本字號與轉(zhuǎn)換字體斜體.fw-normal、.fw-bold、.fw-bolder、.fw-light、.fw-lighter類分別設(shè)置普通、粗體、更粗、輕體和更輕的字體粗細(xì)。字體粗細(xì).fst-italic類設(shè)置斜體，.fst-normal類設(shè)置普通字體樣式。字體粗細(xì)與斜體.lh-1到.lh-xl類分別設(shè)置1倍到2倍行高，用于調(diào)整文本行間距。01控制行高.text-decoration-none移除文本修飾，.text-decoration-underline添加下劃線，.text-decoration-line-through添加刪除線。01”文字修飾03顏色工具類文本顏色.text-primary到.text-dark類分別設(shè)置主色、次色、成功色、危險色、警告色、信息色、淺色和深色文本。背景顏色.bg-primary到.bg-dark類分別設(shè)置主色、次色、成功色、危險色、警告色、信息色、淺色和深色背景。0102文本顏色與背景顏色.link-primary到.link-muted類分別設(shè)置不同顏色的鏈接，并提供懸浮和焦點樣式。01鏈接顏色04邊框工具類.border類添加完整邊框，.border-{side}類（如.border-top）添加單側(cè)邊框，.border-{value}類（如.border-1）設(shè)置邊框?qū)挾?。添加邊?border-0類刪除邊框，.border-{side}-0類刪除特定一側(cè)邊框。刪除邊框添加與刪除邊框01.rounded類添加圓角邊框，.rounded-{side}類（如.rounded-top）添加單側(cè)圓角，.rounded-circle類設(shè)置圓形，.rounded-pill類設(shè)置橢圓形。圓角邊框05邊距工具類外邊距.m{side}-{value}類設(shè)置外邊距，如.mb-1設(shè)置底部邊距為0.25rem。內(nèi)邊距.p{side}-{value}類設(shè)置內(nèi)邊距，如.pt-2設(shè)置頂部內(nèi)邊距為0.5rem。外邊距和內(nèi)邊距.m{side}-{breakpoint}-{value}類支持響應(yīng)式設(shè)計，如.m-sm-2在小型設(shè)備上設(shè)置外邊距為0.5rem。響應(yīng)式邊距06寬度和高度工具類.w-25到.w-100類分別設(shè)置寬度為25%到100%，.w-auto類設(shè)置寬度為自動。寬度工具類.h-25到.h-100類分別設(shè)置高度為25%到100%，.h-auto類設(shè)置高度為自動。高度工具類.mw-100類設(shè)置最大寬度為100%，.mh-100類設(shè)置最大高度為100%，防止元素超出容器。最大寬度和高度07顯示和浮動工具類.d-none類隱藏元素，.d-inline、.d-block、.d-inline-block等類分別設(shè)置內(nèi)聯(lián)、塊級和行內(nèi)塊級顯示。01顯示狀態(tài).d-{breakpoint}-{none|block}類支持響應(yīng)式顯示和隱藏，如.d-none.d-md-block在中型設(shè)備及以上顯示元素。02響應(yīng)式顯示顯示工具類.float-start、.float-end類分別使元素向左、向右浮動，.clearfix類清除浮動效果。響應(yīng)式浮動類如.float-md-start在中型設(shè)備上使元素向左浮動。01浮動工具類08其他工具類.position-static到.position-sticky類分別設(shè)置靜態(tài)、相對、絕對、固定和黏性定位。位置工具類.shadow、.shadow-sm、.shadow-lg、.shadow-none類分別設(shè)置不同強(qiáng)度的陰影效果。01陰影工具類09案例演練：旅行社旅游平臺網(wǎng)頁旅行社旅游平臺網(wǎng)頁項目旨在創(chuàng)建一個綜合性在線服務(wù)平臺，提供旅游信息發(fā)布、瀏覽和分享功能，整合豐富旅游資源，包括旅游線路、酒店住宿、交通服務(wù)和當(dāng)?shù)鼗顒拥取０咐攀鍪褂肂ootstrap工具類設(shè)計網(wǎng)頁頭部，包括Logo、名稱、搜索框、導(dǎo)航按鈕、登錄注冊按鈕和推薦語。采用網(wǎng)格系統(tǒng)和Flex布局，實現(xiàn)響應(yīng)式設(shè)計。01網(wǎng)頁頭部設(shè)計使用Bootstrap輪播組件展示圖片內(nèi)容，刪除標(biāo)題和文本說明，突出圖片視覺效果，提升用戶體驗。輪播設(shè)計01使用Bootstrap網(wǎng)格系統(tǒng)設(shè)計分類列表，每行分為四列，包含標(biāo)題和內(nèi)容框。應(yīng)用.btn類和自定義樣式實現(xiàn)交互效果。分類列表設(shè)計采用雙欄布局，左側(cè)為最新圖片展示區(qū)，右側(cè)為熱度排行榜。使用網(wǎng)格系統(tǒng)嵌套，實現(xiàn)響應(yīng)式設(shè)計?！奥糜尉包c”頁面設(shè)計使用Bootstrap導(dǎo)航欄組件設(shè)計頁