Bootstrap響應式Web開發(fā)

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