響應(yīng)式開發(fā)技術(shù)主講人：Bootstrap基礎(chǔ)--初識Bootstrap低成本，易上手CSS預(yù)編譯框架成熟豐富的組件庫響應(yīng)式設(shè)計移動設(shè)備優(yōu)先瀏覽器支持Bootstrap提供了一個帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。基本結(jié)構(gòu)Bootstrap包含了豐富的組件庫，提供了十幾個可重用的組件。布局組件Bootstrap自帶了全局的CSS樣式，并預(yù)先定義了基本的HTML元素樣式、可擴展的類。CSS樣式庫Bootstrap提供了一些基于jQuery（一個用于簡化JavaScript編程的庫）構(gòu)建的可選插件。插件Bootstrap的組成213下載預(yù)編譯的文件，直接使用下載源文件進行手動編譯不下載任何文件，直接引入CDNBootstrap基礎(chǔ)--制作手機模塊教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程類說明.w-25用于設(shè)置元素的寬度為父元素寬度的25%.w-50用于設(shè)置元素的寬度為父元素寬度的50%.w-75用于設(shè)置元素的寬度為父元素寬度的75%.w-100用于設(shè)置元素的寬度為父元素寬度的100%.w-auto用于設(shè)置元素的寬度為自適應(yīng).h-25用于設(shè)置元素的高度為父元素寬度的25%.h-50用于設(shè)置元素的高度為父元素寬度的50%.h-75用于設(shè)置元素的高度為父元素寬度的75%.h-100用于設(shè)置元素的高度為父元素寬度的100%.h-auto用于設(shè)置元素的高度為自適應(yīng)教學(xué)內(nèi)容與過程類說明.m-0或.p-0設(shè)置邊距為0.m-1或.p-1設(shè)置magrin或padding為0.25rem.m-2或.p-2設(shè)置magrin或padding為0.5rem.m-3或.p-3設(shè)置magrin或padding為1rem.m-4或.p-4設(shè)置magrin或padding為1.5rem.m-5或.p-5設(shè)置magrin或padding為3rem.m-auto或.p-auto設(shè)置magrin或padding為auto教學(xué)內(nèi)容與過程說明.mt-5{margin-top:3rem!important;}.mb-5{margin-bottom:3rem!important;}.ml-5{margin-left:3rem!important;}.mr-5{margin-right:3rem!important;}.mx-5{margin-left:3rem!important;margin-right:3rem!important;}.my-5{margin-top:3rem!important;margin-bottom:3rem!important;}.mr-auto{margin-right:auto!important;}教學(xué)內(nèi)容與過程類說明.border-primary用于設(shè)計藍色邊框，表示強調(diào)意義.border-secondary用于設(shè)計灰色邊框，表示次要意義.border-success用于設(shè)計綠色邊框，表示成功意義.border-danger用于設(shè)計紅色邊框，表示危險意義.border-warning用于設(shè)計淺黃色邊框，表示警告意義.border-info用于設(shè)計淺藍色邊框，表示信息意義.border-light用于設(shè)計白色邊框，表示高亮意義.border-dark用于設(shè)計黑色邊框.border-white用于設(shè)計白色邊框教學(xué)內(nèi)容與過程類說明.shadow-none用于去除陰影。.shadow-sm用于設(shè)置很小的陰影.shadow用于設(shè)置正常的陰影.shadow-lg設(shè)置更大的陰影教學(xué)內(nèi)容與過程類名描述.text-primary文本顏色.text-secondary副標題顏色.text-success成功文本顏色.text-muted柔和顏色.text-danger危險提示文本顏色.text-info一般提示信息文本顏色.text-warning警告信息文本顏色.text-dark深灰色文本.text-bodybody文本顏色.text-light淺灰色文本.text-white白色文本.text-black黑色文本Bootstrap基礎(chǔ)--制作成績表格教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程類名描述.table基類，也就是表格的基本樣式.table-dark設(shè)置顏色反轉(zhuǎn)對比效果.table-striped條紋表格，設(shè)置斑馬線效果，實現(xiàn)隔行換色.table-bordered帶邊框表格.table-borderless無邊框表格.table-hover鼠標懸停效果，鼠標移動到行或單元格上，表格行變色教學(xué)內(nèi)容與過程類名描述.thead-light設(shè)置表頭淺灰色背景.thead-dark設(shè)置表頭淺黑色背景教學(xué)內(nèi)容與過程類名描述.table-primary藍色：指定這是一個重要的操作.table-success綠色：指定這是一個允許執(zhí)行的操作.table-danger紅色：指定這是一個危險的操作.table-info淺藍色：表示內(nèi)容已變更.table-warning橘色：表示需要注意的操作.table-active灰色：用于鼠標懸停的效果.table-secondary灰色：表示內(nèi)容不是特別重要.table-light淺灰色：可以是表格行的背景.table-dark深灰色：可以是表格行的背景教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程Bootstrap基礎(chǔ)--制作廣告牌教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程類說明display-1最大號字體display-2較大號字體display-3中等大小號字體display-4較小號字體display-5更小號字體display-6最小號字體教學(xué)內(nèi)容與過程類說明.font-weight-light設(shè)置較細的字體（相對于父元素）.font-weight-lighter設(shè)置細的字體.font-weight-normal設(shè)置正常粗細的字體.font-weight-bold設(shè)置粗的字體.font-weight-bolder設(shè)置較粗的字體（相對于父元素）教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程類說明.btn-primary按鈕顏色為藍色，表示重要意義.btn-secondary按鈕顏色為灰色，表示次要意義.btn-success按鈕顏色為淺綠色，表示成功意義.btn-danger按鈕顏色為淺紅色，表示危險意義.btn-warning按鈕顏色為淺黃色，表示警告意義.btn-info按鈕顏色為淺藍色，表示信息意義.btn-light按鈕顏色為淺灰色，表示高亮意義.btn-dark按鈕顏色為深灰色，表示暗色意義.btn-white按鈕顏色為白色Bootstrap基礎(chǔ)--制作媒體列表教學(xué)內(nèi)容與過程草莓草莓是薔薇科，草莓屬多年生草本植物。草莓根系較淺，莖可根分為新莖、根狀莖和匍匐莖。草莓葉為基生三出復(fù)葉，具長葉柄，花絕大多數(shù)為兩性花，花序為有限聚傘花序。草莓的果實由花托膨大發(fā)育而成，果實生長曲線呈典型的S形。草莓種子是受精后的子房膨大形成是瘦果，附著在膨大花托的表面。檸檬蕓香料柑橘屬木本植物，枝少刺或近于無刺，嫩葉及花芽暗紫紅色，葉為卵形或橢圓形，花瓣外面為淡紫紅色，內(nèi)面白色，果實為橢圓形或卵形，果皮厚，檸檬黃色，花期4~5月，果期9~11月。葡萄葡萄科葡萄屬高大纏繞藤本，幼莖禿凈或略被棉毛，葉片為紙質(zhì)，圓卵形或圓形，花序大而長，萼很小，為黃綠色的杯狀，花柱很短，為圓錐形，漿果為卵圓形至卵狀長與圓形，成熟時為紫黑色或紅而帶青色，花期6月，果期9~10月。教學(xué)內(nèi)容與過程類名顯示效果.align-self-start頂部對齊.align-self-center居中對齊.align-self-end底部對齊教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程類說明.btn-primary按鈕顏色為藍色，表示重要意義.btn-secondary按鈕顏色為灰色，表示次要意義.btn-success按鈕顏色為淺綠色，表示成功意義.btn-danger按鈕顏色為淺紅色，表示危險意義.btn-warning按鈕顏色為淺黃色，表示警告意義.btn-info按鈕顏色為淺藍色，表示信息意義.btn-light按鈕顏色為淺灰色，表示高亮意義.btn-dark按鈕顏色為深灰色，表示暗色意義.btn-white按鈕顏色為白色Bootstrap基礎(chǔ)--制作條紋進度條教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程類說明.bg-primary背景顏色為藍色，表示重要意義.bg-secondary背景顏色為灰色，表示次要意義.bg-success背景顏色為淺綠色，表示成功意義.bg-danger背景顏色為淺紅色，表示危險意義.bg-warning背景顏色為淺黃色，表示警告意義.bg-info背景顏色為淺藍色，表示信息意義.bg-light背景顏色為淺灰色，表示高亮意義.bg-dark背景顏色為深灰色，表示暗色意義.bg-white背景顏色為白色.bg-transparent背景顏色為透明色教學(xué)內(nèi)容與過程Bootstrap基礎(chǔ)--制作卡片陣列教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程類說明

.card創(chuàng)建卡片的基本容器.card-header創(chuàng)建卡片的頭部區(qū)域，通常用于標題或?qū)Ш?/p>

.card-body

創(chuàng)建卡片的主體內(nèi)容區(qū)域

.card-footer創(chuàng)建卡片的底部區(qū)域，通常用于操作按鈕或額外的鏈接.card-img-top

.card-img-bottom

添加圖像，分別位于卡片的頂部或底部.card-link卡片添加鏈接教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程教學(xué)內(nèi)容與過程Bootstrap基礎(chǔ)--制作手風(fēng)琴