Bootstrap響應(yīng)式Web開發(fā)

第 1章　初識(shí)Bootstrap\t001
1．1　Bootstrap概述　001
1．1．1　什么是Bootstrap　001
1．1．2　Bootstrap的特點(diǎn)　001
1．1．3　Bootstrap的組成　002
1．2　瀏覽器　003
1．2．1　PC端的瀏覽器　003
1．2．2　移動(dòng)端設(shè)備　003
1．2．3　移動(dòng)端的瀏覽器　005
1．3　Visual Studio Code編輯器　005
1．3．1　什么是Visual Studio Code　005
1．3．2　下載和安裝Visual Studio Code　005
1．3．3　使用Visual Studio Code　006
1．4　移動(dòng)Web開發(fā)的主流方案　007
1．4．1　單獨(dú)制作移動(dòng)端頁面　008
1．4．2　制作響應(yīng)式頁面　008
本章小結(jié)　010
課后練習(xí)　010
第　2章 移動(dòng)Web開發(fā)基礎(chǔ)（上）　012
2．1　視口　012
2．1．1　什么是視口　012
2．1．2　利用Chrome瀏覽器模擬手機(jī)
屏幕　013
2．1．3　利用標(biāo)簽設(shè)置視口　016
2．1．4　視口的常用設(shè)置　017
2．2　移動(dòng)Web頁面的樣式編寫　017
2．2．1　利用Normalize．css初始化默認(rèn)
樣式　017
2．2．2　設(shè)置box-sizing為border-box　019
2．2．3　設(shè)置移動(dòng)端的特殊樣式　021
2．3　分辨率和設(shè)備像素比　022
2．3．1　分辨率　022
2．3．2　設(shè)備像素比　023
2．4　二倍圖　023
2．4．1　什么是二倍圖　023
2．4．2　背景圖片的縮放　024
2．4．3　實(shí)現(xiàn)背景圖片的二倍圖　027
2．5　SVG矢量圖　027
2．5．1　什么是SVG　028
2．5．2　標(biāo)簽和樣式　028
2．5．3　從外部引入SVG文件　029
本章小結(jié)　031
課后練習(xí)　031
第3章　移動(dòng)Web開發(fā)基礎(chǔ)（下）　033
3．1　HTML5常用API　033
3．1．1　檢測網(wǎng)絡(luò)連接　033
3．1．2　全屏操作　035
3．1．3　文件讀取　037
3．1．4　地理定位　041
3．1．5　拖曳　052
3．1．6　Web存儲(chǔ)　055
3．1．7　播放視頻和音頻　059
3．2　移動(dòng)端常用事件　065
3．2．1　touch事件概述　065
3．2．2　touch事件實(shí)現(xiàn)輪播圖效果　067
3．2．3　模擬移動(dòng)端單擊事件　071
3．3　移動(dòng)端常用插件　072
3．3．1　Fastclick插件的使用　072
3．3．2　利用Fastclick處理點(diǎn)透事件　073
3．3．3　iScroll插件的使用　075
3．3．4　Swipe插件的使用　077
3．3．5　Swiper插件的使用　079
本章小結(jié)　081
課后練習(xí)　081
第4章　移動(dòng)端頁面布局　083
4．1　移動(dòng)端頁面常用布局　083
4．2　流式布局　084
4．3　彈性盒布局　086
4．3．1　什么是彈性盒布局　086
4．3．2　彈性盒布局常用屬性　087
4．4　媒體查詢　091
4．4．1　什么是媒體查詢　091
4．4．2　響應(yīng)式布局容器　091
4．5　Rem適配布局　093
4．5．1　rem單位　093
4．5．2　通過媒體查詢和rem單位實(shí)現(xiàn)
元素大小動(dòng)態(tài)變化　094
4．6　Sass　095
4．6．1　什么是Sass　095
4．6．2　在Node．js環(huán)境中使用Sass　096
4．6．3　Sass語法格式　097
4．6．4　Sass編譯　098
4．6．5　Sass嵌套　098
4．6．6　Sass運(yùn)算　099
4．7　Less　100
4．7．1　什么是Less　100
4．7．2　Less語法格式　100
4．7．3　Less編譯　101
4．8　Bootstrap響應(yīng)式布局　102
4．8．1　下載Bootstrap　102
4．8．2　預(yù)編譯的Bootstrap　103
4．8．3　Bootstrap源文件　104
4．8．4　使用Bootstrap CDN　104
4．8．5　Bootstrap初體驗(yàn)　105
本章小結(jié)　106
課后練習(xí)　107
第5章　Bootstrap柵格系統(tǒng)　108
5．1　柵格系統(tǒng)簡介　108
5．1．1　柵格系統(tǒng)概述　108
5．1．2　動(dòng)手實(shí)現(xiàn)簡單版柵格系統(tǒng)　109
5．2　Bootstrap布局容器　111
5．2．1　布局容器　111
5．2．2?。甤ontainer-fluid類　112
5．2．3?。甤ontainer類　113
5．3　柵格系統(tǒng)的基本使用　114
5．3．1　柵格系統(tǒng)的行和列　114
5．3．2　學(xué)生信息表格案例　115
5．4　柵格系統(tǒng)的屏幕適配　117
5．4．1　柵格系統(tǒng)的類前綴　117
5．4．2　使用類前綴設(shè)置列的寬度　117
5．4．3　利用柵格系統(tǒng)實(shí)現(xiàn)導(dǎo)航欄效果　119
5．5　柵格系統(tǒng)中列的操作　121
5．5．1　柵格系統(tǒng)中的列嵌套　121
5．5．2　柵格系統(tǒng)中的列偏移　122
本章小結(jié)　124
課后練習(xí)　124
第6章　Bootstrap框架常用組件　126
6．1　組件基礎(chǔ)　126
6．1．1　什么是組件　126
6．1．2　組件的優(yōu)勢(shì)　126
6．1．3　Bootstrap組件的依賴文件　127
6．2　Bootstrap常用組件　127
6．2．1　引入依賴文件　128
6．2．2　按鈕　128
6．2．3　導(dǎo)航　130
6．2．4　面包屑導(dǎo)航　131
6．2．5　分頁　132
6．2．6　列表　133
6．2．7　表單　134
6．2．8　按鈕組　135
6．2．9　輸入框組　136
6．3　Bootstrap實(shí)現(xiàn)菜單功能　137
6．3．1　引入依賴文件　137
6．3．2　折疊菜單　138
6．3．3　下拉菜單　139
6．4　Bootstrap實(shí)現(xiàn)輪播圖功能　140
6．4．1　什么是輪播圖　141
6．4．2　輪播圖的功能分析　141
6．4．3　輪播圖活動(dòng)信息　142
6．4．4　輪播圖左側(cè)箭頭　143
6．4．5　輪播圖右側(cè)箭頭　143
6．4．6　輪播圖指示器　144
本章小結(jié)　144
課后練習(xí)　144
第7章　Bootstrap常用布局樣式　146
7．1　內(nèi)容布局　146
7．1．1　標(biāo)題類　146
7．1．2　文本類　149
7．1．3　列表類　154
7．2　代碼和圖文布局　157
7．2．1　代碼樣式　157
7．2．2　圖文樣式　158
7．3　表格布局　163
7．4　輔助樣式　165
7．4．1　邊框樣式　165
7．4．2　背景顏色　166
本章小結(jié)　167
課后練習(xí)　168
第8章　綜合項(xiàng)目——潮流穿搭網(wǎng)站　169
8．1　項(xiàng)目分析　169
8．1．1　項(xiàng)目展示　169
8．1．2　創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)　172
8．2　前期準(zhǔn)備　172
8．2．1　設(shè)置元素間距　172
8．2．2　設(shè)置字體圖標(biāo)　173
8．2．3　頁面初始化　174
8．2．4　頁面結(jié)構(gòu)　174
8．3　代碼講解　175
8．3．1　導(dǎo)航欄模塊　175
8．3．2　輪播圖模塊　178
8．3．3　潮流穿搭技巧模塊　180
8．3．4　潮流穿搭風(fēng)格模塊　182
8．3．5　潮流穿搭新聞模塊　184
8．3．6　合作伙伴和著作權(quán)聲明模塊　185
本章小結(jié)　187
課后練習(xí)　187