Bootstrap從入門到項(xiàng)目實(shí)戰(zhàn)

Bootstrap從入門到項(xiàng)目實(shí)戰(zhàn)讀書筆記模板01思維導(dǎo)圖讀書筆記作者介紹內(nèi)容摘要目錄分析精彩摘錄目錄0305020406思維導(dǎo)圖項(xiàng)目實(shí)戰(zhàn)網(wǎng)站網(wǎng)頁項(xiàng)目設(shè)計(jì)類設(shè)計(jì)布局第章內(nèi)容案例風(fēng)格添加網(wǎng)站項(xiàng)目樣式插件工具本書關(guān)鍵字分析思維導(dǎo)圖內(nèi)容摘要內(nèi)容摘要《Bootstrap從入門到項(xiàng)目實(shí)戰(zhàn)》從零基礎(chǔ)開始講解，用實(shí)例引導(dǎo)讀者深入學(xué)習(xí)，深入淺出地講解了Bootstrap4網(wǎng)頁設(shè)計(jì)的各項(xiàng)技術(shù)及實(shí)戰(zhàn)技能。本書共18章，主要內(nèi)容包括：開發(fā)框架Bootstrap4簡介、使用新的架Bootstrap4、快速掌握Bootstrap4布局、Bootstrap4的新布局—彈性盒子、核心工具庫—CSS通用樣式類、Bootstrap4的新版式、認(rèn)識(shí)CSS組件、深入掌握CSS組件、高級(jí)的CSS組件、Bootstrap4的新增組件—旋轉(zhuǎn)器和卡片、快速認(rèn)識(shí)JavaScript插件、深入精通JavaScript插件等。之后講解了6個(gè)行業(yè)熱點(diǎn)項(xiàng)目實(shí)訓(xùn)，包括招聘網(wǎng)中的簡歷模板、仿星巴克網(wǎng)站、相冊(cè)類博客項(xiàng)目、設(shè)計(jì)流行企業(yè)網(wǎng)站、Web設(shè)計(jì)與定制網(wǎng)站、開發(fā)神影視頻網(wǎng)站?！禕ootstrap從入門到項(xiàng)目實(shí)戰(zhàn)》適合任何想學(xué)習(xí)Bootstrap網(wǎng)頁設(shè)計(jì)的讀者，無論您是否從事相關(guān)行業(yè)，是否接觸過Bootstrap網(wǎng)頁設(shè)計(jì)，通過學(xué)習(xí)本書內(nèi)容均可快速掌握Bootstrap網(wǎng)頁設(shè)計(jì)和開發(fā)動(dòng)態(tài)網(wǎng)站的方法和技巧。讀書筆記讀書筆記案例太淺，完全是本科院校大作業(yè)的水平。這個(gè)彩色更能表達(dá)內(nèi)容還有人家框架好美這里的案例樣子怎么都這么shi一點(diǎn)看不到用這個(gè)框架的強(qiáng)大性不就是更美觀了嗎。Bootstrap的確簡化了很多，使web開發(fā)效率大大提高，唯一缺點(diǎn)就是加載文件多，體積大，對(duì)seo來講有害無益。本書的主要優(yōu)點(diǎn)，一是簡潔，二是示例豐富；不足之處，一是過于簡潔，二是示例還可以更豐富。目錄分析1.1Bootstrap概述1.2Bootstrap特性1.3Bootstrap應(yīng)用瀏覽1.4Bootstrap開發(fā)工具和資源第1章開發(fā)框架Bootstrap4簡介1.1Bootstrap概述1.1.1Bootstrap發(fā)展歷史1.1.2Bootstrap的優(yōu)勢1.1.3Bootstrap4介紹1.1.4Bootstrap4瀏覽器支持1.2Bootstrap特性1.2.1Bootstrap4的構(gòu)成1.2.2Bootstrap的特色1.3Bootstrap應(yīng)用瀏覽1.3.1Bootstrap網(wǎng)站1.3.2Bootstrap插件1.4Bootstrap開發(fā)工具和資源1.4.1Bootstrap開發(fā)工具1.4.2Bootstrap資源2.1下載Bootstrap2.3安裝Bootstrap2.2Bootstrap的結(jié)構(gòu)第2章使用最新的框架Bootstrap42.5案例實(shí)訓(xùn)2——設(shè)計(jì)網(wǎng)頁輪播組件2.4案例實(shí)訓(xùn)1——設(shè)計(jì)網(wǎng)頁按鈕第2章使用最新的框架Bootstrap42.2Bootstrap的結(jié)構(gòu)2.2.1源碼版Bootstrap文件結(jié)構(gòu)2.2.2編譯版Bootstrap文件結(jié)構(gòu)2.3安裝Bootstrap2.3.1本地安裝2.3.2在線安裝3.1布局基礎(chǔ)3.3布局工具類3.2網(wǎng)格系統(tǒng)第3章快速掌握Bootstrap4布局3.5案例實(shí)訓(xùn)2——開發(fā)電商網(wǎng)站特效3.4案例實(shí)訓(xùn)1——仿QQ登錄界面第3章快速掌握Bootstrap4布局3.1布局基礎(chǔ)3.1.1布局容器3.1.2響應(yīng)斷點(diǎn)3.1.3z-index3.2網(wǎng)格系統(tǒng)3.2.1網(wǎng)格選項(xiàng)3.2.2自動(dòng)布局列3.2.3響應(yīng)類3.2.4重排序3.2.5列嵌套4.1定義彈性盒子4.2排列方向4.3內(nèi)容排列4.4項(xiàng)目對(duì)齊4.5自動(dòng)對(duì)齊12345第4章Bootstrap4的新布局——彈性盒子4.6自動(dòng)相等4.7等寬變換4.8自動(dòng)浮動(dòng)4.9彈性布局——包裹4.10排列順序4.11對(duì)齊內(nèi)容010302040506第4章Bootstrap4的新布局——彈性盒子4.2排列方向4.2.1水平方向排列4.2.2垂直方向排列4.8自動(dòng)浮動(dòng)4.8.1水平方向浮動(dòng)4.8.2垂直方向浮動(dòng)5.1文本處理5.2顏色5.3邊框5.4寬度和高度第5章核心工具庫——CSS通用樣式類5.5邊距5.7display屬性類5.6浮動(dòng)第5章核心工具庫——CSS通用樣式類5.8嵌入5.9內(nèi)容溢出5.10定位5.11陰影5.12關(guān)閉圖標(biāo)12345第5章核心工具庫——CSS通用樣式類5.1文本處理5.1.1文本對(duì)齊5.1.2文本換行5.1.3文本轉(zhuǎn)換5.1.4粗細(xì)和斜體5.1.5其他一些文本類5.2顏色5.2.1文本顏色5.2.2鏈接文本顏色5.2.3背景顏色5.3邊框5.3.1添加邊框5.3.2邊框顏色5.3.3圓角邊框5.4寬度和高度5.4.1相對(duì)于父元素5.4.2相對(duì)于視口5.5邊距5.5.1邊距的定義5.5.2響應(yīng)式邊距5.6浮動(dòng)5.6.1實(shí)現(xiàn)浮動(dòng)5.6.2響應(yīng)式浮動(dòng)5.7display屬性類5.7.1實(shí)現(xiàn)display屬性5.7.2響應(yīng)式的隱藏或顯示元素6.1初始化與CSS重置6.2排版6.3代碼6.4圖片6.5表格6.6案例實(shí)訓(xùn)——設(shè)計(jì)后臺(tái)人員管理頁面010302040506第6章Bootstrap4的新版式6.2排版6.2.1標(biāo)題6.2.2段落6.2.3強(qiáng)調(diào)6.2.4縮略語6.2.5引用6.5表格6.5.1表格默認(rèn)風(fēng)格6.5.2設(shè)計(jì)個(gè)性化風(fēng)格7.1正確使用CSS組件7.2按鈕7.3按鈕組7.4下拉菜單第7章認(rèn)識(shí)CSS組件7.5導(dǎo)航7.7案例實(shí)訓(xùn)——設(shè)計(jì)廣告牌7.6超大屏幕第7章認(rèn)識(shí)CSS組件7.2按鈕7.2.1定義按鈕7.2.2設(shè)計(jì)按鈕風(fēng)格7.3按鈕組7.3.1定義按鈕組7.3.2定義按鈕組工具欄7.3.3設(shè)計(jì)按鈕組布局和樣式7.4下拉菜單7.4.1定義下拉菜單7.4.2設(shè)計(jì)下拉按鈕的樣式7.4.3設(shè)計(jì)下拉菜單的樣式7.5導(dǎo)航7.5.1定義導(dǎo)航7.5.2設(shè)計(jì)導(dǎo)航的布局7.5.3設(shè)計(jì)導(dǎo)航的風(fēng)格7.5.4設(shè)計(jì)導(dǎo)航選項(xiàng)卡7.6超大屏幕7.6.1定義超大屏幕7.6.2設(shè)計(jì)風(fēng)格8.1徽章8.2警告框8.3媒體對(duì)象8.4進(jìn)度條8.5導(dǎo)航欄8.6案例實(shí)訓(xùn)——設(shè)計(jì)動(dòng)態(tài)進(jìn)度條010302040506第8章深入掌握CSS組件8.1徽章8.1.1定義徽章8.1.2設(shè)置顏色8.1.3橢圓形徽章8.1.4鏈接徽章8.3媒體對(duì)象8.3.1媒體版式8.3.2媒體嵌套8.3.3對(duì)齊方式8.3.4排列順序8.3.5媒體列表8.4進(jìn)度條8.4.1定義進(jìn)度條8.4.2設(shè)計(jì)進(jìn)度條樣式8.4.3設(shè)計(jì)進(jìn)度條風(fēng)格8.5導(dǎo)航欄8.5.1定義導(dǎo)航欄8.5.2定位導(dǎo)航欄8.5.3設(shè)計(jì)導(dǎo)航欄配色8.5.4擴(kuò)展導(dǎo)航欄內(nèi)容9.1表單9.2列表組9.3面包屑9.4分頁第9章高級(jí)的CSS組件9.1表單9.1.1定義表單控件9.1.2設(shè)計(jì)單選按鈕／復(fù)選框布局和樣式9.1.3表單布局風(fēng)格9.1.4幫助文本9.1.5禁用表單9.2列表組9.2.1定義列表組9.2.2設(shè)計(jì)列表組的風(fēng)格樣式9.2.3定制內(nèi)容9.3面包屑9.3.1定義面包屑9.3.2設(shè)計(jì)分隔符9.4分頁9.4.1定義分頁9.4.2使用圖標(biāo)9.4.3設(shè)計(jì)分頁風(fēng)格10.1旋轉(zhuǎn)器特效10.2卡片10.3案例實(shí)訓(xùn)1——仿云巴網(wǎng)站10.4案例實(shí)訓(xùn)2——?jiǎng)討B(tài)進(jìn)度條及百分比數(shù)字顯示第10章Bootstrap4的新增組件——旋轉(zhuǎn)器和卡片10.1旋轉(zhuǎn)器特效10.1.1定義旋轉(zhuǎn)器10.1.2設(shè)計(jì)旋轉(zhuǎn)器風(fēng)格10.1.3對(duì)齊旋轉(zhuǎn)器10.1.4按鈕旋轉(zhuǎn)器10.2卡片10.2.1定義卡片10.2.2卡片的內(nèi)容類型10.2.3控制卡片的寬度10.2.4文本對(duì)齊方式10.2.5添加導(dǎo)航10.2.6圖像背景10.2.7卡片風(fēng)格10.2.8卡片排版11.1插件概述11.2按鈕11.3警告框11.4下拉菜單11.5模態(tài)框12345第11章快速認(rèn)識(shí)JavaScript插件11.6標(biāo)簽頁11.8案例實(shí)訓(xùn)2——仿京東商品推薦區(qū)11.7案例實(shí)訓(xùn)1——仿淘寶搶紅包第11章快速認(rèn)識(shí)JavaScript插件11.1插件概述11.1.1插件分類11.1.2安裝插件11.1.3調(diào)用插件11.1.4事件11.2按鈕11.2.1切換狀態(tài)11.2.2按鈕式復(fù)選框和單選框11.3警告框11.3.1關(guān)閉警告框11.3.2添加用戶行為11.4下拉菜單11.4.1調(diào)用下拉菜單11.4.2添加用戶行為11.5模態(tài)框11.5.1定義模態(tài)框11.5.2模態(tài)框布局和樣式11.5.3調(diào)用模態(tài)框11.5.4添加用戶行為11.6標(biāo)簽頁11.6.1定義標(biāo)簽頁11.6.2調(diào)用標(biāo)簽頁11.6.3添加用戶行為12.1折疊12.2工具提示12.3彈窗12.4輪播12.5滾動(dòng)監(jiān)聽12345第12章深入精通JavaScript插件12.7實(shí)戰(zhàn)實(shí)訓(xùn)2——仿小米內(nèi)容展示12.6實(shí)戰(zhàn)實(shí)訓(xùn)1——設(shè)計(jì)折疊搜索框第12章深入精通JavaScript插件12.1折疊12.1.1定義折疊12.1.2控制多目標(biāo)12.1.3設(shè)計(jì)手風(fēng)琴效果12.1.4調(diào)用折疊12.1.5添加用戶行為12.2工具提示12.2.1定義工具提示12.2.2工具提示方向12.2.3調(diào)用工具提示12.2.4添加用戶行為12.3彈窗12.3.1定義彈窗12.3.2彈窗方向12.3.3調(diào)用彈窗12.3.4添加用戶行為12.4輪播12.4.1定義輪播12.4.2設(shè)計(jì)輪播風(fēng)格12.4.3調(diào)用輪播12.4.4添加用戶行為12.5滾動(dòng)監(jiān)聽12.5.1定義滾動(dòng)監(jiān)聽12.5.2調(diào)用滾動(dòng)監(jiān)聽12.5.3添加用戶行為13.1案例概述13.3設(shè)計(jì)左側(cè)信息欄13.2設(shè)計(jì)布局第13章項(xiàng)目實(shí)訓(xùn)1——招聘網(wǎng)中的簡歷模板13.4設(shè)計(jì)導(dǎo)航條13.5設(shè)計(jì)主頁13.6設(shè)計(jì)聯(lián)系頁13.7設(shè)計(jì)相冊(cè)頁第13章項(xiàng)目實(shí)訓(xùn)1——招聘網(wǎng)中的簡歷模板13.1案例概述13.1.1案例結(jié)構(gòu)13.1.2設(shè)計(jì)效果13.1.3設(shè)計(jì)準(zhǔn)備13.5設(shè)計(jì)主頁13.5.1工作經(jīng)歷13.5.2專業(yè)技能13.5.3教育經(jīng)歷13.5.4綜合概述14.1網(wǎng)站概述14.3設(shè)計(jì)可切換導(dǎo)航14.2設(shè)計(jì)首頁布局第14章項(xiàng)目實(shí)訓(xùn)2——仿星巴克網(wǎng)站14.5設(shè)計(jì)底部隱藏導(dǎo)航14.4主體內(nèi)容第14章項(xiàng)目實(shí)訓(xùn)2——仿星巴克網(wǎng)站14.1網(wǎng)站概述14.1.1網(wǎng)站結(jié)構(gòu)14.1.2設(shè)計(jì)效果14.1.3設(shè)計(jì)準(zhǔn)備14.4主體內(nèi)容14.4.1設(shè)計(jì)輪播廣告區(qū)14.4.2設(shè)計(jì)產(chǎn)品推薦區(qū)14.4.3設(shè)計(jì)登錄注冊(cè)區(qū)和Logo14.4.4設(shè)計(jì)特色展示區(qū)14.4.5設(shè)計(jì)產(chǎn)品生產(chǎn)流程區(qū)15.1案例概述15.2設(shè)計(jì)導(dǎo)航欄15.3首頁15.4分類頁第15章項(xiàng)目實(shí)訓(xùn)3——相冊(cè)類博客項(xiàng)目15.6聯(lián)系頁15.5博客第15章項(xiàng)目實(shí)訓(xùn)3——相冊(cè)類博客項(xiàng)目15.1案例概述15.1.1案例結(jié)構(gòu)15.1.2設(shè)計(jì)效果15.1.3設(shè)計(jì)準(zhǔn)備15.3首頁15.3.1設(shè)計(jì)相冊(cè)展示15.3.2添加Swipebox燈箱插件15.4分類頁15.4.1設(shè)計(jì)相冊(cè)分類展示15.4.2添加Swipebox燈箱插件15.6聯(lián)系頁15.6.1設(shè)計(jì)布局15.6.2添加工具提示16.1網(wǎng)站概述16.2設(shè)計(jì)主頁16.3設(shè)計(jì)側(cè)邊導(dǎo)航欄16.4設(shè)計(jì)登錄頁第16章項(xiàng)目實(shí)訓(xùn)4——設(shè)計(jì)流行企業(yè)網(wǎng)站17.2設(shè)計(jì)主頁面導(dǎo)航17.1網(wǎng)站概述第17章項(xiàng)目實(shí)訓(xùn)5——Web設(shè)計(jì)與定制網(wǎng)站17.4設(shè)計(jì)腳注17.3設(shè)計(jì)主頁面內(nèi)容第17章項(xiàng)目實(shí)訓(xùn)5——Web設(shè)計(jì)與定制網(wǎng)站17.1網(wǎng)站概述17.1.1網(wǎng)站結(jié)構(gòu)17.1.2網(wǎng)站布局17.1.3設(shè)計(jì)準(zhǔn)備17.3設(shè)計(jì)主頁面內(nèi)容17.3.1設(shè)計(jì)首頁17.3.2“關(guān)于我們”頁面設(shè)計(jì)17.3.3“我們的團(tuán)隊(duì)”頁面設(shè)計(jì)17.3.4