曙海教學(xué)優(yōu)勢(shì)
本課程,秉承二十一年積累的教學(xué)品質(zhì),以項(xiàng)目實(shí)現(xiàn)為導(dǎo)向,面向企事業(yè)項(xiàng)目實(shí)際需要,老師將會(huì)與您分享設(shè)計(jì)的全流程以及工具的綜合使用經(jīng)驗(yàn)、技巧。課程可定制,線上/線下/上門皆可,熱線:4008699035。
曙海培訓(xùn)的課程培養(yǎng)了大批受企業(yè)歡迎的工程師。大批企業(yè)和曙海
建立了良好的合作關(guān)系,合作企業(yè)30萬(wàn)+。曙海培訓(xùn)的課程在業(yè)內(nèi)有著響亮的知名度。
前端框架Bootstrap4培訓(xùn)課程
培訓(xùn)大綱:
?1 Bootstrap4安裝???
?1.1 使用CDN???
?1.2 從官網(wǎng)下載 Bootstrap 4并本地調(diào)用???
?1.3 創(chuàng)建第一個(gè)Bootstrap4頁(yè)面???
?1.4 理解Bootstraps4與CSS、JS的關(guān)系???
?2 Bootstrap4 網(wǎng)格系統(tǒng)(重點(diǎn))???
?2.1 網(wǎng)格類???
?2.2 網(wǎng)格系統(tǒng)規(guī)則???
?2.3 網(wǎng)格的基本結(jié)構(gòu)???
?2.4 網(wǎng)格布局在不同終端的響應(yīng)式處理???
?3 Bootstrap4 文字排版???
?3.1 Bootstrap 4 默認(rèn)基本設(shè)置???
?3.2 標(biāo)題默認(rèn)設(shè)置與標(biāo)題類???
?3.3 常見(jiàn)文字相關(guān)標(biāo)簽在Bootstrap4中的默認(rèn)樣式???
?3.4 更多排版相關(guān)的類???
?4 Font Awesome字體(重點(diǎn))???
?4.1 基礎(chǔ)原理???
?4.2 使用方法???
?4.3 應(yīng)用場(chǎng)景???
?5 Bootstrap4 顏色???
?5.1 文字顏色類???
?5.2 背景顏色類???
?6 Bootstrap4 表格(重點(diǎn))???
?6.1 基礎(chǔ)表格???
?6.2 條紋表格???
?6.3 帶邊框表格???
?6.4 鼠標(biāo)懸停狀態(tài)???
?6.5 黑色背景表格???
?6.6 黑色條紋表格???
?6.7 特定意義的顏色類???
?6.8 表頭顏色???
?6.9 較小的表格???
?6.10 響應(yīng)式表格???
?7 Bootstrap4 圖像形狀???
?7.1 圓角圖片???
?7.2 橢圓圖片???
?7.3 縮略圖???
?7.4 圖片對(duì)齊方式???
?7.5 響應(yīng)式圖片???
?8 Bootstrap4 Jumbotron???
?9 Bootstrap4 信息提示框???
?9.1 提示框添加鏈接???
?9.2 關(guān)閉提示框???
?9.3 提示框動(dòng)畫???
?10 Bootstrap4 按鈕與按鈕組???
?11 Bootstrap4 徽章???
?12 Bootstrap4進(jìn)度條???
?13 Bootstrap4分頁(yè)???
?14 Bootstrap4列表組???
?15 Bootstrap4卡片???
?16 Bootstrap4 下拉菜單???
?16.1 實(shí)例解析???
?16.2 下拉菜單中的分割線???
?16.3 下拉菜單中的標(biāo)題???
?16.4 下拉菜單中的可用項(xiàng)與禁用項(xiàng)???
?16.5 下拉菜單的定位???
?16.6 下拉菜單彈出方向設(shè)置???
?16.7 按鈕中設(shè)置下拉菜單???
?17 Bootstrap4 折疊???
?18 Bootstrap4 導(dǎo)航 (重點(diǎn))???
?18.1 導(dǎo)航對(duì)齊方式???
?18.2 垂直導(dǎo)航???
?18.3 選項(xiàng)卡???
?18.4 膠囊導(dǎo)航???
?18.5 導(dǎo)航等寬???
?18.6 膠囊下拉菜單???
?18.7 選項(xiàng)卡下拉菜單???
?18.8 動(dòng)態(tài)選項(xiàng)卡???
?18.9 膠囊狀動(dòng)態(tài)選項(xiàng)卡???
?19 Bootstrap4 導(dǎo)航欄 (重點(diǎn))???
?19.1 垂直導(dǎo)航欄???
?19.2 導(dǎo)航欄顏色設(shè)置???
?19.3 品牌/Logo???
?19.4 折疊導(dǎo)航欄???
?19.5 導(dǎo)航欄使用下拉菜單???
?19.6 導(dǎo)航欄的表單與按鈕???
?19.7 導(dǎo)航欄文本???
?19.8 固定導(dǎo)航欄???
?20 Bootstrap4 面包屑導(dǎo)航???
?21 Bootstrap4 表單???
?21.1 堆疊表單???
?21.2 內(nèi)聯(lián)表單???
?22 Bootstrap4 表單控件???
?22.1 input???
?22.2 textarea???
?22.3 checkbox???
?22.4 radio???
?22.5 select???
?23 Bootstrap4 輸入框組???
?24 Bootstrap4 自定義表單???
?24.1 自定義復(fù)選框???
?24.2 自定義單選框???
?24.3 自定義控件顯示在同一行???
?24.4 自定義選擇菜單???
?24.5 自定義滑塊控件???
?24.6 自定義文件上傳控件???
?25 Bootstrap4 輪播 (重點(diǎn))???
?25.1 如何創(chuàng)建輪播???
?25.2 輪播圖片上添加描述???
?26 Bootstrap4 模態(tài)框???
?27 Bootstrap4 提示框???
?28 Bootstrap4 彈出框???
?29 Bootstrap4 頁(yè)面滾動(dòng)監(jiān)聽(tīng)???
?30 Bootstrap4 小工具???
?30.1 邊框???
?30.2 邊框顏色???
?30.3 邊框圓角設(shè)置???
?30.4 浮動(dòng)???
?30.5 響應(yīng)式浮動(dòng)???
?30.6 居中對(duì)齊???
?30.7 寬度???
?30.8 高度???
?31 Bootstrap 4 Flex???
?31.1 彈性盒子(flexbox)模型???
?31.2 水平排列???
?31.3 垂直排列???
?31.4 垂直排列???
?31.5 兩端對(duì)齊???
?31.6 其他flex設(shè)置???
?32 Bootstrap 4 多媒體對(duì)象???
?33 Bootstrap4 實(shí)例(重點(diǎn))